Шкалы и базовая единица

Все размеры Framework берутся из шкал, а не задаются произвольными числами. Здесь — базовая единица, шкала примитивов и соразмерные ступени.

Величины берутся из шкал

Шкалы — это общие ряды допустимых величин. Они дают интерфейсу ритм и позволяют менять размеры централизованно, одной переменной.

Зачем шкалы

Интерфейс читается спокойно, если в нём мало разных величин и между ними есть порядок. Шкалы дают три вещи:

• Ритм. Отступы, высоты и кегли стоят на одной сетке и не спорят друг с другом.
• Централизованное изменение. Проект меняет одну переменную, а не сотни чисел в CSS.
• Адаптивность без лишних правил. Значение роли само меняется между мобильным и настольным режимом; компоненту не нужно своё правило для ширины экрана (см. Адаптивные размеры).

Три уровня величин

Роль ссылается на ступень шкалы, ступень — на примитив. Если проект перенастраивает шкалу, роли меняются вместе с ней.

Порядок выбора

В CSS проекта величину выбирают в таком порядке:

1. готовая утилита или токен-роль нужного назначения;
2. ступень адаптивной шкалы;
3. примитив --sf-a0…--sf-i9, если нужен точный размер;
4. собственный токен проекта, который ссылается на системный.

Правила:

• Нельзя писать голые числа в прикладном CSS.
• Пиксели в справочных таблицах — только эквивалент для понимания, а не рекомендация.
• Исключение — геометрия, которую измеряет браузер: координаты всплывающего окна, положение при перетаскивании, ширина полосы прокрутки. Это не выбор дизайна, а замер, и он остаётся в пикселях.

Виды значений

У каждой величины есть вид значения. Как значения записываются в классе, описано в Значения.

Смотрите также

• Базовая единица и шкала примитивов — шкала примитивов.
• Адаптивные размеры — адаптивные размеры.
• Значения — запись значений в классах.

Базовая единица и шкала примитивов

Шкала примитивов — неизменный ряд размеров в rem, на котором стоят все остальные шкалы. Она даёт точные системные размеры и позволяет переводить пиксели макета в ступени и обратно.

Почему rem

Все размеры Framework заданы в rem, то есть в долях корневого кегля браузера. Framework не меняет корневой кегль ни на мобильном экране, ни на настольном. Если человек увеличил шрифт в настройках браузера, интерфейс вырастает целиком и пропорционально: текст, кнопки, отступы и углы вместе.

Отсюда следствие: пиксельный эквивалент — не контракт. Все таблицы в этой части посчитаны при 1rem = 16px. При другом корневом кегле пиксели будут другими, а шкала останется прежней.

Основной кегль страницы назначается на body (или на внешний контейнер приложения), а не на html.

Буква и цифра

Примитивы названы буквой и цифрой: a4, b6, d2. Буква выбирает группу (диапазон и шаг), цифра — номер шага внутри группы. Групп девять, в каждой десять ступеней.

Начиная с B, каждая следующая буква удваивает и начало, и шаг. Группа A — отдельный случай: это просто пиксели от 0 до 9.

Относительная точность шкалы постоянна: внизу различаются отдельные пиксели, вверху — десятки пикселей. На крупном размере разница в один-два пикселя не видна, и такие ступени не нужны.

Все девяносто примитивов (пиксели — при 1rem = 16px):

Пример показывает примитивы в собственном CSS проекта:

.project-card {
    inline-size: var(--sf-f0); /* 160 px */
    padding: var(--sf-c2);     /* 24 px */
    gap: var(--sf-b2);         /* 12 px */
}

Примитив не заменяет роль. Если значение выражает устойчивую роль интерфейса, заведите переменную проекта с понятным именем и сошлитесь в ней на примитив.

Перевод в пиксели и обратно

Из ступени в пиксели:

пиксели = начало группы + шаг × цифра

c8 = 20 + 2 × 8 = 36 px
d6 = 40 + 4 × 6 = 64 px
f2 = 160 + 16 × 2 = 192 px

Из пикселей в ступень:

1. Найдите группу: наибольшее начало, которое не больше числа.
2. Вычтите начало.
3. Разделите остаток на шаг группы — получится цифра.

48 px → группа D (40): 48 − 40 = 8, 8 ÷ 4 = 2 → d2
16 px → группа B (10): 16 − 10 = 6, 6 ÷ 1 = 6 → b6

Если деление не даёт целого, точной ступени нет. Тогда берите ближайшую. Шкала — это общий ряд, а не способ записать любое число: исключение стоит дороже, чем разница в два пикселя.

Как считать в уме. Достаточно помнить ряд удвоений: начала групп 10, 20, 40, 80, 160, 320, 640, 1280, шаги 1, 2, 4, 8, 16, 32, 64, 128. Буква задаёт обе величины сразу.

Особые значения

• --sf-0 — ноль.
• --sf-auto — auto.
• --sf-px — ровно один CSS-пиксель. Это не начало второй шкалы, а именованная толщина для волосяных линий: границ, разделителей, обводок, кольца фокуса. --sf-a1 здесь не подходит: он задан в rem и растёт вместе с кеглем, а рамка должна оставаться тонкой.

Кратность четырём

Итоговая высота видимого элемента (кнопки, поля, строки списка, строки текста) кратна 0.25rem, то есть 4 px при 1rem = 16px. Внутренние части могут быть некратными, итоговый размер — нет. Все высоты строк и все высоты контролов во Framework подчиняются этому правилу (см. Одна лестница размеров и Типографика).

Смотрите также

• Соразмерные ступени — соразмерные ступени адаптивных шкал.
• Толщина — толщина границы --sf-px.
• Все переменные — роли и адаптивные ступени, которые стоят на примитивах.

Соразмерные ступени

Соразмерные ступени — единая запись ступеней для всех адаптивных шкал. Она позволяет понять величину по имени без таблицы.

Почти все адаптивные шкалы Framework названы одинаково: 1 — обычная ступень, дроби меньше её, целые числа больше.

… 1/4  1/3  1/2  [1]  2  3  4 …
          меньше    обычная    больше

1/2 читается как «меньше обычного», 3 — как «заметно больше». Сокращения вроде sm и lg для размеров не используются, чтобы их не путали с префиксами ширины экрана (см. Ширина экрана: контрольные точки).

Одна и та же ступень у разных семейств означает одинаковую роль, но не одинаковые пиксели. --sf-space-1 (12/16 px), --sf-text--size-1 (14/16 px) и --sf-radius-1 (8 px) — это «обычная» ступень своего семейства. Где шкалы должны совпадать по смыслу, они явно связаны: высота контрола размера 1 строится из высоты строки текста 1 (Одна лестница размеров), угол блока ступени 3 — из отступа ступени 3 (Скругления).

Смотрите также

• Адаптивные размеры — мобильные и настольные значения ступеней.
• Одна лестница размеров — лестница размеров компонентов.
• Ширина экрана: контрольные точки — префиксы ширины экрана.