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

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-й уровень уменьшения относительно базового размера шрифта.

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

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