Размер отступов
Для работы с отступами в SIMAI Framework адаптивная система отступов.
Описание
Заданный набор отступов основан на минимальном шаге в 4px. Расстояния подобраны таким образом, чтобы с помощью них выстраивать визуальную иерархию, группируя элементы одного уровня и отделяя их от других.
Каждому значению отступа для десктопа подобрано соответствующее для мобильных устройств.
Благодаря этому при адаптации макета в большинстве случаев достаточно заменить отступы на соответствующие.
Система размеров отсутпов состоят из 10 значений, от 0 до 9. Минимальное значение составляет 8px.
Размеры представляют собой переменные которые меняют свои значения в зависимости от типа устройств. Для мобильных устройств размер осттупа уменьшается пропорционально увеличению размера.
| Мобильные устройства | Десктоп | |||
|---|---|---|---|---|
| CSS переменная | Размер | Значение | Размер | Значение |
--sf-space--size-0 |
- | 0 | - | 0 |
--sf-space--size-1 |
a-8 | 0.5rem | a-8 | 0.5rem |
--sf-space--size-2 |
a-8 | 0.5rem | b-2 | 0.75rem |
--sf-space--size-3 |
b-2 | 0.75rem | b-4 | 1rem |
--sf-space--size-4 |
b-4 | 1rem | b-6 | 1.25rem |
--sf-space--size-5 |
b-4 | 1rem | b-8 | 1.5rem |
--sf-space--size-6 |
b-8 | 1.5rem | c-2 | 2rem |
--sf-space--size-7 |
c-2 | 2rem | c-4 | 2.5rem |
--sf-space--size-8 |
c-2 | 2rem | c-6 | 3rem |
--sf-space--size-9 |
c-4 | 2.5rem | d-1 | 4rem |