Введение

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

Важно

Библиотека находится в разработке, возможны критические изменения. Не рекомендуется для критически важных проектов.

Зачем uStatic CSS?

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

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

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

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

Возможности

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

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

Посмотрите на возможности uStatic CSS на примере кнопок:

Просмотр

Primary

Secondary

Success

Info

Warning

Danger

Код

<div class="flex gap-2 flex-wrap">
  <button
    class="px-4 py-2 bg-primary-500 text-white rounded hover:bg-primary-600 cursor-pointer active:pulse"
  >
    <p>Primary</p>
  </button>
  <button
    class="px-4 py-2 bg-secondary-500 text-white rounded hover:bg-secondary-600 cursor-pointer active:pulse"
  >
    <p>Secondary</p>
  </button>
  <button
    class="px-4 py-2 bg-success-500 text-white rounded hover:bg-success-600 cursor-pointer active:pulse"
  >
    <p>Success</p>
  </button>
  <button
    class="px-4 py-2 bg-info-500 text-white rounded hover:bg-info-600 cursor-pointer active:pulse"
  >
    <p>Info</p>
  </button>
  <button
    class="px-4 py-2 bg-warning-500 text-white rounded hover:bg-warning-600 cursor-pointer active:pulse"
  >
    <p>Warning</p>
  </button>
  <button
    class="px-4 py-2 bg-danger-500 text-white rounded hover:bg-danger-600 cursor-pointer active:pulse"
  >
    <p>Danger</p>
  </button>
</div>

Этот пример демонстрирует:

• Цветовые варианты — bg-primary-500, bg-success-500 и т.д.
• Эффекты при наведении — hover:bg-primary-600
• Скругление — rounded
• Курсор — cursor-pointer
• Анимация клика — active:pulse

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

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

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

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