Cerne v0.1

Полная дизайн-система, созданная с нуля, без внешних зависимостей

Cerne — это автономный CSS + JS фреймворк — без CDN, без jQuery, без обязательной сборки в продакшене. Он спроектирован так, чтобы обслуживать множество доменов одной и той же системой токенов и компонентов: административные панели, учебные среды, системы управления, бронирование аудиторий и блоги.

ITCSS + CUBE CSS Utility-first + компоненты Нативная тёмная тема Доступность по умолчанию Без зависимостей

Зачем нужен Cerne

Мощный инструмент для современной веб-разработки

Cerne находится в версии 0.1 — целая дизайн-система, построенная с нуля, с простой целью: дать каждому быструю, надёжную и бесплатную основу, чтобы перенести системы с бумаги в интернет, без зависимости от CDN, без лицензии, без vendor lock-in и без платного доступа. Открытый исходный код, доступный всем, навсегда.

Что уже готово в v0.1

40+ готовых к продакшену компонентов — app shell, таблица данных, календарь, графики, чат, видеоплеер, модальные окна, продвинутые формы и многое другое.
43 готовых к копированию полных примера: дашборды, электронная коммерция, стриминг, веб-почта, социальная сеть, новостной портал, LLM-чат, смарт-ТВ...
Никаких внешних зависимостей — без jQuery, без CDN, без обязательной сборки в продакшене. Открывается двойным кликом по HTML.
Нативная тёмная тема, prefers-reduced-motion/prefers-color-scheme учитываются автоматически.

Настоящий RTL через логические свойства — это не хак с зеркалированием.
Доступность WCAG 2.1 AA по умолчанию в каждом интерактивном компоненте.
Настоящая интернационализация — 168 примерных страниц переведены на CJK, арабский, хинди и русский, не только интерфейс.
Настоящий современный CSS — container queries, cascade layers, color-mix(), clamp(), настраиваемая плотность через data-density.

Версия v0.1 — это выбор, а не ограничение: ядро уже надёжно и реально используется в 43 примерах выше, но проект продолжает публично развиваться — каждая новая версия добавляет больше примитивов, больше языков, больше компонентов, не ломая то, что уже есть.

RV

Ricardo Cezar Volert Куритиба, Парана, Бразилия

Создатель и мейнтейнер Cerne. Весь фреймворк — токены, компоненты, 43 примера и региональные варианты — спроектирован Ricardo и создан в сотрудничестве с ИИ (Claude от Anthropic) с целью оставить хороший, открытый и бесплатный инструмент для тех, кто строит следующее поколение веб-систем.

Сайт Instagram GitHub Codeberg Lattes ORCID LinkedIn

Установка

Скопируйте скомпилированные файлы из dist/ в свой проект и подключите их напрямую. Для использования фреймворка сборка не требуется.

<link rel="stylesheet" href="dist/css/cerne.css">

<!-- В конце body: классический скрипт (не type="module") для предоставления window.Cerne -->
<script src="dist/js/cerne.js"></script>

Чтобы избежать «вспышки» неправильной темы до загрузки JS, добавьте этот фрагмент в <head>, перед CSS:

<script>
  var t = localStorage.getItem('cerne-theme');
  if (t) document.documentElement.setAttribute('data-theme', t);
</script>

Цвета

Базовые палитры из 11 оттенков + семантический слой (--cerne-color-primary, -hover, -active, -subtle...), автоматически меняющие значение между светлой и тёмной темами. Значения ниже читаются в реальном времени из скомпилированного CSS — они никогда не расходятся с этой документацией.

Отступы

Шкала с шагом 4px, доступная как --cerne-space-* и как утилиты p-*, m-*, gap-*.

Типографика

Модульная шкала (~1,25), шрифт по умолчанию — системный стек шрифтов (ноль сетевых запросов). Переопределите --cerne-font-sans, чтобы использовать собственный самостоятельно размещённый шрифт.

Радиус и тень

Возвышение с разными рецептами для светлой/тёмной темы — тёмные тени не исчезают на тёмном фоне.

Radius

Тень

Сетка

Классический API .row/.col-* поверх CSS Grid, плюс утилиты .grid-cols-* / .col-span-* с адаптивными префиксами md:, lg:.

<div class="row">
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
  <div class="col-12 col-md-4">...</div>
</div>

App Shell

Центральный примитив для дашбордов: боковая панель + верхняя панель + основной контент через grid-template-areas, со сворачиванием в офканвас ниже lg. Эта страница сама использует .app-shell.

<div class="app-shell" id="app-shell">
  <div class="app-shell__backdrop"></div>
  <aside class="app-shell__sidebar">...</aside>
  <header class="app-shell__topbar">...</header>
  <main class="app-shell__main">...</main>
</div>

Кнопки

Сплошной, контурный и призрачный варианты для каждого семантического цвета, плюс размеры и состояние загрузки.

<button class="btn btn-primary">Основная</button>
<button class="btn btn-outline-primary">Контурная</button>
<button class="btn btn-ghost-primary">Призрачная</button>

Формы

Стилизованные нативные элементы управления, валидация через data-cerne-validate (Constraint Validation API) и сообщения об ошибках, настраиваемые через атрибуты.

<form data-cerne-validate novalidate>
  <div class="form-group">
    <label class="form-label" for="email">Эл. почта</label>
    <input class="form-control" type="email" id="email" required
      data-error-required="Введите вашу эл. почту.">
    <span class="form-error"></span>
  </div>
</form>

Больше форм

Плавающая метка, пароль с индикатором надёжности и переключением видимости, код OTP, поиск с очисткой, слайдер, теги, комбобокс, выбираемые карточки, сегментированный переключатель, загрузка перетаскиванием и счётчик символов — для любого сценария, от входа до оформления заказа.

Полное имя

Пароль

Надёжность: —

Код подтверждения

Поиск

Диапазон цен

Карточки

Бронирования сегодня 24 +12% по сравнению со вчера

Заголовок карточки

Содержимое карточки с примерным текстом.

Медиа

.carousel (один слайд за раз, с точками и опциональным автовоспроизведением) и .shelf (ряд с горизонтальной прокруткой, с поддержкой RTL) — для главного экрана институционального портала и каталогов в стиле стриминга соответственно.

Карусель (data-cerne-carousel-autoplay)

Слайд 1

Слайд 2

Слайд 3

Полка (наведите курсор, чтобы увидеть стрелки)

Иллюстрация гор на закате, в чёрно-белом варианте

<div class="carousel" data-cerne-carousel data-cerne-carousel-autoplay="5000">
  <div class="carousel-track">
    <div class="carousel-slide">...</div>
  </div>
  <button data-cerne-carousel-prev>‹</button>
  <button data-cerne-carousel-next>›</button>
  <div class="carousel-dots"></div>
</div>

<div class="shelf" data-cerne-shelf>
  <button data-cerne-shelf-prev>‹</button>
  <div class="shelf-track">
    <div class="shelf-item"><img src="poster.jpg" alt="..." /></div>
  </div>
  <button data-cerne-shelf-next>›</button>
</div>

Видео

Cerne.VideoPlayer — прогрессивное улучшение поверх существующей видеоразметки (не навязывает собственный HTML): play/pause, перемотка по клику, громкость, управление скоростью. Работает на «симулированных часах», когда нет настоящего <video> (как ниже), или отражает нативный <video> (MP4, HLS через hls.js...), когда вы передаёте [data-video-element] — реальная доставка адаптивного стриминга — ответственность того, кто внедряет, это выходит за рамки CSS/JS-фреймворка.

<div class="player" id="player" data-duration="196">
  <button data-video-toggle>▶</button>
  <div class="player-controls">
    <div class="progress" data-video-seek><div class="progress-bar" data-video-fill></div></div>
    <button data-video-mute-toggle>🔊</button>
    <input type="range" data-video-volume min="0" max="1" step="0.05" value="1">
    <span data-video-time>0:00 / 0:00</span>
    <button data-video-speed="1.5">1.5x</button>
  </div>
</div>

<script>
  new Cerne.VideoPlayer(document.getElementById("player"), { duration: 196 });
</script>

Полные примеры: видео с субтитрами WebVTT, стриминг с «следующим эпизодом», трансляция live: true и смарт-ТВ с навигацией D-pad.

Таблицы и таблица данных

.table для статичных таблиц; [data-cerne-datatable] добавляет клиентскую сортировку, поиск и пагинацию без единой зависимости.

Имя	Курс	Прогресс
Marina Silva	Компьютерные сети	92%
Diego Souza	Базы данных	78%
Ana Beatriz	Алгоритмы	65%
Lucas Pereira	Компьютерные сети	40%
Juliana Melo	Операционные системы	88%
Rafael Costa	Базы данных	55%

Редакционный контент

Колонки, выделенные блоки, текстовый маркер с поясняющей заметкой и полоса прогресса чтения — для блога, новостного портала или любого длинного текста внутри .prose. Кстати, посмотрите на верх экрана: тонкая цветная полоса над меню — это .reading-progress, отслеживающая прокрутку этой самой страницы документации.

Блоки (.callout)

Модальные окна и офканвас

Используется для фильтров, корзин или быстрых деталей без выхода со страницы.

Уведомления и тосты

Успех

Ваше бронирование подтверждено.

Внимание

Этот временной слот почти заполнен.

<button data-cerne-command-palette-open>Поиск...</button>

<div class="command-palette" data-cerne-command-palette hidden>
  <div class="command-palette-dialog" role="dialog" aria-modal="true">
    <div class="command-palette-search">
      <input type="text" placeholder="Введите команду...">
    </div>
    <div class="command-palette-results">
      <div class="command-palette-group">
        <button class="command-palette-item" data-href="pagina.html">...</button>
      </div>
    </div>
  </div>
</div>

Календарь и бронирование

Сетка недельного расписания для бронирования аудиторий — полный пример смотрите в разделе Бронирование.

Подтверждено В ожидании Моё бронирование

Графики

Мини-графики SVG без зависимостей (Cerne.Chart.bar/line/donut).

Другие компоненты

Список-группа, спиннер, рейтинг, hero-блок и карточки тарифов — для магазинов, институциональных порталов, маркетинговых страниц и каталогов.

Обзор Настройки Уведомления

4.2 (128)

Популярный

Pro

2 990 ₽/мес

Неограниченное число пользователей
Приоритетная поддержка

<div class="rating">
  <svg class="is-filled"><use href="sprite.svg#icon-star"></use></svg>
  <!-- ... -->
  <span class="rating-count">4.2 (128)</span>
</div>

Изображения

Обрезка (object-fit/aspect-ratio), CSS-фильтры (grayscale, blur-*, brightness-*...) и готовые рецепты обработки (увеличение при наведении, затемнение для подписи, дуотон, органическая обрезка) — всё на чистом CSS, без библиотеки обработки изображений. Фотографии на этой странице — авторские SVG-иллюстрации, чтобы документация оставалась на 100% автономной.

Обрезка и пропорции

.aspect-video/.aspect-square/.aspect-portrait фиксируют пропорции контейнера; .object-cover заполняет его без искажения.

aspect-video

aspect-square

aspect-portrait

<img class="aspect-video object-cover rounded-md" src="foto.jpg" alt="..." />

Фильтры

Атомарные, комбинируемые классы (class="grayscale contrast-125") — каждый управляет одним свойством filter.

без фильтра

grayscale

sepia

blur-sm

brightness-50

brightness-150

contrast-150

saturate-0

saturate-200

hue-rotate-90

invert

Комбинированные фильтры grayscale и contrast-125

grayscale contrast-125

<img class="grayscale" src="foto.jpg" alt="..." />
<img class="sepia" src="foto.jpg" alt="..." />
<img class="blur-sm" src="foto.jpg" alt="..." />
<img class="brightness-150 contrast-125" src="foto.jpg" alt="..." />

Обработки

Классы-рецепты (несколько свойств в каждом, как .bg-aurora) для распространённых паттернов карточек с фото.

<div class="img-hover-zoom rounded-lg aspect-video">
  <img src="foto.jpg" alt="..." />
</div>

<div class="img-scrim rounded-lg aspect-video">
  <img src="foto.jpg" alt="..." />
  <div class="img-scrim-caption"><strong>Тропа долины</strong></div>
</div>

<div class="img-duotone aspect-square"><img src="foto.jpg" alt="..." /></div>
<div class="img-blob aspect-square"><img src="foto.jpg" alt="..." /></div>

Современные тренды

Bento-сетка, карточка с подсветкой курсора, градиентная рамка, свечение, зерно/шум, аврора, бегущая строка, FAB и полоса прогресса чтения — актуальные визуальные приёмы, готовые для любого приложения.

Bento-сетка Асимметричная сетка в стиле Apple, с подсветкой при наведении.

Простой элемент

Градиентная рамка

Карточка с градиентной рамкой

Бегущая строка (пауза при наведении)

Design System Доступность Dark mode RTL Design System Доступность Dark mode RTL

Этот блок использует data-cerne-reveal — прокрутите страницу, чтобы увидеть анимацию.

<div class="bento-grid">
  <div class="bento-item bento-span-2 card-spotlight">...</div>
  <div class="bento-item">...</div>
</div>

<div data-cerne-reveal="up">Появляется при прокрутке страницы</div>
<span data-cerne-count-up="1284" data-cerne-count-up-format>0</span>

Варианты утилит и региональная адаптация

hover:, focus:, focus-visible:, active:, disabled:, focus-within: и dark: перед любой утилитой цвета/тени/прозрачности, плюс group-hover:/peer-checked: на чистом CSS (без JS — .group/.peer — просто маркеры), container queries (.cq + cq-md:) и примитивы, которые делают фреймворк адаптируемым к UI-паттернам любого региона — не только западным.

Наведите курсор на эту карточку

Кнопка рядом использует group-hover:opacity-100 — появляется только тогда, когда родитель (.group) находится в состоянии наведения.

data-density="compact" на <html> одним разом умножает всю шкалу отступов — приближает результат к паттерну высокой информационной плотности, распространённому в восточноазиатских порталах/e-commerce. .break-keep и .write-vertical покрывают перенос текста и вертикальное письмо в CJK; --cerne-line-height-base автоматически становится более просторным при :lang(ar|he|hi|bn|ta|te|th). Смотрите 9 примерных страниц (магазин/новости/панель × CJK/RTL/Южная Азия) в разделе Смотреть примеры.

<div class="group card">
  <button class="opacity-25 group-hover:opacity-100 hover:bg-primary">...</button>
</div>

<div class="cq">
  <div class="flex-col cq-md:flex-row">...</div> <!-- reage ao espaço do .cq, não do viewport -->
</div>

<html data-density="compact"> <!-- ou "spacious" -->

Иконки

87 иконок в едином SVG-спрайте (dist/icons/sprite.svg), авторских, на которые ссылаются через <use>.

Доступность

Цель — WCAG 2.1 уровня AA — международный стандарт, не зависящий от страны или языка, а не инструмент или сертификат конкретной юрисдикции.

У каждого интерактивного компонента есть видимое состояние :focus-visible и навигация с клавиатуры (стрелки во вкладках/меню, Esc для закрытия, ловушка Tab в модальных окнах, roving tabindex во вкладках).
prefers-reduced-motion и prefers-color-scheme учитываются автоматически, без какой-либо дополнительной настройки.
Цвета текста на сплошном фоне подобраны под AA — особое внимание уделено warning/info, где используется тёмный текст вместо белого из-за недостаточного контраста.
Формы связывают метку (for/id), ошибку и aria-invalid; состояние ошибки никогда не зависит только от цвета.
Активные ссылки навигации получают aria-current="page"; лендмарки (main, nav, aside) и единственный <h1> на странице структурируют документ для программ чтения с экрана.
Описательный альтернативный текст для изображений/графиков — ответственность того, кто использует фреймворк — Cerne не может сгенерировать это за вас. Бразильское соглашение #PraCegoVer (описывать изображение прямо в подписи/alt) — хорошая привычка, но важна сама практика — писать alt, который описывает изображение, а не повторяет очевидное — это верно на любом языке.
О VLibras и инструментах перевода на язык жестов: они намеренно не встроены, поскольку зависят от внешнего скрипта (стороннего CDN) и специфичны для одного языка/страны — что противоречило бы как «отсутствию внешних зависимостей», так и «международному фреймворку». Правильная и универсальная основа — хорошо сделанные семантический HTML + ARIA, которые уже умеет интерпретировать любая вспомогательная технология в мире; конкретный виджет перевода можно добавить поверх, для каждого проекта отдельно, когда это имеет смысл.
Настоящий RTL: компоненты используют логические свойства (inset-inline-start, margin-inline-end, text-align: start...) вместо фиксированных left/right, поэтому достаточно dir="rtl" на <html>, чтобы отразить боковую панель, выпадающее меню, вкладки, формы и навигацию — без дополнительного CSS. Смотрите вживую:

Карточка с боковым акцентом

Рамка следует за началом текста, а не за фиксированной стороной.

Уведомления по эл. почте

<html lang="ar" dir="rtl">
  <!-- боковая панель, выпадающее меню, вкладки, формы... всё отражается автоматически -->

Конфиденциальность и согласие

Универсальный баннер согласия на cookie — тот же паттерн «необходимые / аналитика / маркетинг», который используют GDPR (ЕС), LGPD (Бразилия) и CCPA (Калифорния), без зависимости от какой-либо сторонней платформы управления согласием.

<div class="consent-banner" data-cerne-consent hidden role="region" aria-label="Уведомление о cookie">
  <p class="consent-banner-text">Мы используем необходимые cookie...</p>
  <div class="consent-banner-actions">
    <button data-cerne-consent-customize
      data-cerne-toggle="modal" data-cerne-target="#consent-preferences">Настроить</button>
    <button data-cerne-consent-reject>Отклонить необязательные</button>
    <button data-cerne-consent-accept>Принять всё</button>
  </div>
</div>

<!-- Cerne.Consent.get() / .set({analytics, marketing}) / .reset() -->

Выбор сохраняется в localStorage (ключ cerne-consent), никогда в стороннем cookie, и никогда никуда не отправляется — что ваш бэкенд делает с Cerne.Consent.get() — ваше решение. Баннер появляется автоматически, только когда страница содержит элемент [data-cerne-consent]; в этой документации он намеренно опущен, чтобы не быть навязчивым — смотрите полный пример в Блоге, Магазине или Институциональном портале.

Полные примеры

42 страницы, полностью построенные на Cerne, охватывающие административную панель, обучение, управление, бронирование, контент, новостной портал, электронную коммерцию, институциональные сайты, видео, социальную сеть, стриминг, диалогового ассистента и портфолио — и у каждой есть собственный вариант CJK, RTL, Южная Азия и Россия, с полным переводом интерфейса (168 региональных страниц, всего около 210), доступный через полосу «Региональный вариант» вверху любого примера.

Административная панель

Учебная среда

Страница преподавателя

Управление / CRUD

Бронирование аудиторий

Институциональный портал

Сайт исследовательской группы

Аутентификация (вход/регистрация)

Видеоплатформа

Социальная сеть (лента)

Социальная сеть (профиль)

Видеостриминг

Диалоговый ассистент (LLM)

Портфолио (bento-сетка)

Аналитическая панель

Веб-почта (в стиле Gmail)

Веб-почта (в стиле Outlook)

Поисковик (минималистичный стиль)

Поисковик (плотный портальный стиль)

Интерфейс смарт-ТВ

Адаптивная международная регистрация

Региональные варианты (CJK, RTL, Южная Азия, Россия)

У каждой страницы каждого примера выше есть вариант CJK, RTL, Южная Азия и Россия — всего 168 региональных страниц — откройте любую и используйте полосу «Региональный вариант» вверху, чтобы переключаться между ними. CJK, RTL и Южная Азия используют примитивы, описанные в разделе Варианты и регионы — data-density, .break-keep/.write-vertical, dir="rtl" и --cerne-line-height-base для каждого языка; вариант «Россия» использует lang="ru" с русским текстом поверх той же LTR-структуры исходного примера (без дополнительных логических свойств, поскольку русский язык ведёт себя в этом смысле как португальский). Все 168 страниц имеют полный перевод — не только интерфейс (навигация, кнопки, формы, подписи, пустые состояния), но и динамический контент: названия и описания товаров, примерные письма (тема и текст), результаты поиска, названия и описания видео/сериалов, примерный разговор ассистента и текст длинных статей и постов, у каждого домена — своя копия примерных данных для каждого языка (например, store-data.cjk.browser.js / store-data.ru.browser.js). Баннер cookie тоже переведён; только небольшие сноски, описывающие сам вариант (и собственные имена людей), остаются на португальском, поскольку это документационный текст для тех, кто читает исходный код, а не контент приложения.

Пример	CJK	RTL	Южная Азия	Россия
Административная панель	Открыть	Открыть	Открыть	Открыть
Учебная среда	Открыть	Открыть	Открыть	Открыть
Страница преподавателя	Открыть	Открыть	Открыть	Открыть
Управление / CRUD	Открыть	Открыть	Открыть	Открыть
Бронирование аудиторий	Открыть	Открыть	Открыть	Открыть
Блог	Открыть	Открыть	Открыть	Открыть
Блог — пост	Открыть	Открыть	Открыть	Открыть
Новостной портал	Открыть	Открыть	Открыть	Открыть
Новостной портал — статья	Открыть	Открыть	Открыть	Открыть
Интернет-магазин	Открыть	Открыть	Открыть	Открыть
Интернет-магазин — товар	Открыть	Открыть	Открыть	Открыть
Сайт лаборатории	Открыть	Открыть	Открыть	Открыть
Институциональный портал	Открыть	Открыть	Открыть	Открыть
Сайт исследовательской группы	Открыть	Открыть	Открыть	Открыть
Аутентификация — вход	Открыть	Открыть	Открыть	Открыть
Аутентификация — регистрация	Открыть	Открыть	Открыть	Открыть
Аутентификация — проверка OTP	Открыть	Открыть	Открыть	Открыть
Ошибка 404	Открыть	Открыть	Открыть	Открыть
Ошибка 500	Открыть	Открыть	Открыть	Открыть
Видеоплатформа	Открыть	Открыть	Открыть	Открыть
Видео — просмотр	Открыть	Открыть	Открыть	Открыть
Видео — плейлист	Открыть	Открыть	Открыть	Открыть
Социальная сеть (лента)	Открыть	Открыть	Открыть	Открыть
Социальная сеть (профиль)	Открыть	Открыть	Открыть	Открыть
Стриминг — вход	Открыть	Открыть	Открыть	Открыть
Стриминг — профили	Открыть	Открыть	Открыть	Открыть
Видеостриминг	Открыть	Открыть	Открыть	Открыть
Стриминг — страница тайтла	Открыть	Открыть	Открыть	Открыть
Стриминг — просмотр	Открыть	Открыть	Открыть	Открыть
Стриминг — обзор	Открыть	Открыть	Открыть	Открыть
Стриминг — прямой эфир	Открыть	Открыть	Открыть	Открыть
Диалоговый ассистент (LLM)	Открыть	Открыть	Открыть	Открыть
Портфолио (bento-сетка)	Открыть	Открыть	Открыть	Открыть
Аналитическая панель	Открыть	Открыть	Открыть	Открыть
Веб-почта (в стиле Gmail)	Открыть	Открыть	Открыть	Открыть
Веб-почта (в стиле Outlook)	Открыть	Открыть	Открыть	Открыть
Поисковик (минималистичный)	Открыть	Открыть	Открыть	Открыть
Поисковик (минималистичный) — результаты	Открыть	Открыть	Открыть	Открыть
Поисковик (плотный портал)	Открыть	Открыть	Открыть	Открыть
Поисковик (плотный портал) — результаты	Открыть	Открыть	Открыть	Открыть
Интерфейс смарт-ТВ	Открыть	Открыть	Открыть	Открыть
Смарт-ТВ — плеер	Открыть	Открыть	Открыть	Открыть
Адаптивная международная регистрация (уже адаптируется по стране через JS — без статичных вариантов)	—	—	—	—

Полная дизайн-система, созданная с нуля, без внешних зависимостей

Мощный инструмент для современной веб-разработки

Что уже готово в v0.1

Установка

Цвета

Отступы

Типографика

Радиус и тень

Radius

Тень

Сетка

App Shell

Кнопки

Формы

Больше форм

Карточки

Медиа

Видео

Таблицы и таблица данных

Редакционный контент

Модальные окна и офканвас

Боковая панель

Уведомления и тосты

Навигация

Календарь и бронирование

Графики

Другие компоненты

Изображения

Обрезка и пропорции

Фильтры

Обработки

Современные тренды

Варианты утилит и региональная адаптация

Иконки

Доступность

Конфиденциальность и согласие

Полные примеры

Региональные варианты (CJK, RTL, Южная Азия, Россия)