Модификаторы

SIMAI Framework создан как инструмент позволяющий облегчить работу веб-мастеров с интерфейсом сайта. Он содержит большое количество модификаторов, позволяющих изменять различные свойства элементов. Для того чтобы ориентироваться в таком большом количестве вариантов, используется правило единообразия, при котором зная как работает один модификатор, вы с легкостью сможете разобраться как работают и другие.

Сокращения

В SIMAI Framework используются следующие сокращения модификаторов:

  • .a - модификаторы абсолютного положения (absolute);
  • .b - модификаторы границ (border);
  • .bg - модификаторы фона (background);
  • .с - модификаторы цвета текста (color);
  • .d - модификаторы отображения (display);
  • .f - модификаторы заливки SVG объектов (fill);
  • .h - модификаторы высоты объекта (height);
  • .l - модификаторы ссылок (link);
  • .m - модификаторы внешнего отступа (margin);
  • .o - модификаторы прозрачности (opacity);
  • .p - модификаторы внутреннего отступа (padding);
  • .s - модификаторы цвета линий SVG объектов (stroke);
  • .t - текстовые модификаторы (typography);
  • .w - модификаторы ширины (width).

Если модификатор действует только для какой либо сторон элемента (отступы, границы) то к базовому сокращению добавляется обозначение стороны:

  • l - левая сторона (left);
  • r - правая сторона (right);
  • t - верхняя сторона (top);
  • b - нижняя сторона (bottom);
  • x - по горизонтали (ось X).
  • y - по вертикали (ось Y);

Например: pl-1, pr-1, px-1.

Если модификатор имеет несколько единиц измерения (высота), то к базовму сокращению добавляется обозначение единицы измерения:

  • v - видимая область экрана (visible);

Например: hv-1.

Значения

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

Уровни размера текста:

  • -3 – 0.625rem
  • -2 – 0.75rem
  • -1 – 0.875rem
  • 0 – 1rem (размер шрифта html)
  • 1 – 1.25rem
  • 2 – 1.5rem
  • 3 – 2rem
  • 4 – 2.5rem
  • 5 – 3rem
  • 6 – 4rem
  • 7 – 6rem

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

Соотношение размеров в модификаторах:

Размер 0 0.25rem 0.5rem 1rem 2rem 4rem 8rem 16rem 32rem 48rem 64rem
Margin .m-0 .m-1 .m-2 .m-3 .m-4 .m-5 .m-6 .m-7 ✕ ✕ ✕
Padding .p-0 .p-1 .p-2 .p-3 .p-4 .p-5 .p-6 .p-7 ✕ ✕ ✕
Width REM ✕ ✕ ✕ .wr-1 .wr-2 .wr-3 .wr-4 .wr-5 .wr-6 .wr-7 .wr-8
Height REM ✕ ✕ ✕ .hr-1 .hr-2 .hr-3 .hr-4 .hr-5 .hr-6 ✕ ✕

Уровни размеров и расстояний используются для модификаторов внутреннего и внешнего отступа, ширины и высоты заданной в rem.

Текстовые значения подобраны таким образом чтобы максимально соотвествовать названию свойства элемента в CSS. Так например модификатор делающий текст жирным будет .t-bold.

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

Контрольные точки

SIMAI Framework разработан по технологии «Mobile First» (сначала мобильные) и включает в себя возможности указания классов для различных размеров экрана. Контрольные точки действуют на следующих размерах экрана:

  • Без параметра - действует по умолчанию на всех размерах экрана.
  • -sm - действует на экранах шириной 576 пикселей и выше.
  • -md - действует на экранах шириной 768 пикселей и выше.
  • -lg - действует на экранах шириной 992 пикселей и выше.
  • -xl - действует на экранах шириной 1200 пикселей и выше.

Адаптивные модификаторы

В SIMAI Framework включено множество адаптивных модификаторов, позволяющих изменять различные параметров элементов.

При использовании адаптивных модификаторов, рекомендуется придерживаться правила «сначала мобильные». Когда указываете модификаторы задавайте их по мере роста экрана: без контрольной точки, -sm, -md, -lg, -xl. Также следует иметь ввиду что максимально большой параметр будет распространятся на экраны большего порядка, если не задано иное:

  • Без параметра - действует на всех размерах экрана.
  • -sm - действует на устройствах -sm, -md, -lg, -xl.
  • -md - действует на устройствах -md, -lg, -xl.
  • -lg - действует на устройствах -lg, -xl.
  • -xl - действует на устройствах -xl.

Например: p-1, p-sm-1, p-md-1, p-xl-1.

Как видим адаптивные, модификаторы действуют на указанную ширину экрана и выше. Поэтому, если вы используете модификаторы -sm, -md, -lg, -xl, рекомендуется также задать и значение базового модификатора без контрольной точки. Это позволит облегчить восприятие изменения свойств элемента при различных разрешениях экрана.