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

Reading time ~7 minutes

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

Ниже приведено краткое и сбивчивое описание (знакомство) с системой

1
breakpoints
под препроцессор Stylus. Оно основано на двух материалах, оба являющихся официальными:

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

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

Шкала Rupture

Основа Rupture - шкала значений

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

Ниже представлена

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

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

Количество этих значений -

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

Перечень значений

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

Rupture Scale

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

$ sudo npm install rupture --global

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

$ stylus -u rupture -c example.styl

Здесь

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

Миксины Rupture

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

1
breakpoints
).

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

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

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

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

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

+above(measure)

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

+below(measure)

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

+between(measure1, measure2)

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

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

+at(measure)

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

+mobile()

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

+tablet()

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

+desktop()

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

+hd()

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

+retina()

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

+landscape()

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

+portrait()

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

Настройка Rupture

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

К примеру, Rupture имеет возможность автоматического конвертирования значений

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

Поэтому, такой пример иллюстрирует включение автоматической конвертации из

1
px
в
1
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()

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

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

1
+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) понравилась, она очень проста и наглядна. Достаточно полчаса, чтобы ознакомиться с ее возможностями и начать применять на практике.


Mangling Angular

Angular Builder поддерживает параметры среды:- NG_BUILD_MANGLE- NG_BUILD_MINIFY- NG_BUILD_BEAUTIFYМожно установить их при запуске скрипта...… Continue reading

Constructor parameter without access modifier

Published on February 04, 2024

RxJs and DestroyRef Provider

Published on January 24, 2024