Утилиты
Справочник модификаторов SF UI. Утилиты разбиты по категориям CSS-свойств: от сеток и типографики до масок и фильтров. Каждая страница описывает конкретный модификатор, его значения и примеры.
Направление (LTR/RTL)
- Фреймворк сохраняет явно заданный
dirна<html>и добавляет вычисленное направление, только если атрибут отсутствует. - Утилиты используют логические свойства (
inline-start/end,block-start/end), поэтому классы работают одинаково в LTR и RTL без отдельного набора модификаторов. - Если пишете собственные шаблоны, не снимайте
dirи не задавайте вручнуюleft/right, чтобы сохранить совместимость с RTL. - Подробнее: поддержка LTR и RTL.
Категории
- Макет — базовое позиционирование и отображение элементов.
- Разрыв макета — управление колонками и переносами.
- Объекты — выравнивание и подгонка медиа.
- Размеры — ширина, высота и их ограничения.
- Отступы — margin, padding и пространственные модификаторы.
- Сетка — grid-шаблоны и размещение ячеек.
- Флексбоксы — направление, рост/сжатие и wrap.
- Утилиты для сетки и флексбоксов — выравнивание и порядок элементов.
- Типографика — роли текста, размеры, насыщенность.
- Оформление текста — цвета, толщина, подчёркивания.
- Ссылки — состояния и форматирование ссылок.
- Таблицы — оформление таблиц и ячеек.
- SVG — заливки, обводки и размеры SVG.
- Граница — ширина, стиль и радиусы.
- Разделитель — стили горизонтальных/вертикальных линий.
- Внешняя граница — outline для фокуса и акцента.
- Фоновый цвет — базовые цветовые модификаторы.
- Фоновое изображение — позиция, повторение, размер.
- Градиент — типы и параметры фоновых градиентов.
- Маска — clip, repeat и позиционирование масок.
- Тени — тени элементов и капельные тени.
- Фильтры элемента — blur, hue-rotate и другие CSS-фильтры.
- Фильтры подложки — блюры и корректировки фона.
- Анимация — transition и типы анимаций.
- Прокрутка — scroll snap, цвета и радиусы скролла.
- Преобразования — rotate, scale, skew и translate.
- Формы — состояние полей и вспомогательные свойства.
- Интерактивность — курсоры, user-select, touch-action.
- Печать — управление отображением в режиме печати.
- Полосы — штриховка и фоновые полосы.