Griffincss

Модульная SCSS-библиотека для современной вёрстки на основе CSS Grid и Flexbox. Компактная, расширяемая, без лишнего кода. Описывайте сложные сетки одной строкой.

v0.26.1 Dart Sass CSS Grid Flexbox JS 10,5 КБ gzip MIT

Возможности

Строковый Grid-парсер

Уникальная фича: описывайте сложные CSS Grid раскладки одной компактной строкой формата a3b4-c2d5. JS-рантайм генерирует CSS на лету.

Адаптивные раскладки

Переключайте grid-раскладки на разных брейкпоинтах через data-gr-layout-{sm,md,lg,xl}. Без медиа-запросов вручную.

Адаптивность по контейнеру

Те же брейкпоинты, но от ширины блока, а не окна: .gr-cq на обёртке, -cmd на утилитах, data-gr-layout-cmd на раскладке. Подробнее.

Flexbox-утилиты

Полный набор классов для flex-контейнеров: направление, выравнивание, перенос, gap. С адаптивными вариантами для каждого брейкпоинта.

Спейсинг-утилиты

Margin и padding по разреженной шкале от 0 до 4rem с шагом 0.25rem. По сторонам, по осям, авто-маржины. Адаптивный вариант у каждого свойства.

Авто-присвоение областей

Дочерние элементы без класса gr-area-* автоматически получают имена grid-областей в порядке документа. Меньше классов в HTML.

Компоненты на тех же токенах

Кнопки, поля, карточки, таблицы, сообщения, плашки — отдельный пакет griffincss-ui. Ни одного литерального цвета и ни одной литеральной высоты: обе темы и режим для слабовидящих приходят к ним даром.

Защита от FOUC

Grid-контейнеры скрываются через opacity: 0 до обработки JS-рантаймом, затем плавно проявляются. Без скачков вёрстки. Правило ставит сам рантайм — если скрипт не выполнился, его просто нет и контент виден.

Достоинства

Характеристика	Описание
Минимализм	Ядро содержит только токены, темы, grid и flex. Компоненты и утилиты — отдельные пакеты, каждый подключается по желанию.
Модульность	Три независимых пакета. Можно подключить только `griffincss-core.css` — или только `griffincss-ui.css`: он самодостаточен, `:root` входит в него целиком.
Современность	Только CSS Grid и Flexbox. Никаких float, inline-block хаков, табличной вёрстки.
Строковый DSL	Компактный формат `"a3b4-c2d5"` — интуитивно понятнее, чем ручное описание grid-template-areas.
Дедупликация	JS-рантайм генерирует CSS-правила однократно. Даже если на странице 100 одинаковых раскладок, в DOM попадёт ровно один блок CSS.
Непересекающиеся брейкпоинты	Адаптивные правила используют диапазоны в range-синтаксисе (`(768px <= width < 1024px)`), исключая конфликты между брейкпоинтами и щели на дробных ширинах.
Сохранение display	Авто-скрытие элементов через `:not()` добавляет `display:none` только скрываемым. Исходный display (flex, table, etc.) сохраняется.
CSS-переменные	Все ключевые значения вынесены в CSS custom properties на `:root`. Переопределяются в рантайме без пересборки.
Независимость раскладок	Вложенные `data-gr-layout` контейнеры полностью изолированы. Имена grid-area не конфликтуют между родителем и потомком.

Ограничения

CSS Grid ограничение: именованная область должна образовывать прямоугольник. L-образные и T-образные формы невалидны. Область, занимающая несколько строк, обязана находиться в одних и тех же колонках на всех рядах.

Ограничение	Пояснение
Прямоугольность grid-областей	Ограничение самого CSS Grid, не библиотеки. Область не может менять позицию между рядами.
JS-зависимость для data-gr-layout	Динамический парсинг атрибутов требует `griffincss.js`. Без JS работают только статические SCSS-миксины и утилитарные классы.
Нет прекомпиляции раскладок	В отличие от Tailwind, griffincss не генерирует CSS для всех возможных комбинаций на этапе сборки. Каждая раскладка описывается явно.
Только современные браузеры	Каскадные слои, контейнерные запросы и `:has()`. Порог — Chrome 99, Firefox 97, Safari 15.4 и выше, и он один для всех файлов, включая сборки `-scoped`; ниже него страница остаётся читаемой, но не оформленной. Минимальные версии по каждой возможности, измеренная доля и дата замера — «Совместимость».
Ограниченный набор утилит	Ядро (`griffincss-core`) — только сетка, флекс и отступы между ячейками. Спейсинг, размеры, типографика, цвета, границы, скругления, тени, позиционирование, эффекты, видимость, интерактивность и переходы живут в `griffincss-utils`, а элементы интерфейса — в `griffincss-ui`. Виджеты с состоянием — слайдер, галерея, лайтбокс, параллакс, мегаменю, комбобокс, ползунок, сортируемая таблица — вынесены в опциональный слой GriffinJS внутри `griffincss-ui`; страница без него остаётся рабочей. Выбор даты закрывает нативное поле в оформлении библиотеки — «Формы».
Авто-присвоение по базовому layout	`assignAreaClasses` читает только базовый `data-gr-layout` (без суффикса брейкпоинта). Адаптивные варианты не влияют на порядок присвоения.

Быстрый старт

1. Подключение

<link rel="stylesheet" href="griffincss-core/dist/griffincss-core.css">
<link rel="stylesheet" href="griffincss-ui/dist/griffincss-ui.css">
<link rel="stylesheet" href="griffincss-utils/dist/griffincss-utils.css">
<script src="griffincss-core/dist/griffincss.js"></script>
<script defer src="griffincss-ui/dist/griffincss-ui.js"></script>
<script defer src="griffincss-utils/dist/griffincss-utils.js"></script>

Синхронно, в <head>, — только рантайм раскладок (и рантайм темы, если она есть): они ставят своё до первой отрисовки. Остальные рантаймы и слой виджетов — defer: в блокирующем пути им делать нечего. Подробно — в «Что в <head>, что defer».

2. Скелет страницы

Ресет обнуляет поля и не задаёт шрифт — сознательно, чтобы не спорить с вашим. Без четырёх строк типографики ниже страница набрана Times с абзацами встык. Свой CSS идёт в собственный слой между ядром и компонентами: правило по элементу оттуда не перебьёт ни .gr-btn на ссылке, ни .gr-mb-0 на абзаце. Файл целиком, чтобы скопировать, — starter.html.

<!DOCTYPE html>
<html lang="ru" data-gr-style="standard">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Новая страница</title>

<!-- Порядок слоёв — первым объявлением в документе; griffincss.app — ваш подслой:
     старше токенов, младше компонентов и утилит -->
<style>@layer griffincss.reset, griffincss.tokens, griffincss.core, griffincss.app, griffincss.ui, griffincss.utils, griffincss.style, griffincss.hidden;</style>

<link rel="stylesheet" href="griffincss-core/dist/griffincss-reset.css">
<link rel="stylesheet" href="griffincss-core/dist/griffincss-core.css">
<link rel="stylesheet" href="griffincss-ui/dist/griffincss-ui.css">
<link rel="stylesheet" href="griffincss-utils/dist/griffincss-utils.css">

<!-- Синхронно — только эти два: атрибуты темы и раскладки встают до первой отрисовки -->
<script src="griffincss-core/dist/griffincss-theme.js"></script>
<script src="griffincss-core/dist/griffincss.js"></script>

<!-- Остальное — defer: до отрисовки ничего не ставит -->
<script defer src="griffincss-ui/dist/griffincss-ui.js"></script>
<script defer src="griffincss-utils/dist/griffincss-utils.js"></script>

<!-- Типографика — ваша. Четыре строки, без которых Times и абзацы встык -->
<style>
@layer griffincss.app {
  body { font-family: var(--gr-font-sans); }
  h1, h2, h3 { margin-block: var(--gr-gap-lg) var(--gr-gap-sm); line-height: 1.2; }
  p, ul, ol, pre, table { margin-block: 0 var(--gr-gap); }
  a { color: var(--gr-color-link); text-decoration: underline; }
}
</style>
</head>
<body>
<main class="gr-container gr-px-4 gr-py-6">
  <h1>Заголовок страницы</h1>
  <p>Абзац текста со <a href="#">ссылкой</a>.</p>
</main>
</body>
</html>

3. Первая раскладка

<div data-gr-layout="a3b4-c2d5">
  <div class="gr-area-a">A — 3 колонки</div>
  <div class="gr-area-b">B — 4 колонки</div>
  <div class="gr-area-c">C — 2 колонки</div>
  <div class="gr-area-d">D — 5 колонок</div>
</div>

Результат

A (3 колонки)

B (4 колонки)

C (2 колонки)

D (5 колонок)

JS-рантайм автоматически сгенерирует:

/* класс .gr-l-<хеш> рантайм вешает на контейнер сам */
.gr-l-k7gi9w {
  display: grid;
  grid-template-areas: "a a a b b b b" "c c d d d d d";
  grid-template-columns: var(--gr-l-cols, repeat(7, minmax(0, 1fr)));
  grid-template-rows: var(--gr-l-rows, repeat(2, auto));
}

4. Адаптивная раскладка

<div data-gr-layout="a1b1"
     data-gr-layout-md="a3b4-c2d5"
     data-gr-layout-lg="hdr4-main4-side2_2-ftr4">
  <div class="gr-area-a">A</div>
  <div class="gr-area-b">B</div>
  <div class="gr-area-c">C</div>
  <div class="gr-area-d">D</div>
  <div class="gr-area-hdr">Header</div>
  <div class="gr-area-main">Main</div>
  <div class="gr-area-side">Sidebar</div>
  <div class="gr-area-ftr">Footer</div>
</div>

5. Flex-центрирование одной строкой

<div class="gr-flex gr-flex-center gr-flex-items-center">
  <div>Идеально по центру</div>
</div>

Результат

Идеально по центру

6. Адаптивные колонки без медиа-запросов

<div class="gr-grid-auto-fit">
  <div>Карточка 1</div>
  <div>Карточка 2</div>
  <div>Карточка 3</div>
</div>

Куда дальше

Документация ищется, а не листается: поле поиска в боковой панели знает про все классы библиотеки, токены и заголовки разделов — или нажмите / на любой странице. У каждого примера есть вкладка «Код» и кнопка копирования, а классы и атрибуты в тексте копируются нажатием.

Что нужно	Куда
Взять готовый крупный сегмент вёрстки	Готовые блоки — шапка, первый экран, тарифы, админка, подвал
Найти класс в полном списке	Ядро, Компоненты, Утилиты
Разобраться с раскладками	Grid-парсер
Настроить темы	Темы и Стратегии оформления