Краткое знакомство с системой контрольных точек Rupture под препроцессор Stylus.
Ниже приведено краткое и сбивчивое описание (знакомство) с системой breakpoints
под препроцессор Stylus. Оно основано на двух материалах, оба являющихся официальными:
А больше в Сети материалов по 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) понравилась, она очень проста и наглядна. Достаточно полчаса, чтобы ознакомиться с ее возможностями и начать применять на практике.
Комментарии