Добро пожаловать в uStatic CSS

Набор утилитарных CSS-классов для создания современных интерфейсов на основе токенов дизайн-системы.

Начать использовать Посмотреть на GitHub

import { Card, CardGrid } from ‘@astrojs/starlight/components’;

Почему uStatic CSS?

uStatic CSS решает проблемы типичных утилитарных фреймворков в микрофронтендах:

Консистентность между микрофронтендами благодаря общей дизайн-системе. Загружайте только нужные стили — никакого лишнего CSS в бандле. Активируйте классы динамически при необходимости. Безопасно работает на сервере и в браузере.

Быстрый пример

<!-- Карточка с flexbox -->
<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"
  >
    Кнопка
  </button>
</div>

Доступно 350+ классов

Типографика: размеры, вес, цвета текста
Отступы: margin и padding со всех сторон
Flexbox: выравнивание, направление, gap
Grid: сетки с автоматическим колонками
Позиционирование: relative, absolute, fixed, z-index
Фон и границы: цвета, прозрачность, скругления
Анимации: вращение, мигание, подчёркивание
**И многое другое…