Значения

Модификаторы могут иметь следующие типы значений:

  • Абсолютные размеры
  • Относительные размеры
  • Соразмерные значения
  • Бинарные значения
  • Градусы
  • Цвета
  • Направление
  • Выравнивание
  • Именные значения

Абсолютные размеры

В качестве основной единицы измерения используется rem. Это позволяет создавать интерфейс, который адаптируется к используемым шрифтам.

Для обозначения размеров используется система размеров. С помощью нее задаются все размеры, имеющие абсолютное значение.

Такая система позволяет закрыть весь диапазон необходимых размеров (и в малых и больших размерах) и сделать размеры согласованными между собой, что помогает стоить гармоничный интерфейс. Также четкие правила увеличения размеров позволяют ориентироваться в их значениях по буквенно-цифровому коду.

Нулевое значение и пиксель для простоты восприятия дополнительно обозначаются нулем и символом px. Например, w-0, w-px. В этом случае px равен именно 1 пикселю, а не эквивалентному значению в rem.

Для отрицательных значений перед модификатором добавляется знак минус (-). Например: -m-2, -left-a4.

Примечание. Модификаторы с абсолютными значениями попадают в расширенные версии плагинов.

Относительные размеры

Относительные размеры используются, когда нужно задать размер относительно размера родительского элемента. Относительные размеры указываются в дробях: 1/2, 1/3 … 11/12.

Для обозначения 100% используется обозначение full.

Пример: w-1/12, w-3/4, w-full.

Для обозначения размера относительно размера экрана, перед дробью добавляется screen. Например: h-screen-1/2 … h-screen-3/4.

Для обозначений размера сеток также может использоваться обозначение fr – это доля оставшегося в сетке пространства. Например: auto-cols-fr, auto-rows-fr.

Соразмерные значения

Соразмерными значениями являются те значения, которые изменяются относительно друг друга. В этом случае не нужно знать точное значение, а достаточно понимания того, что при увеличении значения величина возрастает, а при уменьшении – уменьшается.

Ярким примером являются система размеров текста и система отступов. Эти системы являются устройство-зависимыми. Для десктопных и мобильных устройств они имеют разное значение. Поэтому пользователю достаточно знать, что увеличении значения, увеличивается и величина размера.

Для соразмерных значений действует правила:

  • Если значение равно нулю – значение обозначается нулем. Например: m-0, p-0.
  • При увеличениии значения свойства соразмерно увеличивается и значение стиля в классе и наоборот.

Бинарные значения

Бинарные значения используются для свойств, которые могут иметь состояние либо включено, либо выключено. Например, font-style: italic - font-style: normal.

В случае если свойство имеет включенное состояние то указывается значение свойства, а в случае если свойство имеет отключенное состояние, то к значению добавляется обозначение none. Например: visible, visible-none, italic, italic-none.

Проценты

Проценты обозначаются числом равным значению процента.

Пример: w-1, w-23, w-99, w-full.

Примечание. Модификаторы с процентами попадают в расширенные версии плагинов.

Градусы

Градусы, обозначаются числом равным значению градуса.

Пример: rotate-0, rotate-1, rotate-12, rotate-45, rotate-180.

Цвета

Цвета представлены двумя типами: базовой палитрой цветов и именными цветами.

Базовая палитра цветов

Базовая палитра цветов представляют собой набор из 3-х цветов без тонов (прозрачный, черный, белый) и 8 цветов с тонами (серый, красный, оранжевый, желтый, зеленый, синий, пурпурный, розовый). Цвет обозначается буквой, тон цвета – цифрой от 0 до 9.

Для обозначения цветов используются следующие значения:

  • transparent – прозрачный.
  • white – белый.
  • black – черный.
  • gray – серый.
  • red – красный.
  • orange – оранжевый.
  • yellow – желтый.
  • green – зеленый.
  • blue – синий.
  • purple – пурпурный.
  • pink – розовый.

Пример: bg-transparent, color-on-surface-inverse, border-warning

Именные цвета

Именные цвета используются для упрощения работы с цветами. Данные цвета имеют собственное имя, но их значение берется из базовой палитры цветов. Одно и тоже имя для разных свойств может иметь разное значение цвета. Именные цвета используют следующие обозначения:

  • major – основной цвет свойства. Обычно, используется как цвет по умолчанию. Например: color-major, border-major.
  • minor – второстепенный цвет. Светлее основного. Используется для обозначения второстепенных элементов. Например: color-minor, border-minor.
  • extra – дополнительный цвет. Светлее второстепенного. Используется для обозначения дополнительных элементов. Например: color-disable, border-extra.
  • inverse – инверсированный цвет. Обратный основному цвету (major). Например, color-on-surface-inverse.
  • primary – основной акцентный цвет темы. Например, color-primary.
  • secondary – вторичный акцентный цвет темы. Например, color-secondary.
  • secondary – третичный акцентный цвет темы. Например, color-secondary.
  • info – цвет информирования. Например, color-primary.
  • success – цвет успешного результата. Например, color-success.
  • warning – цвет предупреждения. Например, color-warning.
  • danger – цвет опасности. Например, color-error.

Цвета брендов

Для популярных социальных сетей предусмотрены отдельные именные цвета:

Наследуемые цвета

При необходимости могут использоваться следующие наследуемые цвета:

  • inherit – используется цвет родительского элемента. Напримерc link-inherit.
  • current – используется цвет текста. Например border-current.

Направление

Для обозначения направления используются сокращения:

  • x – по горизонтальной оси (x axis).
  • y – по вертикальной оси (y axis).

Значение направления используется:

  • Повтор фона: bg-repeat-x, bg-repeat-y.
  • Изменение размера: resize-y, resize-x.
  • Тип привязки прокрутки: snap-x, snap-y.
  • Сенсорное действие: touch-pan-x, touch-pan-y.

Выравнивание

Есть следующие виды выравнивания:

  • left – Влево (left).
  • right – Вправо (right).
  • center – Посередине (center).
  • justify – По ширине (justify).
  • top – Вверх (top).
  • bottom – Вниз (bottom).
  • middle – По вертикальному центру (при наличии только оси Y) (middle).
  • start – К началу (start).
  • end – К концу (end).

Выравнивание по углам

При выравнивании сначала указывается сторона по горизонтали а затем – по вертикали:

  • left-top – левый верхний угол.
  • left-bottom – левый нижний угол.
  • right-bottom – правый нижний угол.
  • right-top – правый верхний угол.

Изменить статью