Slim CSS Framework на основе CSS Flexbox

Slim CSS Framework на основе CSS Flexbox
Синтаксис CSS Flexbox не так прост для понимания. Если вы не имеете дело с этим ежедневно, вы предпочтете использовать что-то более простое, если и по мере необходимости. Крошечный CSS-фреймворк Taffy — это то, что нужно.

CSS Flexbox: индукция неизбежна

Здесь, в Noupe, мы уже несколько раз имели дело с Flexbox. Мы показали вам его основные преимущества в этой статье.

Чтобы быстрее получить результаты, я показал вам пару шаблонов Flexbox, по сути, фрагменты кода, прямо здесь. На t3n я представил небольшой инструмент Flex Layout Attribute, который также предназначен для ускорения рабочего процесса. И последнее, но не менее важное: я нашел Fibonacci Flexbox Composer. Но, в конце концов, я не могу отрицать, что Flexbox нуждается в индукции выше среднего.

Flexbox стал проще благодаря Taffy

Американский веб-разработчик Логан Карлайл использовал в качестве моделей более старые фреймворки, такие как популярный шаблон 960.gs. Он ориентировался на грид-системы, которые обеспечивают структуру дизайна в синтаксисе, близком к естественному языку, но интегрируют CSS Flexbox в качестве основы.

Таким образом, Карлайлу удается сделать гибкость Flexbox доступной для всех, кто может отличить 12 столбцов друг от друга. Он намеренно отказывается от обширных параметров конфигурации в стиле Bootstrap или Foundation.

Таким образом, Taffy — это скорее шаблон, чем фреймворк. Из-за этого при 11 КБ размер CSS минимален и поставляется без каких-либо зависимостей. Taffy по-прежнему предлагает стили и типографику, но больше как базовое оборудование.

Taffy создан с использованием Sass/SCSS и доступен для загрузки как проект с открытым исходным кодом под либеральной лицензией MIT с веб-сайта проекта. Здесь вы также найдете достаточно подробную и понятную документацию.

Создание столбцов с помощью Taffy

Как упоминалось ранее, Taffy напоминает популярные сеточные системы, но в то же время придерживается гибкого подхода, ориентированного на мобильные устройства, и работает с контрольными точками для разных размеров экрана. В качестве контейнера для содержимого класс .container используется.

Этот класс заботится о том, чтобы содержимое было центрировано и ограничено 960 пикселями, пока окно просмотра не шире 1000 пикселов. До размера окна просмотра 1192 пикселя ширина контейнера содержимого составляет 1152 пикселя, а на еще более широких дисплеях размер содержимого ограничен 1344 пикселями. Были выбраны эти, казалось бы, случайные значения, так как все их можно разделить на 12.

Фактическая сетка помещается в класс контейнера. Для этого класс .grid используется, внутри которого столбцы определяются через .grid_col. Здесь класс .grid можно рассматривать как линию. Внутри этой строки все столбцы обычно имеют одинаковую ширину. Чем больше столбцов, тем тоньше отдельный. Это так же логично, как звучит.

Поскольку такой подход обычно не соответствует пожеланиям проектировщика, существует несколько способов отменить это правило по умолчанию. Например, вы можете назначить проценты для отдельных столбцов, чтобы они занимали определенное количество доступного пространства. Например, добавление класса .is-50p к .grid_col, создает столбец, занимающий 50 процентов от общей ширины. Остальные столбцы соответствующей строки автоматически делят оставшееся пространство.

Более точный способ разделить имеющуюся комнату дают классы .is-1 к .is-12. Приказ grid_col is-1 приведет к тому, что столбец займет один из 12 столбцов общей ширины. Если бы нам нужно было два столбца, в этом случае вторым был бы grid_col is-11так что окончательный результат равен 12. Таким образом, вы можете свободно распределять столбцы.

Теперь, если сетка отображается на дисплее шириной менее 768 пикселей, все столбцы превращаются в полноразмерные и отображаются друг под другом. Если вы хотите повлиять на отображение отдельных точек останова, Taffy предлагает дополнения --small, --mediumи --large. Они позволяют вам определить, например, что столбец получает разные значения ширины на разных экранах.

Выучить синтаксис Taffy можно за полчаса. Шаблон также заботится о типографике, формах, кнопках, таблицах и медиа. Определенно стоит присмотреться к Таффи.