Быстрые адаптивные макеты с помощью Jeet

На сегодняшний день есть куча систем адаптивных сеток. Дизайнеры и фронтенд-разработчики могут экспериментировать с ними, и выбирать те, которые наилучшим образом подходят для их нужд. CSS-фреймворки и макета, наподобие Bootstrap, Foundation и Skeleton предоставляют свои сетки, которые используют тысячи людей.

В этой статье я бы хотел познакомить вас с Jeet - альтернативной системой сеток, построенной на препроцессорах CSS. Для начала я расскажу об основах, представив основные примеси.

Что такое Jeet

Jeet - система сеток, построенная на базе Sass и Stylus. Она состоит из мощных примесей и функций, которые вы можете использовать для создания быстрых и адаптивных макетов.

В отличие от других сеток, Jeet предлагает более гибкий подход к построению макетов. Вот его основные преимущества:

1. Он не добавляет никакой дополнительной разметки
2. Он не ограничен определённым размером колонки (например, сетка из 12 колонок)
3. Для генерации необходимого шаблона вы можете использовать дроби (то есть, 1/4), десятичные числа (например, 0.75), или даже их комбинацию (1.5/4)

Сетка была разработана для работы в основных браузерах, включая IE9+. Если вам нужно работать с предыдущими версиями IE - обратите внимание на шаблон Boy.

Начало работы

Сетка идёт в двух редакциях: одна для Sass (SCSS), а другая для Stylus. В зависимости от предпочитаемого препроцессора, разнится способ установки. Официальная страница Jeet описывает все шаги, которых вы должны придерживаться при включении сетки в ваши проекты.

Взяв за основу Sass-версию, я настроил демонстрационный проект. Я буду ссылаться на него в следующем разделе. Пока давайте посмотрим на основную структуру:

jeet-demo/
??? index.html
??? jeet/
? 	??? _functions.scss
? 	??? _grid.scss
? 	??? _settings.scss
? 	??? index.scss
??? style.css
??? style.scss

Вы можете получить все файлы этого проекта из репозитория на Github.

Пора перейти к основным примесям Jeet.

Замечание: для демонстрации того, как работают примеси, я использую синтаксис SCSS

Контейнер

Примесь center позволяет отцентрировать элемент горизонтально. В большинстве случаев вы будете использовать эту примесь для определения элемента, который будет служить контейнером для ваших колонок. В нижеприведённой таблице приведены его параметры

Вот пример использования этой примеси:

Код на CodePen

Чтобы восстановить правила, применённые примесью center, воспользуйтесь примесью uncenter.

Колонки с отступами

Для задания своих колонок, Jeet предоставляет примеси col и column. Следующая таблица описывает их параметры:

Свойства cycle и uncycle упрощают процесс создания многоколоночных адаптивных макетов. Вот пример:

Пример на CodePen

Колонки без отступов

В дополнение к примесям col/column для создания колонок также доступна примесь span. Её вы можете использовать, если вам не нужно пространство между колонками. Вот её параметры:

Ниже приведён пример этой примеси:

Код на CodePen

Группированные колонки

Примесь stack помогает генерировать сгруппированные колонки. Это полезная возможность, особенно на экранах малого размера, где меняется разбивка, и элементы располагаются один под другим. Вот её параметры:

Пример подобной реализации представлен ниже:

Код на CodePen

Чтобы восстановить поведение, определённое примесью stack, воспользуйтесь примесью unstack

Порядок следования колонок

Для указания порядка колонок Jeet предоставляет примесь shift. В следующей таблице представлены её параметры:

Понять идею этой примеси можно из следующего примера:

Код на CodePen

Чтобы восстановить правила. применённые примесью shift, воспользуйтесь примесью unshift.

Абсолютное центрирование

С помощью примеси align вы можете центрировать элемент горизонтально или/и вертикально. Чтобы получить его преимущества, тип позиционирования родительского элемента должен быть relative.

Параметр этой примеси приведён в следующей таблице:

А вот и пример:

Код на CodePen