Введение

uStatic CSS (от utility static CSS) — это набор утилитарных CSS-классов для быстрой разработки современных интерфейсов. Основан на токенах дизайн-системы.

Почему uStatic CSS?

В микрофронтендах типичные утилитарные фреймворки (Tailwind, UnoCSS) создают сложности:

• Сложные конфигурации, требующие синхронизации между командами
• Дублирование стилей между модулями, увеличивающее размер бандла

uStatic CSS решает эти проблемы:

• Единая система токенов для консистентности между микрофронтендами
• Модульная загрузка только нужных стилей
• Возможность активации модулей в рантайме

Возможности

• 🎨 350+ утилитарных классов для типографики, отступов, позиционирования, цветов
• 🧩 Хуки useCssProperties и useTokens для управления стилями в JavaScript
• 🌐 Адаптивный дизайн с брейкпоинтами xs, md, def, lg
• 🔌 Экспорт модулей как ESM и CJS
• ⚡ SSR-совместимость — безопасная работа на сервере и в браузере

Доступные модули

Модуль	Описание
typography	Типографика: размеры, вес, цвета текста
spacing	Отступы: margin и padding
flexbox	Flex-контейнеры и выравнивание
grid	Grid-сетки
position	Позиционирование: relative, absolute, fixed
bg	Фон: цвета, прозрачность
border	Границы и скругления
effects	Эффекты: прозрачность, поворот
animations	Анимации: вращение, мигание
sizing	Размеры: ширина, высота
cursor	Курсоры
display	Отображение и переполнение
filters	Фильтры: grayscale
outline	Обводки
scroll	Скроллбары
hide	Скрытие элементов
align	Вертикальное выравнивание
interactivity	Интерактивность
base	Базовые стили

Следующие шаги

• Установка — как установить пакет
• Быстрый старт — первый пример использования