Использование CSS-классов

uStatic CSS предоставляет более 350 утилитарных классов для быстрой разработки интерфейсов.

Основные модули

Типографика

Размеры, вес и цвет текста:

<p class="text-sm font-medium">Текст</p>
<p class="text-lg font-bold">Заголовок</p>
<span class="text-blue-500">Акцентный текст</span>

Отступы

Margin и padding:

<div class="p-4 m-2">Отступы</div>
<div class="px-4 py-2">Горизонтальные и вертикальные</div>
<div class="-mt-4">Отрицательный margin</div>

Flexbox

Flexbox-контейнеры:

<div class="flex justify-between items-center gap-4">Контейнер</div>

Grid

Grid-сетки:

<div class="grid grid-columns--1fr-1fr gap-4">Сетка</div>

Позиционирование

Позиционирование элементов:

<div class="relative">
  <div class="absolute top-0 right-0">Абсолютный элемент</div>
</div>

Границы

Границы и скругления:

<div class="border border-gray-200 rounded">Карточка</div>

Фон

Цвет и прозрачность фона:

<div class="bg-blue-500 bg-opacity-50">Фон</div>

Эффекты

Прозрачность и поворот:

<div class="opacity-50 rotate-45">Эффект</div>

Курсор

Вид курсора:

<button class="cursor-pointer">Кнопка</button>

Отображение

Тип отображения:

<div class="hidden">Скрыто</div>
<div class="inline-block">Строчно-блочный</div>

Выравнивание

Вертикальное выравнивание:

<span class="align-middle">По центру</span>

Примеры

Заголовок

<div
  class="flex justify-between items-center p-4 bg-white border border-gray-200 rounded"
>
  <span class="text-lg font-semibold text-gray-800">Заголовок</span>
  <button
    class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 cursor-pointer active:pulse"
  >
    <p>Кнопка</p>
  </button>
</div>

Сетка

Просмотр
Код

Элемент 1

Элемент 2

<div class="grid grid-columns--1fr-1fr gap-4">
  <div class="p-4 bg-gray-100 rounded">Элемент 1</div>
  <div class="p-4 bg-gray-100 rounded">Элемент 2</div>
</div>

Навигация по модулям

Выберите модуль в левом меню для подробной документации.