Быстрые адаптивные макеты с помощью 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 позволяет отцентрировать элемент горизонтально. В большинстве случаев вы будете использовать эту примесь для определения элемента, который будет служить контейнером для ваших колонок. В нижеприведённой таблице приведены его параметры

Параметр Описание Значение по умолчанию
max-width Устанавливает максимальную ширину элемента 1410px
pad Задаёт свойства padding-left и padding-right для элемента 0

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

Код на CodePen

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

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

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

Параметр Описание Значение по умолчанию
ratios Устанавливает ширину элемента относительно ширины контейнера 1
offset Задаёт свойство margin-left элемента 0
cycle Задаёт сетку с n колонками (в зависимости от значения cycle) 0
uncycle Отменяет создание сетки, определённой переменной cycle 0
gutter Задаёт свойство margin-right элемента 3

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

Пример на CodePen

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

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

Параметр Описание Значение по умолчанию
ratios Устанавливает ширину элемента относительно ширины контейнера 1
offset Задаёт свойство margin-left элемента 0
cycle Задаёт сетку с n колонками (в зависимости от значения cycle) 0
uncycle Отменяет создание сетки, определённой переменной cycle 0

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

Код на CodePen

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

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

Параметр Описание Значение по умолчанию
pad Задаёт свойства padding-left и padding-right для элемента 0
align Устанавливает свойство элемента text-align (если значение = true) false

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

Код на CodePen

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

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

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

Параметр Описание Значение по умолчанию
ratios Указывает, как далеко будет сдвинут элемент от оригинальной позиции 0
col-or-span Указывает, есть ли у элемента поля, или нет column
gutter Задаёт свойство margin-right элемента 3

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

Код на CodePen

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

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

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

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

Параметр Описание Значение по умолчанию
direction Указывает тип размещения элемента both

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

Код на CodePen

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.sitepoint.com/super-fast-responsive-layouts-jeet/
Перевел: Станислав Протасевич
Урок создан: 30 Января 2015
Просмотров: 10109
Правила перепечатки


5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^