Rupture - система breakpoint под Stylus

Краткое знакомство с системой контрольных точек Rupture под препроцессор Stylus.

Ниже приведено краткое и сбивчивое описание (знакомство) с системой breakpoints под препроцессор Stylus. Оно основано на двух материалах, оба являющихся официальными:

• rupture on GitHub
• Rupture - official project

А больше в Сети материалов по Rupture и нет, даже на английском языке. Есть, правда, очень краткий - на французском, которым я совсем не владею.

Rupture был создан на примере плагина Breakpoint Slicer под препроцессор Sass.

Шкала Rupture

Основа Rupture - шкала значений breakpoints, которая так и называется - scale. Фактически scale - это объект со своими свойствами и методами. Перечень контрольных точек (breakpoints) - это массив значений, передаваемых объекту scale.

Ниже представлена scale по умолчанию (но которую можно легко изменить при необходимости):

scale = 0 400px 600px 800px 1050px 1800px

Количество этих значений - 0, 400px, 600px 800px, 1050px - может быть необязательно равно 5 (пяти). Их может быть неограниченное количество - столько, сколько нужно.

Перечень значений breakpoints, показанных выше, можно представить в виде диапазонов; каждому диапазону можно присвоить порядковый номер slice number и “обозвать” как slice:

Подключать библиотеку Rupture в проект нет необходимости. Достаточно установить библиотеку командой:

$ sudo npm install rupture --global

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

$ stylus -u rupture -c example.styl

Здесь -c - это сокращение от –compress, то есть - минифицировать CSS-код на выходе. Почему не рекомендуется использовать командную строку? Просто для этих целей лучше (и целесообразнее) использовать Gulp.

Миксины Rupture

В Rupture все управляется миксинами. Есть заранее созданный набор миксинов, которые необходимо применять для определенного случая (breakpoints).

Все миксины Rupture делятся на два вида:

• простые миксины для практического использования каждый день
• сложный набор миксинов, которые фактически представляют из себя grid sistem

В этом кратком обзоре я буду рассматривать только “практические” миксины. Более сложные - нет, ибо “не зачем”.

Набор практических миксинов Rupture

Первые три миксина - наиболее применимые и удобные на практике.

+above(measure)

• если размер окна браузера больше указанного значения (> measure), то применить стили
• +from-width(measure) - это алиас миксина +above(measure)

+below(measure)

• если размер окна браузера меньше указанного значения (< measure), то применить стили
• +to-width(measure) - это алиас миксина +below(measure)

+between(measure1, measure2)

• если размер окна браузера находится в указанных пределах (measure1 <= between <= measure2), то применить стили

Дальше пошли миксины - “по обстоятельствам”.

+at(measure)

• если размер окна браузера >= указанного значения, то применить стили

+mobile()

• если размер окна браузера <= 400px, то применить стили
• rupture.mobile-cutoff - переменная, в которой хранится значение для миксина mobile()

+tablet()

• если размер окна браузера находится в пределах >= 1050px и < 400px, то применить стили

+desktop()

• если размер окна браузера > 1050px, то применить стили
• rupture.desktop-cutoff - переменная, в которой хранится значение для миксина desktop()

+hd()

• если размер окна браузера >= 1800px, то применить стили
• rupture.hd-cutoff - переменная, в которой хранится значение для миксина hd()

+retina()

• если плотность размещения пикселей больше 1.5 (retina display), то применить стили

+landscape()

• если у окна браузера высота меньше, чем ширина, то применить стили

+portrait()

• если у окна браузера высота больше, чем ширина, то применить стили

Настройка Rupture

Как любая система, Rupture имеет свои собственные настройки. Которые можно задавать в файле проекта в виде переменных с их значениями.

К примеру, Rupture имеет возможность автоматического конвертирования значений breakpoints из пикселей (px) в em. Как говорится в официальном руководстве, в веб-разработке существует мнение, что задавать контрольные точки в em - это хорошая практика.

Поэтому, такой пример иллюстрирует включение автоматической конвертации из px в em; и задание базового размера шрифта в 18px (базовый размер шрифта равен 16px):

rupture.enable-em-breakpoints = true
base-font-size = 18px

rupture.scale - одна из важнейших переменных Rupture. В этой переменной можно в виде массива переопределить значения breakpoints.

Например, таким образом:

rupture.scale = 0 380px 768px 1200px

Пример работы Rupture

Перейдем от теории к практике и рассмотрим маленький рабочий пример - как будет отрабатывать Rupture:

div.wrapper
  div.left
  div.right

@import 'nib'
@import 'jeet'

// Partials
@import 'partials/*.styl'

rupture.enable-em-breakpoints = true

.wrapper
  center()

.left
  col(1/3)
  height 20vh
  background-color lighten($color,10%)
  +below(800px)
    col(1/4)
    background-color lighten($color,20%)
  +below(400px)
    stack()
    margin-bottom 10px

.right
  col(2/3)
  height 20vh
  background-color lighten($color,20%)
  +below(800px)
    col(3/4)
    background-color lighten($color,30%)
  +below(400px)
    stack()

Комментировать вышеприведенный код мне как-то не особого желания. Он очень простой и наглядный - слова тут излишни.

Кроме одного вопроса, который чуть не забыл упомянуть! В этом коде (и всех примерах выше) применялось точное значение для миксинов - +below(400px), к примеру.

Но ничто не мешает использовать любые произвольные переменные, в которые можно “загружать” нужные значения. К примеру, код выше можно преобразовать таким образом:

@import 'nib'
@import 'jeet'

// Partials
@import 'partials/*.styl'

// Breakpoint Variables
$bp1 = 800px
$bp2 = 400px

rupture.enable-em-breakpoints = true

.wrapper
  center()

.left
  col(1/3)
  height 20vh
  background-color lighten($color,10%)
  +below($bp1)
    col(1/4)
    background-color lighten($color,20%)
  +below($bp2)
    stack()
    margin-bottom 10px

.right
  col(2/3)
  height 20vh
  background-color lighten($color,20%)
  +below($bp1)
    col(3/4)
    background-color lighten($color,30%)
  +below($bp2)
    stack()

Заключение о Rupture

Вот я и познакомился с Rupture. Что можно сказать - система мне (в очередной раз - все из мира Stylus) понравилась, она очень проста и наглядна. Достаточно полчаса, чтобы ознакомиться с ее возможностями и начать применять на практике.