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

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

От автора: прочитав заголовок, вы можете задаться вопросом: Почему еще одна сеточная система? И это хороший вопрос. По существу, существует множество 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:

<div class="my-grid">
  <div class="my-cell">First cell</div>
  <div class="my-cell">Second cell</div>
</div>

После 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 = ‘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 необходимо заменить на:

<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(), все остальное можно удалить. Теперь код выглядит так:

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

<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 должен быть такой код:

<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 такой:

@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

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree