Знайомство з sGrid: Flexbox Grid система на основі препроцесора Stylus

16

Від автора: прочитавши заголовок, ви можете задатися питанням: Чому ще одна сіткова система? І це хороше питання. По суті, існує безліч grid систем, і всі вони на основі flexbox. Так чому ж я вирішив збудувати ще один схожий інструмент? Відповідь буде короткою – дана система повністю адаптивна для побудови семантичних сіток з використанням лише препроцесора Stylus.

Саме це мені й було потрібно. Інструментарій дуже зрозумілий і простий без зайвих залежностей, так що його можна використовувати з будь-якими іншими JavaScript бібліотеками та фреймворками. Також набагато важливіше те, що sGrid запакований з допомогою npm, а для мене це дуже важливо, так як мені часто доводиться працювати з JavaScript стеком. Впевнений, що цей інструментарій буде вам корисним у вашій роботі зі Stylus.

Що таке sGrid?

sGrid це flexbox grid система для препроцесора Stylus. Система складається всього з трьох файлів .styl, один з яких необов’язковий. Все це запаковано в один простий npm пакет. Так як це стандартний npm пакет, то ви можете працювати з ним через що завгодно – командний рядок, Grunt або Gulp, або навіть Meteor JavaScript platform. Все залежить від вас, вашого стилю роботи.

Створюємо проект-приклад sGrid

Щоб познайомитися з sGrid, давайте створимо простий базовий приклад. Нам знадобляться два файлу .html і .styl. Передбачається, що у вас вже встановлений Stylus. Якщо ж ні, то вам необхідно його глобально встановити в терміналі за допомогою команди npm install -g stylus.

Першим ділом, створимо папку s-grid, всередині неї будуть зберігатися файли index.html і main.styl. Код файли index.html стандартний з посиланням на main.css, CSS файл. Для компіляції файлу main.css необхідно створити файл main.styl. Створимо його в тій же папці, поки що він буде порожній.

Тепер, необхідно встановити sGrid і плагін autoprefixer-stylus. У файлі main.css необхідно буде прописувати вендорные префікси. Щоб встановити, необхідно виконати наступну команду:

npm install -g s-grid autoprefixer-stylus

Після установки можна імпортувати файли sGrid в main.styl. Для цього відкрийте файл main.styl і вставте наступний код:

@import ‘s-grid-settings’
@import ‘s-grid-functions’
@import ‘s-grid-classes’

Зберігаємо файл, тепер з директорії s-grid можна запускати Stylus команду watch, після якої повинен створитися файл main.css. Всередині папки s-grid запускаємо:

stylus -u s-grid -u autoprefixer-stylus —with «{ browsers: [‘last 2 versions’] }» -w main.styl

Тим самим ми сказали Stylus, що необхідно перевірити файл main.styl, перекомпілювати файл main.css, а також що він повинен використовувати плагін Autoprefixer тільки для двох останніх версій браузерів. І, звичайно ж, він буде використовувати папку s-grid.

Остання команда досить-таки довга, але це тільки демо. Звичайно, ви будете працювати в якомусь Node додатку або іншій системі. Інші можливості можна подивитися в документації sGrid.

Як тепер ви могли помітити, файл main.css створився, і в ньому зберігається CSS код. Це тому, що ми імпортували s-grid-класи, готовий набір адаптивних класів. Імпорт класів не обов’язковий. Якщо закоментувати дану команду або видалити файл main.css знову виявиться порожнім. Ми не зможемо користуватися класами-помічниками, але ми все ще зможемо писати свої класи з допомогою sGrid функцій. Так навіщо ж нам взагалі потрібні ці класи? Дані класи корисні при швидкому прототипировании – те ж саме є в Bootstrap і Foundation. Розробники, знайомі з цими бібліотеками, моментально звикають і до цієї, так як вони схожі. Використовувати дані класи не обов’язково, а на ділі краще не використовувати.

Створюємо макет з допомогою sGrid

Створимо приклад з допомогою sGrid. Ми напишемо той самий код, що і вище, тільки на цей раз з допомогою sGrid функцій і класів-помічників (семантичний метод). Так що не будемо коментувати або видаляти імпорт s-grid-classes у файлі main.styl.

Загостримо увагу на базовій структурі. У цьому прикладі ми створимо простий центрований контейнер з максимальною шириною в 500px. Всередині блоку будуть перебувати два рівних адаптивних колонки. Для цього вставте наступний код всередину body у файлі index.html:

First cell
Second cell

Після sGrid импортов у файлі main.style додамо трохи стилів. Додамо наступний Stylus код:

.my-grid
background-color #E9E9EA
margin-top rem-calc(100)
center(500)
grid()
.my-cell
stack()
padding rem-calc(10)
background-color #D5D5D7
@media screen and (min-width: rem-calc(breakpoints[md]))
cell(1, 2)

Якщо ви все ще слідкуйте за файлом main.styl, то main.css повинен оновитися. А значить, тепер ви можете відкрити index.html у браузері. Нижче показано демо:

Функції sGrid

Якщо ви подивилися код в демо вище, то ви могли помітити, що я використав кілька Stylus функцій. Дані функції оголошені у файлі s-grid-functions. Розглянемо ці функції:

center(). Функція центрує головний контейнер. Як аргумент приймається ширина в пікселях (px або без).

rem(). Дана функція переводить передані пікселі в rem одиниці. Функція заснована на змінною base-font-size у файлі s-grid-settings.styl. Її можна переписати у файлі main.styl; для цього необхідно вставити функцію між импортами s-grid-settings і s-grid-functions.

grid(direction = ‘рядок’, cells-align = ‘top’, justify = «). Основна sGrid функція. Застосовується до головного блоку-обгортці. Приймає на вхід багато аргументів:

Direction

‘row’ (типово) – напрям осередків зліва направо

‘row-reverse’ – напрям клітинок справа наліво

‘column’ – напрям осередків зверху вниз

‘column-reverse’ – напрям осередків знизу вгору

cells-align (працює тільки з ‘row’ і ‘row-reverse’)

‘top’

‘bottom’

‘center’

‘stretch’

Justify

‘start’ – вирівнює вміст по лівому краю або поверху

‘end’ – вирівнює вміст по правому краю або понизу

‘center’ – вирівнює вміст по центру

cell(i = 1, cols = columns, align = », g = gutter). Ще одну головна sGrid функція, застосовується до всіх осередків сітки. Приймає параметри:

i / cols – дробу, тобто cell(1, 2) займає половину контейнера

align – окремі клітинки можна вертикаль вирівняти за допомогою значень ‘top’, ‘bottom’, or ‘center’

g — напрямок

stack(). Функція стека. З її допомогою можна створити одну клітинку cell(1, 1), що займає всю ширину контейнера.

Як я говорив вище, більше прикладів застосування тих чи інших функцій можна знайти в документації sGrid.

Адаптивні властивості sGrid

Якщо відкрити CSS файл в демо вище, ви можете помітити, що там використовуються медіа запити. Вони необхідні для техніки mobile first. Коли область перегляду більше змінної breakpoints[md], колонок буде дві. В іншому випадку, колонки одна під інший.

Так що таке змінна breakpoints[md]? Це глобальна змінна з файлу s-grid-settings, в якому задані стандартні дозволи екранів. Значення можна переписати.

sGrid класи-помічники

Розглянемо, як можна відтворити приклад вище, але вже з використанням класів помічників. Якщо ми будемо використовувати класи хелпери, то код index.html необхідно замінити на:

First cell
Second cell

У файлі main.styl ми можемо використовувати тільки функцію center(), все інше можна видалити. Тепер код виглядає так:

.my-grid
background-color #E9E9EA
margin-top rem-calc(100)
center(500)
.my-cell
padding rem-calc(10)
background-color #D5D5D7

Ви, мабуть, помітили, що HTML структура у цьому прикладі набагато складніше, але тепер нам не потрібно використовувати функції Stylus файлі. Якщо відкрити index.html у браузері, ефект буде точно такий же, як і в демо вище. Також можна написати код ще одним способом, можна скористатися сіткою. Замість того, щоб застосовувати класи хелпери до окремих комірок, можна додавати їх глобально, як у прикладі нижче:

First cell
Second cell

Ефект буде такий же. Більше інформації про хелперах можна подивитися в документації.

Міняємо вертикальне вирівнювання осередків

У наступному прикладі демонструється приклад того, наскільки легко можна змінити вертикальне вирівнювання комірки. Перепишемо файли index.html і main.styl. У файлі index.html повинен бути такий код:

Vertical Top
First cell
Second cell
Vertical Center
First cell
Second cell
Vertical Bottom
First cell
Second cell

А в main.styl такий:

@import ‘s-grid-settings’
@import ‘s-grid-functions’
@import ‘s-grid-classes’
.my-grid
background-color #E9E9EA
margin-top rem-calc(100)
center(500)
grid()
.label
stack()
text-align center
.my-cell-1, .my-cell-2
stack()
padding rem-calc(10)
background-color #D5D5D7
@media screen and (min-width: rem-calc(breakpoints[md]))
.my-cell-1
height rem-calc(300)
cell(2, 3)
.my-cell-2
&.top
cell(1, 3, align: ‘top’)
&.middle
cell(1, 3, align: ‘center’)
&.bottom
cell(1, 3, align: ‘bottom’)

Якщо перекомпілювати файл main.css і відкрити index.html у браузері, можна побачити, як вирівнюється друга комірка у всіх трьох випадках. В основному використовується атрибут align функції cell(). Також можна помітити, що перша комірка ширше. Це тому, що ми встановили першу клітинку в 2/3, а другу в 1/3. У першої клітинки статична висота, чисто для демо. Можете погратися, поізменять значення в демо нижче:

І для порівняння, ось ще один приклад використання sGrid: односторінковий повноекранний макет. Перевірте його адаптивність.

Коли не варто використовувати sGrid

sGrid не завжди підходить, і іноді краще скористатися нативним flexbox. З допомогою sGrid можна швидко створити адаптивну сітку, але в багатьох випадках можна обійтися парою рядків звичайного flexbox. sGrid буде корисний у тому випадку, якщо ви не знайомі з flexbox, так як він дає поверхове уявлення про роботу останнього.

Також не варто забувати про підтримку в браузерах. Flexbox добре працює в нових браузерах, але якщо вам потрібна підтримка старих версій IE, не варто використовувати sGrid. У IE11 теж є свої проблеми з flexbox, але вони вирішуються. Щоб зрозуміти суть цих проблем, зверніться в репозиторій багів flexbox від Philip Walton.

Заключні думки

Сподіваюся, sGrid виявився для вас корисним. Тим не менш, це лише вступ. sGrid можна зустріти в таких інструментах, як React boilerplate, Grunt boilerplate з Assemble та інших таск менеджерах. Також є Meteor package.

Готовий вислухати ваші ідеї в коментарях. Дана система можливо не вирішить всіх проблем з flexbox. Однак, я думаю, що це чудовий, швидкий і легкий інструмент при роботі з препроцесором Stylus. Особливо якщо ви не хочете заглиблюватися в принцип роботи flexbox і вам не потрібно працювати зі старими браузерами. Впевнений, що цей інструмент буде корисний у ваших мобільних гібридних веб-додатках і при швидкому прототипировании.