Любой UI-фреймворк в итоге даёт одни и те же обещания: согласованность, скорость разработки и цельный внешний вид. Разница в том, как каждый решает напряжение между гибкостью (утилиты) и семантикой (готовые компоненты). Cerne пытается совместить оба подхода.
Токены как единственный источник истины
Цвет, отступы, типографика, скругления и тени существуют как переменные CSS
(--cerne-color-primary, --cerne-space-4...), сгенерированные
из карт Sass. Это значит, что и компоненты, и утилиты — и даже эта документация —
читают одни и те же значения. Переключение со светлой темы на тёмную — это просто
смена набора переменных в :root.
Если документация и CSS могут разойтись, рано или поздно они разойдутся. Поэтому страница токенов читает вычисленные значения вживую, а не скопированные вручную числа.
Слои в порядке специфичности
Мы следуем варианту ITCSS: сначала настройки и инструменты Sass (без генерации CSS), затем:
!important.
- Сброс стилей и базовые элементы
- Объекты компоновки (grid, app-shell, stack/cluster)
- Семантические компоненты (кнопки, карточки, модальные окна...)
- Утилиты — в самом конце, чтобы всегда могли всё переопределить
| Слой | Специфичность | Пример |
|---|---|---|
| Элементы | Низкая | a, table |
| Компоненты | Средняя | .btn-primary |
| Утилиты | Высокая (намеренно) | .mt-4 |
Недостающий компонент: бронирование
Ни один популярный фреймворк не поставляется с готовым расписанием. Для систем бронирования аудиторий это ключевой компонент — поэтому мы создали его на чистом CSS Grid и JavaScript без зависимостей, измеряя реальную высоту ячейки в DOM для позиционирования событий.
Итог
Никаких зависимостей во время выполнения: ни jQuery, ни Popper, ни Chart.js — только чистые CSS и JavaScript, каждый собран в один файл.
Нативные app-shell, бронирование и таблица данных закрывают примитивы, которых не хватает и Bootstrap, и чистому Tailwind для настоящей административной панели.
Тёмная тема, RTL и доступность уровня AA — не отдельный пакет, а поведение по умолчанию для каждого компонента с самого первого коммита.
Документация читает токены прямо из скомпилированного CSS, поэтому устаревшей таблицы цветов не бывает в принципе.
В результате получился фреймворк, одинаково хорошо подходящий для административной панели, учебной среды или — как этот пост — блога.