Pure CSS — это модульная таблица стилей для сеток, форм, кнопок, меню и таблиц, не требующая среды выполнения виджетов. В этом руководстве показано, как дополнительный адаптивный модуль сетки сочетается со встроенными семантическими элементами в каталоге оборудования с фильтрацией; сортировка и выбор реализованы явно.
Официальные модули Pure CSS 3.1.0 и адаптивной сетки; оригинальный JavaScript без зависимостей. · Справочник по реализации
02
Pure CSS — справочник по дизайн-системе
Скомпилированные модули официального пакета Pure CSS 3.1.0. Это буквальные значения селекторов, а не именованный набор токенов дизайн-системы API: Pure не публикует тему с семантическими переменными CSS, как Chakra или Pico. Приложение добавляет собственные типографику, интервалы макета и более заметную обводку фокуса.
Дизайн-система Pure CSS: небольшой набор модулей CSS
Небольшой набор модулей CSS
Pure предоставляет базовую нормализацию стилей, сетки, кнопки, формы, меню и таблицы. В этом каталоге используются скомпилированный rollup пакета и отдельный файл адаптивной сетки. Здесь не подключаются фреймворк, провайдер или среда выполнения виджетов JavaScript. Фильтрация, сортировка и выбор реализованы в коде приложения, который полностью приведён выше.
Это различие важно учитывать, сравнивая Pure с полноценной платформой компонентов. Класс pure-table задаёт стили ячеек, но не обеспечивает сортировку, пагинацию, виртуализацию или семантику выбора. pure-button — это визуальный класс, который можно назначить нативной кнопке. В примере используются семантически подходящие элементы, а не предполагается, что одни только имена классов добавят им поведение.
Дизайн-система Pure CSS: конкретные значения CSS, а не выдуманная система токенов
Конкретные значения CSS, а не выдуманная система токенов
В скомпилированных стилях кнопок Pure используются нейтральная заливка #E6E6E6, скругление радиусом два пикселя и внутренние отступы в em. Необязательная основная кнопка имеет заливку rgb(0,120,231) и белый текст. Для полей ввода форм предусмотрены скругление радиусом четыре пикселя и собственные внутренние отступы. В справочнике дизайн-системы показаны реальные различия, а не вымышленная общая шкала радиусов.
В этом каталоге используется сдержанная палитра приложения: тёмный сине-серый текст, нейтральные разделители и светлый фон сводки выбранных элементов. Эти решения не являются официальными фирменными цветами Pure. Переключателя тёмной темы нет, поскольку эта версия примера не реализует полноценную альтернативную палитру приложения. Для переключения темы нужно согласованно изменить стили форм, заголовков таблицы, границ, текста и состояний фокуса.
Дизайн-система Pure CSS: типографика и интервалы относятся к приложению
Типографика и интервалы относятся к приложению
Исходный слой страницы задаёт Arial/Helvetica размером 16px с межстрочным интервалом 1.5, заголовок размером 34px и заголовки разделов размером 18px. На узких экранах размер заголовка уменьшается до 28px. Это явно заданные параметры, а не утверждение, будто Pure предписывает редакционную типографическую шкалу. Все значения, необходимые для воспроизведения композиции, приведены в примере CSS.
Сетка Pure изменяет отображение текста и межбуквенный интервал на контейнере сетки, чтобы корректно обрабатывать встроенные элементы. Правила для модулей сетки возвращают тексту стандартное оформление. В каталоге семейство шрифтов также задано для модулей сетки, чтобы в боковой панели и результатах не происходило неожиданной смены шрифта. Внутренние отступы приложения размещены внутри модулей, для которых задан box-sizing: border-box, поэтому дробная ширина остаётся неизменной.
Дизайн-система Pure CSS: для адаптивных долей сетки нужен модуль адаптивной сетки
Для адаптивных долей нужен адаптивный модуль
Боковая панель сочетает классы pure-u-1 и pure-u-md-1-4, а блок с результатами — pure-u-1 и pure-u-md-3-4. Изначально оба блока занимают всю ширину. На медиагранице md, равной 48em, их ширина становится равна четверти и трём четвертям соответственно. Так фильтр получает удобную для чтения фиксированную пропорцию без пользовательских расчётов макета JavaScript.
Основной rollup pure-min.css не содержит медиазапросов для классов адаптивной сетки. Если не подключить grids-responsive-min.css, модификаторы md не будут работать. В этой конфигурации оба файла подключаются явно. На мобильных экранах боковая панель располагается перед таблицей, а граница блока с результатами убирается, образуя единый последовательный порядок чтения.
Дизайн-система Pure CSS: фильтрация и выбор — разные действия
Фильтрация и выбор — разные действия
В форме расположены вертикально поле поиска с подписью, список категорий и флажок доступности. При каждом изменении поля заново отображаются строки, соответствующие всем трём условиям. Отправка формы отменяется, чтобы нажатие Enter в поле поиска не приводило к переходу. Кнопка сброса фильтров вызывает нативный метод reset и заново отображает строки после восстановления браузером значений по умолчанию.
Выбор хранится в Set со стабильными идентификаторами комплектов. Если выбранный элемент скрыт фильтром, он не удаляется из Set. Поэтому постоянно видимый список проверки остаётся достоверным источником информации о выбранных элементах. Это поведение поясняется рядом со счётчиком выбора: иначе пользователь может решить, что отфильтрованные строки означают снятый выбор оборудования.
Выберите доступный диктофон или камеру.
Выберите другую категорию и убедитесь, что выбранный элемент остаётся в списке проверки.
Дизайн-система Pure CSS: сохраняйте смысл таблицы на узких экранах
Сохраняйте смысл таблицы на узких экранах
В таблице используются элементы caption, thead и tbody, а для заголовков столбцов задан атрибут scope. В заголовке Equipment находится нативная кнопка, меняющая порядок сортировки по имени. Родительский элемент th получает значение aria-sort=ascending или descending, соответствующее видимой стрелке. При сортировке во всех строках сохраняется единая структура столбцов.
Минимальная ширина 540px сохраняет смысл столбцов Select, Equipment, Category и Availability. На узком экране по горизонтали прокручивается только область с подписанной таблицей. Для неё доступна клавиатурная фокусировка и видимая обводка фокуса. Сама страница не становится шире. Это продуманный способ отображения таблицы данных, а не попытка переделать каждую строку в визуально не связанную с таблицей карточку.
Дизайн-система Pure CSS: отключённые элементы, пустое состояние и фокус требуют настоящей логики
Отключённые элементы, пустое состояние и фокус требуют настоящей логики
Элементы, выданные в аренду, остаются в списке, чтобы пояснить их доступность, но выбрать их нельзя: их нативные флажки отключены. Кнопка сброса выбора тоже отключена, когда Set пуст. Правило прозрачности Pure помогает обозначить отключённое состояние, но именно атрибут HTML предотвращает активацию элемента.
Если фильтр не находит результатов, отображается специальное сообщение о пустом состоянии, а заголовки таблицы остаются на месте. Количество результатов выводится в области статуса с веживым уровнем объявления. В исходную таблицу стилей добавлена заметная обводка для состояния focus-visible, поскольку стандартное оформление фокуса кнопки в Pure использует градиент и сбрасывает обводку. Для рабочего инструмента полезен более заметный индикатор клавиатурной навигации.
Отключённые флажки объясняют недоступность комплектов, не удаляя их строки.
Пустое состояние подсказывает, как восстановить результаты, сбросив фильтры.
Обводка фокуса предусмотрена для кнопок, полей ввода, списков и области прокрутки.
Дизайн-система Pure CSS: установите и воспроизведите весь каталог
Установите и воспроизведите весь каталог
Установите [email protected], скопируйте pure-min.css и grids-responsive-min.css в локальную папку assets и подключите их в указанном порядке перед style.css. Полное содержимое body, скрипт приложения и CSS приведены выше. Полученные файлы можно обслуживать с помощью статического сервера; самому каталогу не нужна среда выполнения сборки.
Если требуется уменьшить размер бандла, модули пакета также можно подключать по отдельности. При сокращении CSS сохраняйте согласованность базовых зависимостей и сетки. Не копируйте только таблицу стилей таблицы, полагая, что классы форм и кнопок при этом продолжат работать. В этом примере предпочтена полностью воспроизводимая конфигурация, а не частичный бандл без объяснений.
Дизайн-система Pure CSS: выбирайте модули CSS, не теряя их зависимости
Выбирайте модули CSS, не теряя их зависимостей
Скомпилированный rollup задаёт стили кнопок, форм и таблицы каталога, а grids-responsive-min.css обеспечивает дробные значения ширины с учётом контрольной точки. Удаление адаптивного файла не вызывает ошибку: классы md просто перестают менять макет. При сокращении списка подключаемых модулей проверьте, как после этого ведут себя столбцы.
Модули сетки также восстанавливают текстовое оформление, которое контейнер сетки изменяет для встроенного расположения элементов. Задайте шрифт приложения для модулей сетки, а внутренние отступы разместите внутри них, установив box-sizing: border-box. Если позднее в каталоге появится пагинация, храните выбор в состоянии приложения по стабильным идентификаторам: ни CSS таблицы, ни дробная ширина сетки не обеспечивают такое поведение.
Для флажков выданных в аренду элементов используется disabled, а не только приглушённое оформление.
Состояние фильтрации, сортировки и выбора
Исходная логика отображает шесть фиксированных примеров записей и сохраняет выбор по стабильному идентификатору.
javascript
const data=[{id:'c1',name:'Compact camera kit',kind:'Camera',available:true},{id:'c2',name:'Cinema camera kit',kind:'Camera',available:false},{id:'a1',name:'Field recorder',kind:'Audio',available:true},{id:'a2',name:'Wireless microphone pair',kind:'Audio',available:true},{id:'l1',name:'Portable LED panel',kind:'Lighting',available:false},{id:'l2',name:'Softbox lighting kit',kind:'Lighting',available:true}];const selected=new Set();let ascending=true;const $=id=>document.getElementById(id);
function selection(){ $('selected-count').textContent=selected.size+(selected.size===1?' item selected':' items selected');$('clear-selection').disabled=!selected.size;const list=$('selection-list');list.replaceChildren();for(const x of data.filter(x=>selected.has(x.id))){const li=document.createElement('li');li.textContent=x.name;list.append(li);}if(!selected.size){const li=document.createElement('li');li.textContent='No equipment selected.';list.append(li);}}
function render(){const query=$('query').value.toLowerCase().trim();const visible=data.filter(x=>x.name.toLowerCase().includes(query)&&($('kind').value==='all'||x.kind===$('kind').value)&&(!$('available').checked||x.available)).sort((a,b)=>(ascending?1:-1)*a.name.localeCompare(b.name));$('count').textContent=visible.length+' of '+data.length+' kits shown';$('empty').hidden=visible.length!==0;$('rows').replaceChildren();for(const x of visible){const tr=document.createElement('tr');const choice=document.createElement('td');const input=document.createElement('input');input.type='checkbox';input.disabled=!x.available;input.checked=selected.has(x.id);input.setAttribute('aria-label','Select '+x.name);input.addEventListener('change',()=>{input.checked?selected.add(x.id):selected.delete(x.id);selection()});choice.append(input);tr.append(choice);for(const value of [x.name,x.kind,x.available?'Available':'On loan']){const td=document.createElement('td');td.textContent=value;tr.append(td);}$('rows').append(tr);}selection();}
$('filters').addEventListener('input',render);$('filters').addEventListener('submit',e=>e.preventDefault());$('filters').addEventListener('reset',()=>setTimeout(render,0));$('sort').addEventListener('click',()=>{ascending=!ascending;$('sort').textContent='Equipment '+(ascending?'↑':'↓');$('sort').parentElement.setAttribute('aria-sort',ascending?'ascending':'descending');render()});$('clear-selection').addEventListener('click',()=>{selected.clear();render()});render();
Эти значения заданы приложением и не являются официальными токенами Pure.
04
Pure CSS Настройка AI-агента для дизайн-системы
Отправная точка для реализации
Сохраните примеры CSS и JavaScript как style.css и app.js. Медиаклассы адаптивной сетки находятся в отдельном файле. В автономном предпросмотре встроены обе официальные таблицы стилей и исходный код приложения. Обёртка HTML включает полную разметку body; сохраните приведённые примеры взаимодействия и CSS под указанными здесь именами файлов.
html
<!-- npm install [email protected]
mkdir -p assets
cp node_modules/purecss/build/pure-min.css assets/
cp node_modules/purecss/build/grids-responsive-min.css assets/ -->
<!doctype html><html lang="en"><head>
<meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">
<title>Equipment catalog</title>
<link rel="stylesheet" href="assets/pure-min.css">
<link rel="stylesheet" href="assets/grids-responsive-min.css">
<link rel="stylesheet" href="style.css">
<script src="app.js" defer></script></head>
<body><main class="catalog"><header><p class="eyebrow">PURE CSS / LENDING DESK</p><h1>A small equipment catalog.</h1><p>Find a kit, select available items, and review the local selection.</p></header><div class="pure-g"><aside class="pure-u-1 pure-u-md-1-4"><div class="sidebar"><h2>Refine the list</h2><form class="pure-form pure-form-stacked" id="filters"><label for="query">Equipment name</label><input id="query" type="search" placeholder="Camera, recorder…"><label for="kind">Category</label><select id="kind"><option value="all">All categories</option><option>Camera</option><option>Audio</option><option>Lighting</option></select><label class="pure-checkbox"><input id="available" type="checkbox"> Available only</label><button class="pure-button" type="reset">Clear filters</button></form><div class="selection"><strong id="selected-count">0 items selected</strong><p>Selection is kept when a filter hides a row.</p><button id="clear-selection" class="pure-button" disabled>Clear selection</button></div></div></aside><section class="pure-u-1 pure-u-md-3-4"><div class="results"><p id="count" role="status"></p><div class="table-scroll" tabindex="0" role="region" aria-label="Equipment table, scroll horizontally on narrow screens"><table class="pure-table pure-table-horizontal"><caption>Studio lending kits — local sample records</caption><thead><tr><th scope="col">Select</th><th scope="col" aria-sort="ascending"><button id="sort" class="sort">Equipment ↑</button></th><th scope="col">Category</th><th scope="col">Availability</th></tr></thead><tbody id="rows"></tbody></table></div><p id="empty" hidden>No matching equipment. Clear the filters to see all six kits.</p><section class="summary" aria-labelledby="selection-title"><h2 id="selection-title">Selected for review</h2><ul id="selection-list"><li>No equipment selected.</li></ul><p>This is a browsing example. Selecting a kit does not reserve it.</p></section></div></section></div></main>
</body></html>
Запрос для вашего проекта
Промпт для AI-агента
Используйте предоставленный каталог оборудования Pure CSS 3.1.0 и подключите pure-min.css и grids-responsive-min.css. Сохраните адаптивные единицы сетки в соотношении одна четверть и три четверти, фильтры с подписями, семантическую сортируемую таблицу и область горизонтальной прокрутки внутри её контейнера. Объедините фильтры по поиску, категории и доступности, не сбрасывая выбранные идентификаторы. Отключите флажки для оборудования на руках, обновляйте aria-sort при изменении направления сортировки столбца «Оборудование» и сохраняйте выбранные позиции в списке для проверки, даже если фильтры скрывают их. Выбор хранится локально и не должен представляться как бронирование.
05
Источники и область применения дизайн-системы Pure CSS
Pure CSS 3.1.0. Значения селекторов взяты из официального пакета; типографика каталога, цвета, отступы и поведение приложения разработаны отдельно. Бронирование не выполняется.
