# Pure CSS — дизайн-система

## Pure CSS — предварительный просмотр интерфейса дизайн-системы

Фильтруйте шесть наборов, сортируйте по названию, выбирайте доступные элементы и сохраняйте выбор при изменении фильтров.

## Pure CSS — справочник по дизайн-системе

Скомпилированные модули официального пакета Pure CSS 3.1.0. Это буквальные значения селекторов, а не именованный набор токенов дизайн-системы API: Pure не публикует тему с семантическими переменными CSS, как Chakra или Pico. Приложение добавляет собственные типографику, интервалы макета и более заметную обводку фокуса.

### Официальные значения для кнопок и форм

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| .pure-button padding | 0.5em 1em | Масштабируется в соответствии с унаследованным размером текста кнопки. |
| .pure-button radius | 2px | Форма углов кнопки по умолчанию. |
| .pure-button background | #E6E6E6 | Нейтральная заливка кнопки. |
| .pure-button-primary background | rgb(0, 120, 231) | Необязательная заливка основной кнопки или выбранного элемента. |
| .pure-button disabled opacity | 0.40 | Для поведения также используйте атрибут disabled. |
| .pure-form input padding | 0.5em 0.6em | Стандартные внутренние отступы текстового поля. |
| .pure-form input border | 1px solid #ccc | Граница поля ввода по умолчанию. |
| .pure-form input radius | 4px | Форма поля ввода отличается от радиуса скругления кнопки. |
### Официальные значения таблицы

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| .pure-table border | 1px solid #cbcbcb | Внешняя граница таблицы. |
| .pure-table td / th padding | 0.5em 1em | Комфортные интервалы между ячейками. |
| .pure-table thead background | #e0e0e0 | Фон заголовков столбцов. |
| .pure-table-striped odd-row fill | #f2f2f2 | Полосатая заливка необязательна; в этом примере используются горизонтальные линии. |
| .pure-table-horizontal | Bottom borders only | Сохраняет структуру строк без вертикальных разделителей. |
### Границы адаптивной сетки

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| sm | 35.5em | 568px при стандартном размере шрифта браузера 16px. |
| md | 48em | 768px; ширина боковой панели становится равна четверти контейнера. |
| lg | 64em | 1024px. |
| xl | 80em | 1280px. |
| xxl | 120em | 1920px в установленной адаптивной сетке версии 3.1.0. |
### Исходное оформление каталога

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Body | 16px / 1.5 Arial, Helvetica, sans-serif | Явно заданная типографика приложения. |
| Page heading | 34px / 1.15; 28px on mobile | Исходная редакционная иерархия. |
| Section heading | 18px / 1.3 | Исходные заголовок боковой панели и заголовок выбранного элемента. |
| Content gutters | 24px desktop, 16px mobile | Исходные внешние отступы. |
| Focus outline | 3px solid #0078e7; offset 3px | Улучшение приложения по сравнению с градиентной заливкой фокуса кнопки по умолчанию. |
| Table minimum width | 540px | Сохраняет смысл столбцов в области с собственной горизонтальной прокруткой. |
## Pure CSS Полное руководство по дизайн-системе

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система 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. Поэтому постоянно видимый список проверки остаётся достоверным источником информации о выбранных элементах. Это поведение поясняется рядом со счётчиком выбора: иначе пользователь может решить, что отфильтрованные строки означают снятый выбор оборудования.

1. Выберите доступный диктофон или камеру.

2. Выберите другую категорию и убедитесь, что выбранный элемент остаётся в списке проверки.

3. Снимите весь выбор независимо от фильтров.

Прочитать вспомогательную спецификацию

## Дизайн-система 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: установите и воспроизведите весь каталог

### Установите и воспроизведите весь каталог

Установите purecss@3.1.0, скопируйте 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 таблицы, ни дробная ширина сетки не обеспечивают такое поведение.

Прочитать вспомогательную спецификацию

## Pure CSS Примеры компонентов дизайн-системы

### Разметка каталога с модулями Pure

Адаптивная компоновка с соотношением ширины 1:3, вертикальная форма и таблица с горизонтальными разделителями.

```
<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>
```

Справочник по коду

- grids-responsive-min.css подключается отдельно.

- Для флажков выданных в аренду элементов используется disabled, а не только приглушённое оформление.

### Состояние фильтрации, сортировки и выбора

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

```
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();
```

Справочник по коду

- Фильтрация не удаляет выбранные идентификаторы без предупреждения.

- Введённый пользователем текст поиска никогда не становится HTML.

### Типографика приложения и состояния фокуса CSS

Полноценный визуальный слой дополняет намеренно минималистичную библиотеку.

```
*{box-sizing:border-box}body{font:16px/1.5 Arial,Helvetica,sans-serif;color:#263238;background:#fff}.catalog{max-width:1120px;margin:auto;padding:32px 24px}h1{font-size:34px;line-height:1.15;letter-spacing:-.03em;margin:12px 0}h2{font-size:18px;line-height:1.3}.eyebrow{font-size:11px;letter-spacing:.12em;font-weight:700;color:#435c68}header{border-bottom:3px solid #263238;padding-bottom:24px;margin-bottom:24px}.pure-g [class*=pure-u]{font-family:Arial,Helvetica,sans-serif}.sidebar{padding-right:24px}.results{padding-left:24px;border-left:1px solid #d7dfe3}.pure-form input[type=search],.pure-form select{width:100%;max-width:100%}.pure-form label{margin-top:16px}.selection{border-top:1px solid #d7dfe3;margin-top:28px;padding-top:20px;font-size:14px}.table-scroll{overflow:auto}table{width:100%;min-width:540px}.pure-table caption{text-align:left;font-style:normal;color:#52616a}.sort{border:0;background:none;padding:0;color:inherit;text-align:left;font-weight:700;cursor:pointer}.summary{padding:16px 20px;background:#f3f6f7;margin-top:24px}.summary p{font-size:14px;color:#52616a}.pure-button:focus-visible,.sort:focus-visible,.table-scroll:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #0078e7;outline-offset:3px}#empty{padding:20px;border:1px dashed #83919a}@media(max-width:767px){.catalog{padding:24px 16px}h1{font-size:28px}.sidebar{padding:0}.results{padding:24px 0 0;border-left:0}.selection{margin-bottom:24px}}
```

Справочник по коду

- Эти значения заданы приложением и не являются официальными токенами Pure.

## Pure CSS Настройка AI-агента для дизайн-системы

### Отправная точка для реализации

Сохраните примеры CSS и JavaScript как style.css и app.js. Медиаклассы адаптивной сетки находятся в отдельном файле. В автономном предпросмотре встроены обе официальные таблицы стилей и исходный код приложения. Обёртка HTML включает полную разметку body; сохраните приведённые примеры взаимодействия и CSS под указанными здесь именами файлов.

```
<!-- npm install purecss@3.1.0
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>
```

### Запрос для вашего проекта

```
Используйте предоставленный каталог оборудования Pure CSS 3.1.0 и подключите pure-min.css и grids-responsive-min.css. Сохраните адаптивные единицы сетки в соотношении одна четверть и три четверти, фильтры с подписями, семантическую сортируемую таблицу и область горизонтальной прокрутки внутри её контейнера. Объедините фильтры по поиску, категории и доступности, не сбрасывая выбранные идентификаторы. Отключите флажки для оборудования на руках, обновляйте aria-sort при изменении направления сортировки столбца «Оборудование» и сохраняйте выбранные позиции в списке для проверки, даже если фильтры скрывают их. Выбор хранится локально и не должен представляться как бронирование.
```

## Источники и область применения дизайн-системы Pure CSS

Pure CSS 3.1.0. Значения селекторов взяты из официального пакета; типографика каталога, цвета, отступы и поведение приложения разработаны отдельно. Бронирование не выполняется.

- Официальный репозиторий Границы модулей, файлы сборки, подключение адаптивной сетки и лицензия.

- Реализация сетки Обработка текста в контейнере и единицах сетки.

- Исходный код пакета Исходный код на уровне селекторов, использованный для проверки установленных модулей версии 3.1.0.

## Связанные ресурсы дизайн-системы Pure CSS

### Quasar

Встроенный пошаговый сценарий Quasar с фактическими значениями бренда и отступов, проверкой QForm, конструктором брифов из трёх шагов, выбором формата через переключатели и динамической программой на сорок пять минут.

### React Native Elements

Создайте полноценный конструктор плана концентрации с React Native Elements 5.0.0: реальные роли темы, управляемые поля ввода и варианты выбора, проверка данных, локальное подтверждение и протестированная веб-сборка.

### React Suite

Встроенный календарь проверок React Suite с проверенными переменными CSS для v6, маркерами ячеек дат, программой выбранного дня, проверкой в модальном окне и явно заданными правилами локального планирования.


- [Справочник по реализации](https://github.com/pure-css/pure)
- [Источник](https://github.com/pure-css/pure)
- [Прочитать вспомогательную спецификацию](https://github.com/pure-css/pure)
- [Справочник по коду](https://github.com/pure-css/pure)
- [Официальный репозиторий Границы модулей, файлы сборки, подключение адаптивной сетки и лицензия.](https://github.com/pure-css/pure)
- [Реализация сетки Обработка текста в контейнере и единицах сетки.](https://github.com/pure-css/pure/blob/main/src/grids/css/grids-core.css)
- [Исходный код пакета Исходный код на уровне селекторов, использованный для проверки установленных модулей версии 3.1.0.](https://github.com/pure-css/pure/tree/main/src)