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

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

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

1

breakpoints

• rupture on GitHub
• Rupture - official project

А больше в Сети материалов по 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

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

1

breakpoints

1

slice number

1

slice

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

$ sudo npm install rupture --global

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

$ stylus -u rupture -c example.styl

Здесь

1

-c

1

--compress

Миксины 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

1

em

1

em

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

1

px

1

em

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