Дизайн-система Pico CSS.

Небольшая поверхность с семантическими HTML в дизайн-системе Pico CSS

Компактная семантическая поверхность HTML

Стили Pico оформляют привычные элементы HTML, поэтому для каждого абзаца, поля или кнопки не нужно перечислять длинный список классов компонентов. В этом примере article служит карточкой настроек, а его header и footer обозначают границы; элементы label содержат стандартные элементы управления input/select. Элемент main использует container, поскольку это стандартная сборка Pico, а не отдельная версия без классов.

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

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

Переменные темы и семантические роли дизайн-системы Pico CSS

Переменные темы и семантические роли

Основная роль по умолчанию — это не один цвет, применяемый повсюду. Pico разделяет цвета основного текста, фона, состояния при наведении, фокуса и инверсного отображения. В таблице приведены фактические значения для светлой темы, чтобы при настройке фирменной палитры можно было сохранить нужные соотношения. В примере для чтения используются цвета основного текста, а кнопки наследуют полное оформление компонентов Pico.

Переключатель оформления задаёт data-theme для html. Явно указанное значение light или dark имеет приоритет над автоматическим выбором темы. Если убрать этот атрибут, Pico сможет следовать предпочтительной цветовой схеме браузера. В демонстрации задан исходный режим, чтобы состояние флажка соответствовало внешнему виду. При добавлении собственной основной палитры переопределите обе схемы: одного изменения корневого значения для светлой темы недостаточно, чтобы полностью настроить тёмную тему.

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

Адаптивная типографика меняет всю шкалу в дизайн-системе Pico CSS

Гибкая типографика меняет масштаб целиком

Pico меняет корневой размер шрифта при нескольких ширинах экрана: сначала 100%, затем 106.25%, 112.5%, 118.75%, 125% и 131.25%. При стандартном размере браузера 16px это соответствует диапазону 16–21px. Поскольку для отступов компонентов используется rem, удобное пространство макета увеличивается вместе с текстом. Поэтому токен, заданный как один rem, не всегда равен шестнадцати пикселям.

Ползунок в примере меняет только размер шрифта #sample, задавая его в процентах от унаследованного размера. Он не переопределяет корневую переменную Pico и не меняет масштабирование браузера. Это различие помогает сохранить настройки неизменными и чётко ограничить область действия параметра. Выбранное значение в процентах отображается стандартным элементом output. Размеры заголовков остаются стандартными для Pico: h1 — 2rem, h2 — 1.75rem.

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

Длина строки и композиция для чтения в дизайн-системе Pico CSS

Длина строки и композиция для чтения

Три варианта длины строки — оригинальные значения в единицах ch. Они задают максимальную ширину, а не заставляют текст занимать всю колонку. На мобильном устройстве образец может быть уже выбранного максимума — так и должно быть при адаптивном ограничении ширины. Даже при выборе большой ширины горизонтальная прокрутка не нужна.

В пользовательском макете для чтения используются два столбца minmax; при ширине менее 800px макет перестраивается в одну колонку. Этот порог относится только к данной композиции, а не к официальным контрольным точкам Pico. Для кнопок просмотра и сброса используется помощник grid из Pico, а подвал диалогового окна — flex-строка с переносом. На узких экранах удобство панели настроек важнее двухколоночного расположения.

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

Проверка средствами браузера и полезный этап просмотра в дизайн-системе Pico CSS

Проверка средствами браузера и полезный этап просмотра

Для имени профиля заданы required и minlength, а рядом размещена связанная с полем короткая подсказка. Стандартная проверка ограничений не позволяет отправить пустое поле. Скрипт дополнительно удаляет пробелы по краям, чтобы пара пробелов не считалась допустимым значением. При событии invalid добавляется aria-invalid, включающий оформление ошибки Pico; при вводе собственная ошибка и устаревший атрибут invalid сбрасываются.

Select и range — стандартные элементы управления браузера. Они сразу обновляют пример для чтения, а кнопка Review profile сохраняет отдельный объект с ожидающими применения настройками. Этот снимок отображается в диалоговом окне и передаётся при выборе Apply locally, поэтому подтверждение всегда соответствует применяемым значениям.

1. Оставьте имя профиля пустым и нажмите Review profile.
2. Введите имя, выберите ширину и измените размер текста в примере.
3. Проверьте сохранённые настройки, отмените действие, чтобы продолжить редактирование, или примените их к локальному статусу.

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

Настоящее модальное окно, а не просто стилизованный оверлей в дизайн-системе Pico CSS

Настоящий модальный диалог, а не просто стилизованное наложение

Pico оформляет dialog и его содержимое article, но не предоставляет прикладную логику JavaScript. В этом примере вызывается HTMLDialogElement.showModal. Браузер помещает окно на верхний слой, делает остальную часть документа неактивной и обеспечивает стандартное закрытие клавишей Escape. Простое добавление атрибута open создало бы немодальное поведение, поэтому здесь этот способ не используется.

В диалоговом окне задан aria-labelledby, указывающий на заголовок. У кнопки закрытия есть явная доступная подпись, а кнопки Keep editing и Apply locally описывают два возможных действия. Обе кнопки отмены вызывают close, не меняя сохранённый статус. При применении ожидающий профиль отображается в тексте, после чего окно закрывается; данные не записываются в localStorage и запрос не отправляется.

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

Нативный блок раскрытия для пояснений в дизайн-системе Pico CSS

Нативный раскрывающийся блок для дополнительной информации

Пара details/summary объясняет, какие элементы управления влияют на пример, а какие — нет. Блок раскрывается без JavaScript, потому что это встроенное поведение элемента HTML. В summary задан понятный вопрос; с клавиатуры элемент также доступен. Пояснение носит вспомогательный характер, поэтому оно не прерывает основную форму ещё одной постоянно открытой панелью.

Не заменяйте details стилизованным заголовком, даже если закрытый блок на снимке экрана выглядит так же. Переключатель оформления также остаётся флажком с type=checkbox и role=switch, поэтому у него есть настоящее бинарное состояние. Стили Pico применяются к семантическим структурам, и именно эти структуры во многом определяют взаимодействие.

• article объединяет настройки в визуально сгруппированную область.
• details и summary обеспечивают нативное раскрытие содержимого.
• dialog, открытый через showModal, создаёт модальную границу просмотра.

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

Установите один раз и сохраните воспроизводимость примера в дизайн-системе Pico CSS

Установите один раз и сохраните воспроизводимость примера

Стандартный пакет содержит скомпилированный файл pico.min.css. Скопируйте его в локальную папку assets, подключите перед правилами макета приложения и загрузите поставляемый файл app.js с атрибутом defer. Полная разметка, CSS и скрипт приведены выше. Для этого примера не нужны провайдер фреймворка, шрифт с иконками или сторонний плагин JavaScript.

Используйте стандартную таблицу стилей вместе с классами container и grid. Сборка без классов предполагает другую структуру макета, а условная сборка иначе ограничивает область применения стилей; заменять одну версию другой без проверки разметки — не нейтральная оптимизация. Если вы добавляете Pico на существующий сайт, проверьте, как его селекторы элементов взаимодействуют с уже заданными стилями форм и типографики, прежде чем применять их глобально.

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

Выберите дистрибутив до адаптации разметки в дизайн-системе Pico CSS

Выберите вариант поставки, прежде чем адаптировать разметку

В этом примере используется стандартный дистрибутив и его вспомогательные классы container и grid. Дистрибутив без классов предполагает другую структуру макета, а условный дистрибутив ограничивает область применения стилей Pico. Рассматривайте выбор дистрибутива как решение об интеграции, а не как взаимозаменяемую оптимизацию размера файла.

На существующем сайте проверьте, как селекторы элементов влияют на имеющиеся заголовки, формы, статьи и диалоговые окна. Процентный размер шрифта примера для чтения — локальное переопределение; его следует оставить локальным. Изменение корневого масштаба также повлияет на отступы и элементы управления Pico, основанные на rem. При выборе элементов документа, наследующих тему, согласуйте атрибут оформления с настройками приложения.

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

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

<main class="container"><header><p class="kicker">PICO CSS / READING ROOM</p><h1>A calmer reading setup</h1><p>Adjust a local reading profile. Semantic HTML does most of the work.</p></header><div class="reading-layout"><article><header><h2>Reading preferences</h2></header><form id="preferences"><label for="reader">Profile name<input id="reader" name="reader" required minlength="2" placeholder="Weekend reader" aria-describedby="name-help"></label><small id="name-help">At least two characters. Saved only for this open preview.</small><label for="measure">Reading width<select id="measure"><option value="48">Narrow — 48 characters</option><option value="62" selected>Balanced — 62 characters</option><option value="72">Wide — 72 characters</option></select></label><label for="scale">Text size <output id="size-label">100%</output><input id="scale" type="range" min="90" max="125" step="5" value="100"></label><label><input id="night" type="checkbox" role="switch"> Dark appearance</label><div class="grid"><button type="submit">Review profile</button><button type="reset" class="secondary outline">Reset</button></div></form><footer id="saved" role="status">No profile applied yet.</footer></article><section class="reading-copy"><p class="kicker">A SHORT SAMPLE</p><h2>Make space for attention.</h2><div id="sample"><p>The margin is not leftover space. It gives each paragraph a clear beginning and lets the eye return to the next line without effort.</p><p>A reading interface can be quiet without becoming empty. Descriptive headings, useful contrast, and a predictable rhythm let the content remain in charge.</p></div><details><summary>What changes in this preview?</summary><p>Width changes the maximum line measure, text size scales only this sample, and the appearance switch changes Pico’s theme. These are local preferences, not browser accessibility settings.</p></details></section></div><small>Official Pico CSS 2.1.1. Native form, details, and dialog elements; original application behavior.</small></main><dialog id="review" aria-labelledby="review-title"><article><header><button id="close" aria-label="Close review" rel="prev"></button><h2 id="review-title">Review reading profile</h2></header><p id="review-text"></p><footer><button id="cancel" class="secondary">Keep editing</button><button id="apply">Apply locally</button></footer></article></dialog>

const $=id=>document.getElementById(id);let pending=null;
function update(){ $('sample').style.maxWidth=$('measure').value+'ch';$('sample').style.fontSize=$('scale').value+'%';$('size-label').value=$('scale').value+'%';document.documentElement.dataset.theme=$('night').checked?'dark':'light';}
for(const id of ['measure','scale','night'])$(id).addEventListener('input',update);
$('preferences').addEventListener('submit',event=>{event.preventDefault();pending={name:$('reader').value.trim(),width:$('measure').value,size:$('scale').value,dark:$('night').checked};if(pending.name.length<2){$('reader').setCustomValidity('Use at least two non-space characters.');$('reader').reportValidity();return;}$('review-text').textContent=`${pending.name}: ${pending.width}-character maximum, ${pending.size}% sample text, ${pending.dark?'dark':'light'} appearance. This will apply only to this preview.`;$('review').showModal();});
$('reader').addEventListener('input',()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid')});$('reader').addEventListener('invalid',()=>{$('reader').setAttribute('aria-invalid','true')});
for(const id of ['close','cancel'])$(id).addEventListener('click',()=>$('review').close());
$('apply').addEventListener('click',()=>{$('saved').textContent=`Applied ${pending.name} locally (${pending.width}ch, ${pending.size}%, ${pending.dark?'dark':'light'}). Reloading clears this profile.`;$('review').close();});
$('preferences').addEventListener('reset',()=>{setTimeout(()=>{$('reader').setCustomValidity('');$('reader').removeAttribute('aria-invalid');$('saved').textContent='No profile applied yet.';update()},0)});update();

main.container{max-width:1120px;padding:2rem 1rem}.kicker{font-size:.7rem;letter-spacing:.13em;font-weight:700;color:var(--pico-primary)}.reading-layout{display:grid;grid-template-columns:minmax(260px,.95fr) minmax(0,1.05fr);gap:2rem;align-items:start}.reading-copy{padding-top:1rem}#sample{transition:font-size .15s}output{float:right}#review article{max-width:560px}#review footer{display:flex;flex-wrap:wrap;gap:.5rem}#review footer button{flex:1}h1{max-width:20ch}header>p{max-width:65ch}@media(max-width:800px){.reading-layout{grid-template-columns:1fr;gap:1rem}}