Jeet.gs - первое знакомство

Reading time ~13 minutes

Вступление

Сегодня приступим к знакомству с системой построения сеток 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 импортируется в файл проекта

1
*.styl
с помощью директивы
1
@import
:

@import 'jeet'

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

sudo stylus -u jeet -w style.styl

где

1
-u
- это сокращение от
1
--using
,
1
-w
- от
1
--watch
. То есть, мониторить (watch) все изменения файла
1
style.styl
и при этом учитывать (
1
using
) возможности подключенной библиотеки jeet.gs.

Пакет jeet.gs можно заставить работать несколько иначе - крутиться под Gulp. Для этого достаточно правильно оформить файл

1
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 являются колонки\столбцы -

1
column
. Так как jeet.gs изначально является адаптивной системой, то задать ширину column можно как дробную часть от ширины блока-контейнера -
1
1/3
,
1
1/6
,
1
1/10
,
1
1/100
и так далее. Не обязательно можно задавать в виде дроби, можно в десятичном виде -
1
.3
,
1
.25
,
1
.15
.

Пример задания ширины для двух блоков

1
.sidebar
и
1
.main
. В обоих случаях используется функция
1
column()
, у которой есть более используемое сокращение -
1
col()
:

.sidebar
  col(1/4)
.main
  col(3/4)

Функция

1
column()
может принимать целый ряд аргументов, с помощью которых возможна тонкая настройка блоков в разметке.

Смещение колонок\столбцов выполняется с помощью аргумента

1
offset
, который может принимать как положительное, так и отрицательное значение. Положительное значение
1
offset
задает у столбца
1
margin-left
- и столбец смещается влево. Отрицательное значение задает
1
margin-right
- и блок смещается вправо.

.block
  column(1/3, offset: 1/4)

Аргумент

1
cycle
позволяет создавать галлереи. Допустим, необходимо создать галлерею из картинок, в которой должно быть 4 (четыре) картинки в ряду. Тогда для функции
1
column()
задаем параметр
1
cycle: 4
:

.block
  column(1/3, cycle: 4)

Аргумент

1
uncycle
позволяет создавать мобильные версии галерей. Допустим, desktop-версия галлереи -
1
column(1/3, cycle: 4)
. Чтобы создать мобильную версию этой галлереи, в которой картинки будут располагаться по две в ряд, достаточно прописать так:

.block
  column(1/3, uncycle: 4, cycle: 2)

Аргумент

1
gutter
позволяет управлять шириной gutter между столбцами в каждом конкретном случае. Допустим, таким образом:

.block
  column(1/3, uncycle: 4, cycle: 2, gutter: .5)

Функция span()

Синтаксис:

span(ratio = 1, offset = 0)

Эта функция является своего рода облегченным вариантом функции

1
column()
. Функция
1
span()
не “понимает” такого свойства, как отступы
1
gutter
у блоков. По одной простой причине - функция
1
span()
создает разметку из блоков, плотно прилегающих друг к другу, без
1
margin
.

Такая разметка крайне полезна при создании горизонтальной навигации. Например, создать навигацию из восьми пунктов:

.nav
  cf()
  a
    span(1/8)

Функция shift()

Синтаксис:

shift(ratios = 0, col_or_span = column, gutter = jeet.gutter)

Эта функция служит для изменения порядка расположения элементов в нормальном потоке, с помощью свойства

1
position: relative
. Величина смещения задается аргументом
1
ratios
и применяется подобное смещение в виде свойства
1
left
к блоку. При этом функции
1
shift()
с помощью задания или не задания аргумента
1
gutter
можно указать, является ли данный блок столбцом (через функцию
1
column()
) или блоком span (через функцию
1
span()
).

Функция

1
shift()
точно также, как и аргумент
1
offset
, может принимать отрицательные значения для изменения направления смещения блока. Также, функция
1
shift()
может принимать не только целые, но и дробные значения для точного позиционирования.

Функция unshift()

Синтаксис - отсутствует

Эта функция не принимает каких-либо аргументов. Ее задача - отменить действие функции

1
shift()
.

Функция edit()

Синтаксис - отсутствует

Данная функция не создает разметку напрямую. Ее задача - помочь в создании разметки. С ее помощью каждый элемент на странице окрашивается в определенный оттенок серого цвета. Это помогает визульно контролировать правильность процесса создания разметки.

Чтобы функция заработала, достаточно включить ее в файле проекта в любом месте:

edit()

Вид разметки будет примерно таким:

Функция edit() в jeet.gs

Функция center()

Синтаксис:

center(max-width = 1410px, pad = 0)

Задача функции

1
center()
- быстро и грамотно выполнять центрирование блока в разметке. Как видно из синтаксиса, функция принимает два аргумента:

  • максимальную ширину
    1
    max-width
    
    , равную по умолчанию
    1
    1410px
    
    ;
  • 1
    padding-left
    
    и
    1
    padding-right
    
    для блока, задаваемые в виде шортката
    1
    pad
    
    и равного нулю по умолчанию; то есть, нельзя управлять
    1
    padding-left
    
    и
    1
    padding-right
    
    по отдельности - только одно значение сразу для двух свойств.

Функция cf()

Синтаксис - отсутствует

Данная функция - это всего лишь

1
clearfix
от Nicholas Gallagher. Думаю, дальнейшее объяснение излишне. Принимать - маленькими дозами для любых блоков с
1
column()
или
1
span()
.

Функция align()

Функция для выравнивания блока внутри блока-контейнера с помощью

1
position: absolute
. Вертикальное выравнивание в браузерах IE9+ теперь простая вещь.

Функция stack()

Синтаксис:

stack(pad = 0, align = false)

Данная функция предназначена для расположения блоков стопкой (stack), друг над другом. Такой вид расположения блоков применим для модильной версии страницы. Функция

1
stack()
принимает два вида аргументов:

  • 1
    pad
    
    - отступы
    1
    padding-left
    
    и
    1
    padding-right
    
    для блока;
  • 1
    align
    
    - выпавнивание текста внутри блока.

Функция unstack()

Синтаксис - отсутствует

Данная функция отменяет действие функции

1
stack()
. Однако, действие этой функции не возвращает разметку к прежнему виду, с применением функции
1
column()
. Чтобы вернуть разметку к такому результату, необходимо снова использовать функцию
1
column()
.

Настройки Jeet.gs

Настройки системы jeet.gs очень просты. Первоначально необходимо создать файл

1
_settings.styl
, который нужно подключить в файл стилей директивой
1
@import '_settings'
. При этом необходимо, чтобы строка
1
@import '_settings'
размещалась сразу после строки
1
@import 'jeet'
.

Содержимое файла настроек

1
_settings.styl
- это несколько переменных:

  • 1
    jeet[‘gutter'] = 3
    
    - размер ширины gutter в процентах, от общей ширины страницы
  • 1
    jeet[‘parent-first'] = false
    
    - если сказать коротко, каким образом будет производиться вычисление ширины блока; относительно конкретного блока-родителя; или же относительно корневого блока-родителя
  • 1
    jeet[‘layout-direction'] = LTR
    
    - направление текста внутри разметки

Заключение по Jeet.gs

Итак, познакомились с системой создания разметки jeet.gs. На удивление, она оказалась проста и достаточно полчаса, чтобы разобраться в ней. Не сравнить с Susy, конечно.

Но этого мало, естественно. Хотелось бы посмотреть на живые примеры сайтов, созданных с помощью jeet.gs. В этом вопросе может помочь сам официальный сайт Jeet.gs - милости просим.

Создано по материалам:

P.S.

В данной статье возможны (и 100% - что есть) неточности и мелкие ошибки. Это и понятно - это мое первое знакомство с Jeet.gs. Поэтому, если будут замечания - милости просим.

На этом все.


MongoDB - создание документа

![MongoDB]({{site.url}}/images/uploads/2017/05/mongodb-logo.jpg "MongoDB")Приступили к самому основному - операциям создания, чтения, изм...… Continue reading

MongoDB - документы

Published on May 23, 2017