Утилиты

Утилиты — короткие CSS-классы для одной конкретной задачи. Например, flex включает гибкий макет, gap-3 добавляет промежутки, а text-center выравнивает текст. Их можно соединять прямо в class без отдельного CSS-файла.

На странице каждой утилиты сначала показан результат, затем доступные классы и готовый HTML. Общие правила имён, значений и условий объясняются в руководстве по утилитам.

Расположение и размеры

• Макет — отображение, позиционирование, видимость и переполнение.
• Размеры — ширина, высота и их ограничения.
• Отступы — внешние, внутренние отступы и расстояние между соседями.
• Сетка — колонки, строки и размещение в CSS Grid.
• Флексбоксы — направление, перенос и размеры flex-элементов.
• Выравнивание — align, justify, place, порядок и промежутки.
• Колонки и разрывы — многоколоночный текст и управление переносами.
• Изображения и видео — вписывание и позиция содержимого.

Текст

• Типографика — размеры, начертание, интервалы и перенос текста.
• Оформление текста — цвет, подчёркивание, обрезка и выделение.
• Ссылки — цвет и оформление состояний ссылки.

Поверхности

• Фон — цвета, изображения, узоры и градиенты.
• Граница — толщина, стиль, цвет и скругление.
• Разделители — линии между частями интерфейса.
• Контур и фокус — внешняя граница и фокусное кольцо.
• Тени — тени элементов и изображений.
• Полосы — декоративная штриховка.

Графика и эффекты

• SVG — размер, заливка и обводка векторной графики.
• Маски — форма и положение маски.
• Эффекты и фильтры — прозрачность, размытие, цвет и смешивание слоёв.
• Фильтры подложки — эффекты для области за элементом.
• Преобразования — перемещение, масштаб, поворот и наклон.
• Анимация — переходы и готовые движения.

Данные и управление

• Таблицы — макет, границы, интервалы и состояния строк.
• Формы — курсор ввода, вид полей и вспомогательные состояния.
• Интерактивность — указатель, выделение, касания и доступность.
• Прокрутка — поведение, привязка, отступы и полоса прокрутки.
• Печать — видимость элементов в печатной версии.

Как выбрать класс

1. Откройте группу по задаче, которую решаете.
2. Посмотрите результат в блоке «Пример».
3. Скопируйте класс или HTML из этой же страницы.
4. При необходимости добавьте hover:, focus: или адаптивный префикс, например md:. Страница показывает только те варианты, которые реально поставляются Framework.