450076, г. Уфа, ул. Чернышевского 82
+7 (347) 246-8500 demo@simai.ru

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

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

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

Версия: 4.0.4

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, рекомендуется также задать и значение базового модификатора без контрольной точки. Это позволит облегчить восприятие изменения свойств элемента при различных разрешениях экрана.