Вступление
Сегодня приступим к знакомству с системой построения сеток jeet.gs.
Читатели могут спросить - отлично, но чем плоха Susy? Ответ прост - Susy работает на Ruby, она просто несовместима со Stylus.
Так как с недавнего времени я перешел с Sass(SCSS) на Stylus и совсем не жалею об этом, то сразу принялся искать замену Susy. Надо сказать, я быстро ее нашел и этой заменой оказалась jeet.gs. “Grid system для людей” - как ее “обозвали” в прекрасном task runner CodeKit. Кстати, сам факт присутствия jeet.gs в CodeKit говорит за себя.
Система jeet.gs изначально адаптивная, она проста в использовании и изучении. Если честно, Susy я так до конца и не освоил (только необходимые основы), так как она достаточно сложна в изучении, несмотря на прекрасную документацию. Еще можно сказать, что jeet.gs очень молода - ей всего 9 месяцев и поэтому я с вами, уважаемый читатель, иду в ногу со временем, я на cutting edge!
Существование и использование jeet.gs имеет мало смысла без системы контрольных точек (breakpoint). В Susy в этом качестве служит хороший инструмент Breakpoint. Под jeet.gs конечно же существует аналог под названием Rupture. Эта система также проста и наглядна, как и jeet.gs.
Стоит также оговориться, что под Stylus имеются не менее прекрасные проекты Typographic и Axis, с которыми я планирую познакомиться в свое время.
Jeet.gs - grid system под Stylus
Итак, фанфары прозвучали в честь обоих героев сегодняшнего дня. Пора приступать к более детальному знакоству с ними. И начнем с главного героя - системы сеток (grid system) jeet.gs.
Установка Jeet.gs под Stylus
Любое знакомство начинается с установки пакета. На официальной странице jeet.gs прекрасно оформлено описание инсталляции - она проста. Кстати, стоит оговориться, что jeet.gs можно установить и под Sass(SCSS). Но я этого делать не буду - мне это не интересно и не нужно.
Предполагается, что у читателя рабочей операционной системой является MacOSX или Linux OS (все команды в этой статье будут показаны применительно к этим двум родственным системам). Также предполагается, что в любой из этих систем уже установлены Node.js и Stylus (иначе вы немного забежали вперед, уважаемый читатель).
Установка jeet.gs выполняется одной строкой:
sudo npm install jeet --globalДалее библиотека jeet.gs импортируется в файл проекта *.styl с помощью директивы @import:
@import 'jeet'После этого можно запустить мониторинг и компиляцию командой:
sudo stylus -u jeet -w style.stylгде -u - это сокращение от –using, -w - от –watch. То есть, мониторить (watch) все изменения файла style.styl и при этом учитывать (using) возможности подключенной библиотеки jeet.gs.
Пакет jeet.gs можно заставить работать несколько иначе - крутиться под Gulp. Для этого достаточно правильно оформить файл gulpfile.js:
var gulp = require('gulp'),
...
nib = require('nib'),
jeet = require('jeet'),
rupture = require('rupture');
// STYLUS WITH NIB AND JEET AND RUPTURE
gulp.task('stylus', function(){
gulp.src('app/styles/style.styl')
.pipe(plumber())
.pipe(stylus({use:[nib(),jeet(),rupture()]}))
.pipe(gulp.dest('dist/'));
});Возможности Jeet.gs
С документацией по jeet.gs можно ознакомиться на оф. сайте в разделе Jeet’s API или же на страничке GitHub - jeet/stylus.
Функция column()
Синтаксис:
column(ratios = 1, offset = 0, cycle = 0, uncycle = 0, gutter = jeet.gutter)Основой любой современной grid system являются колонки\столбцы - column. Так как jeet.gs изначально является адаптивной системой, то задать ширину column можно как дробную часть от ширины блока-контейнера - 1/3, 1/6, 1/10, 1/100 и так далее. Не обязательно можно задавать в виде дроби, можно в десятичном виде - .3, .25, .15.
Пример задания ширины для двух блоков .sidebar и .main. В обоих случаях используется функция column(), у которой есть более используемое сокращение - col():
.sidebar
col(1/4)
.main
col(3/4)Функция column() может принимать целый ряд аргументов, с помощью которых возможна тонкая настройка блоков в разметке.
Смещение колонок\столбцов выполняется с помощью аргумента offset, который может принимать как положительное, так и отрицательное значение. Положительное значение offset задает у столбца margin-left - и столбец смещается влево. Отрицательное значение задает margin-right - и блок смещается вправо.
.block
column(1/3, offset: 1/4)Аргумент cycle позволяет создавать галлереи. Допустим, необходимо создать галлерею из картинок, в которой должно быть 4 (четыре) картинки в ряду. Тогда для функции column() задаем параметр cycle: 4 :
.block
column(1/3, cycle: 4)Аргумент uncycle позволяет создавать мобильные версии галерей. Допустим, desktop-версия галлереи - column(1/3, cycle: 4). Чтобы создать мобильную версию этой галлереи, в которой картинки будут располагаться по две в ряд, достаточно прописать так:
.block
column(1/3, uncycle: 4, cycle: 2)Аргумент gutter позволяет управлять шириной gutter между столбцами в каждом конкретном случае. Допустим, таким образом:
.block
column(1/3, uncycle: 4, cycle: 2, gutter: .5)Функция span()
Синтаксис:
span(ratio = 1, offset = 0)Эта функция является своего рода облегченным вариантом функции column(). Функция span() не “понимает” такого свойства, как отступы gutter у блоков. По одной простой причине - функция span() создает разметку из блоков, плотно прилегающих друг к другу, без margin.
Такая разметка крайне полезна при создании горизонтальной навигации. Например, создать навигацию из восьми пунктов:
.nav
cf()
a
span(1/8)Функция shift()
Синтаксис:
shift(ratios = 0, col_or_span = column, gutter = jeet.gutter)Эта функция служит для изменения порядка расположения элементов в нормальном потоке, с помощью свойства position: relative. Величина смещения задается аргументом ratios и применяется подобное смещение в виде свойства left к блоку. При этом функции shift() с помощью задания или не задания аргумента gutter можно указать, является ли данный блок столбцом (через функцию column()) или блоком span (через функцию span()).
Функция shift() точно также, как и аргумент offset, может принимать отрицательные значения для изменения направления смещения блока. Также, функция shift() может принимать не только целые, но и дробные значения для точного позиционирования.
Функция unshift()
Синтаксис - отсутствует
Эта функция не принимает каких-либо аргументов. Ее задача - отменить действие функции shift().
Функция edit()
Синтаксис - отсутствует
Данная функция не создает разметку напрямую. Ее задача - помочь в создании разметки. С ее помощью каждый элемент на странице окрашивается в определенный оттенок серого цвета. Это помогает визульно контролировать правильность процесса создания разметки.
Чтобы функция заработала, достаточно включить ее в файле проекта в любом месте:
edit()Вид разметки будет примерно таким:
Функция center()
Синтаксис:
center(max-width = 1410px, pad = 0)Задача функции center() - быстро и грамотно выполнять центрирование блока в разметке. Как видно из синтаксиса, функция принимает два аргумента:
- максимальную ширину max-width, равную по умолчанию 1410px;
- padding-left и padding-right для блока, задаваемые в виде шортката pad и равного нулю по умолчанию; то есть, нельзя управлять padding-left и padding-right по отдельности - только одно значение сразу для двух свойств.
Функция cf()
Синтаксис - отсутствует
Данная функция - это всего лишь clearfix от Nicholas Gallagher. Думаю, дальнейшее объяснение излишне. Принимать - маленькими дозами для любых блоков с column() или span().
Функция align()
Функция для выравнивания блока внутри блока-контейнера с помощью position: absolute. Вертикальное выравнивание в браузерах IE9+ теперь простая вещь.
Функция stack()
Синтаксис:
stack(pad = 0, align = false)Данная функция предназначена для расположения блоков стопкой (stack), друг над другом. Такой вид расположения блоков применим для модильной версии страницы. Функция stack() принимает два вида аргументов:
- pad - отступы padding-left и padding-right для блока;
- align - выпавнивание текста внутри блока.
Функция unstack()
Синтаксис - отсутствует
Данная функция отменяет действие функции stack(). Однако, действие этой функции не возвращает разметку к прежнему виду, с применением функции column(). Чтобы вернуть разметку к такому результату, необходимо снова использовать функцию column().
Настройки Jeet.gs
Настройки системы jeet.gs очень просты. Первоначально необходимо создать файл _settings.styl, который нужно подключить в файл стилей директивой @import ‘_settings’. При этом необходимо, чтобы строка @import ‘_settings’ размещалась сразу после строки @import ‘jeet’.
Содержимое файла настроек _settings.styl - это несколько переменных:
- jeet[‘gutter’] = 3 - размер ширины gutter в процентах, от общей ширины страницы
- jeet[‘parent-first’] = false - если сказать коротко, каким образом будет производиться вычисление ширины блока; относительно конкретного блока-родителя; или же относительно корневого блока-родителя
- jeet[‘layout-direction’] = LTR - направление текста внутри разметки
Заключение по Jeet.gs
Итак, познакомились с системой создания разметки jeet.gs. На удивление, она оказалась проста и достаточно полчаса, чтобы разобраться в ней. Не сравнить с Susy, конечно.
Но этого мало, естественно. Хотелось бы посмотреть на живые примеры сайтов, созданных с помощью jeet.gs. В этом вопросе может помочь сам официальный сайт Jeet.gs - милости просим.
Создано по материалам:
P.S.
В данной статье возможны (и 100% - что есть) неточности и мелкие ошибки. Это и понятно - это мое первое знакомство с Jeet.gs. Поэтому, если будут замечания - милости просим.
На этом все.