Использование CSS-классов
uStatic CSS предоставляет более 350 утилитарных классов для быстрой разработки интерфейсов.
Основные модули
Типографика
Размеры, вес и цвет текста:
html
<p class="text-sm font-medium">Текст</p>
<p class="text-lg font-bold">Заголовок</p>
<span class="text-blue-500">Акцентный текст</span>Отступы
Margin и padding:
html
<div class="p-4 m-2">Отступы</div>
<div class="px-4 py-2">Горизонтальные и вертикальные</div>
<div class="-mt-4">Отрицательный margin</div>Flexbox
Flexbox-контейнеры:
html
<div class="flex justify-between items-center gap-4">Контейнер</div>Grid
Grid-сетки:
html
<div class="grid grid-columns--1fr-1fr gap-4">Сетка</div>Позиционирование
Позиционирование элементов:
html
<div class="relative">
<div class="absolute top-0 right-0">Абсолютный элемент</div>
</div>Границы
Границы и скругления:
html
<div class="border border-gray-200 rounded-base">Карточка</div>Фон
Цвет и прозрачность фона:
html
<div class="bg-blue-500 bg-opacity-50">Фон</div>Эффекты
Прозрачность и поворот:
html
<div class="opacity-50 rotate-45">Эффект</div>Курсор
Вид курсора:
html
<button class="cursor-pointer">Кнопка</button>Отображение
Тип отображения:
html
<div class="hidden">Скрыто</div>
<div class="inline-block">Строчно-блочный</div>Выравнивание
Вертикальное выравнивание:
html
<span class="align-middle">По центру</span>Примеры
Карточка
Заголовок
Сетка
Элемент 1
Элемент 2
Навигация по модулям
Выберите модуль в левом меню для подробной документации.