От автора: прочитав заголовок, вы можете задаться вопросом: Почему еще одна сеточная система? И это хороший вопрос. По существу, существует множество 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 необходимо будет прописывать вендорные префиксы. Чтобы установить, необходимо выполнить следующую команду:
1 |
npm install -g s-grid autoprefixer-stylus |
После установки можно импортировать файлы sGrid в main.styl. Для этого откройте файл main.styl и вставьте следующий код:
1 2 3 |
@import 's-grid-settings' @import 's-grid-functions' @import 's-grid-classes' |
Сохраняем файл, теперь из директории s-grid можно запускать Stylus команду watch, после которой должен создаться файл main.css. Внутри папки s-grid запускаем:
1 |
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:
1 2 3 4 |
<div class="my-grid"> <div class="my-cell">First cell</div> <div class="my-cell">Second cell</div> </div> |
После sGrid импортов в файле main.style добавим немного стилей. Добавим следующий Stylus код:
1 2 3 4 5 6 7 8 9 10 11 |
.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 = ‘row’, 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 необходимо заменить на:
1 2 3 4 5 6 7 8 |
<div class="my-grid s-grid-top"> <div class="my-cell s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6"> First cell </div> <div class="my-cell s-grid-cell s-grid-cell-sm-12 s-grid-cell-md-6"> Second cell </div> </div> |
В файле main.styl мы можем использовать только функцию center(), все остальное можно удалить. Теперь код выглядит так:
1 2 3 4 5 6 7 |
.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 в браузере, эффект будет точно такой же, как и в демо выше. Также можно написать код еще одним способом, можно воспользоваться сеткой. Вместо того, чтобы применять классы хелперы к отдельным ячейкам, можно добавлять их глобально, как в примере ниже:
1 2 3 4 |
<div class="my-grid s-grid-top s-grid-sm-12 s-grid-md-6"> <div class="s-grid-cell my-cell">First cell</div> <div class="s-grid-cell my-cell">Second cell</div> </div> |
Эффект будет такой же. Больше информации о хелперах можно посмотреть в документации.
Меняем вертикальное выравнивание ячеек
В примере ниже демонстрируется пример того, насколько легко можно изменять вертикальное выравнивание ячеек. Перепишем файлы index.html и main.styl. В файле index.html должен быть такой код:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<div class="my-grid"> <div class="label"> <strong>Vertical Top</strong> </div> <div class="my-cell-1"> First cell </div> <div class="my-cell-2 top"> Second cell </div> </div> <div class="my-grid"> <div class="label"> <strong>Vertical Center</strong> </div> <div class="my-cell-1"> First cell </div> <div class="my-cell-2 middle"> Second cell </div> </div> <div class="my-grid"> <div class="label"> <strong>Vertical Bottom</strong> </div> <div class="my-cell-1"> First cell </div> <div class="my-cell-2 bottom"> Second cell </div> </div> |
А в main.styl такой:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
@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 и вам не нужно работать со старыми браузерами. Уверен, что данный инструмент будет крайне полезен в ваших мобильных гибридных веб-приложениях и при быстром прототипировании.
Автор: Julian Ćwirko
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.