Готовые блоки

Как этим пользоваться

Каждый блок ниже собран только на классах библиотеки: ни одного литерального цвета, ни одного пикселя в разметке, ни строчки собственного CSS у этой страницы. Единственный атрибут style на всей странице — оценка товара в --gr-rating: это данные, а не оформление. Поэтому блок, перенесённый в ваш проект, сразу знает про светлую и тёмную тему, про режим для слабовидящих и про выбранную стратегию оформления — переключатели в боковой панели действуют и на эти сегменты, попробуйте.

Порядок работы: вкладка «Код» → «Копировать» → вставить в свою разметку → заменить тексты и ссылки. Классы gr-area-* в панели админки и data-gr-layout на её контейнере — единственное место, где нужен JS-рантайм библиотеки; остальные тринадцать блоков работают без него. Своего кода просит один счётчик количества в карточке товара — два вызова stepUp() / stepDown() прямо в разметке блока.

1. Шапка сайта

Бренд, меню и действие. До 768px меню сворачивается в кнопку ☰ — это <details>, без единой строки JS.

2. Первый экран

Заголовок, одна фраза о продукте, два действия и строка доверия. Ширина текста ограничена gr-max-w-page, а не пикселями, поэтому на широком мониторе строка не растягивается до нечитаемой.

3. Сетка карточек

gr-grid-auto-fit сама решает, сколько колонок поместится: ни одного брейкпоинта в разметке. Карточки выравниваются по нижнему краю, потому что подвал прижат gr-card-footer, а не отступом.

4. Карточка товара

Витрина магазина целиком: стикеры поверх обложки, рейтинг-звёзды, цена со старой ценой и размером скидки, выбор цвета и размера, счётчик количества и кнопка. Нового CSS здесь два модуля — gr-rating: дробное заполнение знака из готовых утилит не собирается, — и образцы gr-swatch / gr-swatch-tag: радио в виде кружка цвета и плашки размера, где состояние «выбран» на самом образце ни одна утилита дать не могла. Всё остальное уже было — gr-badge в углу gr-relative-обёртки, gr-line-through на старой цене, gr-input-group вокруг пары кнопок со счётчиком.

Под курсором карточка приподнимается — это gr-hover-lift из модуля трансформаций, один класс со своим переходом и своим @media (hover: hover) внутри. На сенсорном экране эффект не залипает после касания, а при prefers-reduced-motion: reduce сжимается до неразличимого. Ни своего @media, ни своего transition в блоке для этого не появилось.

Стикер стоит на логическом gr-start-0 — физической привязки в библиотеке больше нет: под dir="rtl" он уезжает к правому краю обложки сам. Оценка дублируется числом рядом и aria-label на самом рейтинге — пять знаков это цвет и форма, а они не переживают ни печать, ни программу чтения с экрана. Кнопка «В корзину» прижата к низу тем же приёмом, что подвал карточки в третьем блоке: gr-flex-1 на строке цены забирает остаток высоты, и кнопки в ряду встают на одну линию.

5. Тарифы

Три плана, средний выделен рамкой и плашкой, а не размером: увеличенная карточка ломает выравнивание цен, и глаз перестаёт их сравнивать.

6. Форма входа

Каждое поле — gr-field с подписью и подсказкой, связанной через aria-describedby. Ошибка показана словом, а не только цветом рамки. У пароля — кнопка «Показать» в .gr-input-group: три строки на странице переключают type, aria-pressed и подпись, виджета для этого нет.

7. Лента статей

Крупная статья и две поменьше. Раскладка описана строкой gr-grid-12 со span-утилитами, поэтому на узком экране колонки схлопываются сами.

8. Панель админки

Единственный блок на этой странице, которому нужен griffincss.js: раскладка описана строкой data-gr-layout, а на широком экране меняется на data-gr-layout-md — без единого медиа-запроса в разметке.

9. Дашборд со статистикой

Четыре показателя в ряд, под ними — полосы выполнения. Числа набраны gr-font-mono: в колонке показаний разряды обязаны стоять друг под другом, а пропорциональный шрифт этого не обещает. Полоса — родной <progress>, а не div со вложенным span: доступность у него уже есть.

10. Таблица с фильтрами

Панель отбора, таблица в прокручиваемой обёртке и страницы под ней. gr-table-wrap с tabindex="0" — чтобы до прокрутки можно было добраться с клавиатуры; ниже 640 px прокрутка не понадобится — .gr-table-stack-sm складывает каждую строку в карточку с подписями из data-label («Карточки вместо строк»). Период — пара нативных полей даты, сумма — текстовое поле: без скрипта оба работают как есть, с подключённым griffinjs-fields.js поля периода связываются атрибутом to (второе не раньше первого), а сумма получает разряды по локали — «С подключённым griffinjs-fields.js».

11. Вопросы и ответы

Аккордеон на <details name="…">: общее имя заставляет браузер закрывать соседей сам, без JS и без управления состоянием.

12. Призыв к действию

Полоса на цвете акцента. Текст берёт gr-text-on-accent, а не белый: в режиме для слабовидящих пара «фон — текст» меняется вместе, и контраст сохраняется.

13. Подвал сайта

Четыре колонки на широком экране, две на планшете, одна на телефоне — gr-grid-1 gr-grid-2-sm gr-grid-4-lg, три класса вместо двух медиа-запросов. Здесь колонки заданы числом, а не gr-grid-auto-fit: у подвала их ровно четыре по смыслу, и отдавать это решение ширине экрана незачем. Нижняя строка отделена границей, а не отступом: так видно, где кончается навигация и начинается правовая часть.

14. Каталог с фасетами

Боковая колонка отбора (четыре доли из двенадцати) и сетка карточек — gr-grid-12-lg со span-утилитами; ниже 1024 px колонки схлопываются в одну. Порог здесь lg, а не md: на планшете три колонки из двенадцати оставляют фасетам полосу, в которую не помещается ни цена «от — до», ни подпись флажка. Весь сегмент лежит внутри одной <form method="get">: отбор уезжает в адресную строку, страница возвращается с теми же значениями в полях, и переносится это в любой движок сайта как есть. Ни одной строки скрипта, ни одного нового класса.

Цена — два числовых поля «от» и «до», и это база: без скрипта форма работает ими. С подключённым griffinjs.js над полями ложится пара ползунков с параметром fields на обёртке — потянул ручку, число обновилось; вписал число, ручка уехала. Отправляют форму по-прежнему поля: name у них, у ползунков его нет, и в адрес уезжают два параметра, а не четыре.

Фасеты — вложенные <details>: группа сворачивается, и это платформа, а не виджет. Внешний <details open> «Фильтры» нужен телефону: там колонка идёт над товаром, и её сворачивают одним касанием. Выдвижной панели здесь намеренно нет — она потребовала бы второго набора тех же полей в форме (или своего CSS у этой страницы), а дубль полей в GET-форме отправляет фасет дважды.

Чего здесь нет и не будет: счётчиков у фасетов, логики фильтрации и состояния в адресе, собираемого скриптом. Это витрина, а не приложение: разметка и форма — всё. Крестик у выбранного фасета — ссылка на тот же адрес без этого параметра, а не кнопка, которой нужен обработчик.

Чего здесь нет

Ни выбора даты, ни фильтрации по щелчку. Это не забывчивость: таким блокам нужен не «тонкий опциональный JS», а полноценный виджет с управлением состоянием — другая ответственность и другой размер. Всё, что на этой странице, работает от разметки и стилей, и ровно один сегмент из четырнадцати просит рантайм.

Фасетный фильтр из этого списка ушёл — но ушла только его разметка: сегмент 14 отбирает <form method="get">, а счётчики у фасетов, подгрузка выдачи и состояние в адресе остаются за приложением. Граница та же, что и была: витрина показывает, приложение считает.

Автодополнение и сортировка таблицы стояли здесь же — и оба уже неправда: комбобокс и сортируемая таблица приехали тем же опциональным слоем. У сортировки основание пересмотра названо отдельно: перестановка строк по признаку из разметки обходится без модели состояния, а выбор даты — нет, и он в списке остался.

Про карусель здесь раньше стояло то же самое, и это уже неправда: слайдер, галерея, лайтбокс, параллакс и мегаменю приехали опциональным слоем griffinjs.js внутри пакета griffincss-ui — «другая библиотека» получила имя и место, не меняя состава npm. Подключается она отдельным файлом и по-прежнему никому не навязывается: все четырнадцать блоков выше собраны без неё. Единственное место, где она подключена, — ползунок цены в каталоге с фасетами, и он лежит поверх двух числовых полей, которые работают и без него.

Товарной специфики здесь тоже нет как отдельного API: в карточке товара ни gr-price, ни gr-sticker, ни gr-qty — цена собирается кеглем и gr-line-through, стикер это gr-badge в углу, счётчик — gr-input-group. Своим классом стал только рейтинг: дробное заполнение знака из готовых утилит не собирается, а остальное собирается — и тогда новое имя не добавляет ни одного свойства.