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

Основы и слои фреймворка CSS дизайн-системы Skeleton

Выберите фактически используемый слой

В интерфейсе для чтения используются @skeletonlabs/skeleton 5.0.1, утилиты Tailwind CSS и три поставляемые темы. skeleton-svelte и skeleton-react не загружаются. Кнопки, бейдж, чип, карточка и оформление раскрывающегося элемента используют настоящие утилиты CSS; выбор темы и логика сохранённого состояния созданы специально для JavaScript. Благодаря такому разделению весь пример работает как небольшая страница Vite и не создаёт впечатления, будто здесь используется среда выполнения компонентов фреймворка.

Компилируйте утилиты, а не импортируйте исходный CSS в браузер

Исходный код Skeleton содержит директивы Tailwind, например @utility и @variant. В предоставленной конфигурации Vite подключён @tailwindcss/vite, а таблица стилей импортирует Tailwind до Skeleton и выбранных тем. Простое подключение исходного пакета ссылкой не воспроизведёт скомпилированные стили. В комплект входит полный исходный код сборки, поэтому предварительный просмотр не зависит от скрытых сгенерированных файлов CSS.

1. Импортируйте Tailwind CSS.
2. Импортируйте утилиты Skeleton.
3. Импортируйте каждую тему, которую хотите использовать.
4. Скомпилируйте таблицу стилей с помощью плагина Tailwind для Vite.

Выбор темы и фактические значения дизайн-системы Skeleton

Явно импортируйте каждую доступную тему

Cerberus, Mint и Rose импортируются по отдельности из каталога тем пакета. При выборе темы атрибут data-theme на корневом элементе меняется и подключает соответствующие объявления переменных. В справочнике для каждой темы приведены реальные образцы основной палитры, крайние значения поверхностей, интервалы, радиусы и объявления шрифтов. Эти значения взяты из зафиксированных файлов, а не сгенерированы простой заменой одного акцентного цвета.

• Изначально используется оформление Cerberus.
• Mint и Rose — отдельные реально импортируемые темы.
• При выборе темы меняется data-theme, а не копируется дерево контента.

Сравнивайте темы, не меняя весь контент

Карточка для чтения, список и сохранённое состояние остаются неизменными при смене темы. После каждого выбора боковая панель считывает вычисленные переменные корневого элемента и показывает фактические значения, применённые браузером. Такое сравнение полезно: типографика, форма и палитра могут меняться, пока читатель оценивает один и тот же контент и состояние.

Тёмное оформление и цветовая схема дизайн-системы Skeleton

Свяжите тёмный вариант с фактическим элементом управления

В таблице стилей определён тёмный вариант на основе класса, который соответствует .dark на корневом элементе или его потомках. Глобальные правила Skeleton используют этот вариант для установки color-scheme. Поэтому кнопка оформления меняет условия, от которых зависят сочетания поверхностей light-dark(). Если переключатель меняет класс, но оставляет без изменений вариант Tailwind по умолчанию, зависящий от медиазапроса, интерфейс может сообщать о тёмном оформлении, хотя поверхности останутся светлыми.

Используйте пресет, который сохраняет читаемость

Для переключения оформления используется preset-tonal-primary, а для действия чтения — preset-filled-primary-500. Пресеты задают соотношение поверхности и переднего плана; одного цветового токена недостаточно для обеспечения читаемого контраста. Фактическое отображение в тёмной теме проверили после переключения на Rose, в том числе текст элементов управления и раскрывающийся блок. Корректность внешнего вида не предполагалась только на основании успешной смены класса.

Типографика, форма и макет дизайн-системы Skeleton

Отделяйте объявления темы от исходной иерархии

В Cerberus задан системный шрифт, а Rose использует другой стек резервных шрифтов. В этом примере удалённые шрифты не загружаются: браузер использует доступные шрифты из выбранного стека. В исходном макете для заголовка страницы явно задан размер 36px, а для заголовка материала — 28px. Эти решения по композиции независимы от объявлений семейства и насыщенности шрифтов в самой теме.

Используйте значения радиуса и интервалов из темы

Состояние чтения и сброс оформления дизайн-системы Skeleton

Сохраняйте состояние локально и с возможностью отмены

Действие чтения переключает aria-pressed, меняет подпись и обновляет понятное сообщение о состоянии. Для этой страницы сохраняется только логическое значение в памяти. Учётной записи, постоянного хранения и сетевых запросов нет. Это состояние сохраняется при смене тем, позволяя читателю сравнивать один и тот же активный элемент в разных палитрах.

Сбрасывайте оформление, не удаляя состояние чтения

Сброс оформления возвращает тему Cerberus и светлый режим, намеренно не меняя сохранённое логическое значение. Подпись кнопки поясняет, что именно будет сброшено. Отдельное действие позволяет удалить карточку для чтения с локального экрана. Если объединить эти действия, безобидный сброс оформления неожиданно отменит текущий выбор пользователя.

Нативный элемент раскрытия и реальный контент дизайн-системы Skeleton

Используйте элемент details браузера

Дополнительное пояснение оформлено настоящей структурой details/summary с утилитой раскрытия. Открытие с клавиатуры и указателем обеспечивает браузер, а Skeleton отвечает за оформление. Это не компонент Accordion для Svelte из Skeleton; компонент API и событие не имитируются. В абзаце подробно объясняется, что меняется, а что остаётся неизменным.

Проверьте раскрытое состояние после завершения перехода

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

Проверка тем на адаптивных экранах дизайн-системы Skeleton

Сохраняйте читаемость значений на узких экранах

При ширине меньше 720px рабочая область выстраивается в столбец, а внешние отступы уменьшаются до 16px. Каждое имя вычисленного токена и его значение размещаются в отдельной строке, поэтому длинные стеки шрифтов и строки OKLCH переносятся, не вызывая горизонтальной прокрутки. Пять образцов цветов остаются видны в компактной сетке, а элементы управления темами переносятся на следующие строки.

Проверьте сочетания тем и состояний

В тесте браузера сохраняют карточку для чтения, переключают темы на Mint и Rose, включают тёмное оформление, раскрывают блок, а затем сбрасывают оформление. Сохранённое состояние должно оставаться неизменным на протяжении всего сценария. Проверка выполнена вплоть до ширины 280px и охватывает реальные длинные значения и раскрытый контент, а не только снимок одной начальной темы.

Полный исходный код Vite дизайн-системы Skeleton

Сохраните все четыре исходных файла

В примере есть файлы index.html, style.css, main.js и vite.config.mjs. Установите закреплённые зависимости Skeleton, Tailwind и Vite, затем запустите Vite в этой папке. Явное указание @source ссылается на HTML с классами утилит, чтобы в собранный результат вошли классы, используемые столом для чтения. Отсутствующий каркас фреймворка не требуется.

При необходимости выбирайте компоненты для каждого фреймворка отдельно

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

<!doctype html><html lang="en" data-theme="cerberus"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Theme reading desk</title></head><body><main><header><div><p class="text-sm font-bold">SKELETON / THEME READING DESK</p><h1>The same content, three themes.</h1><p class="intro">Inspect actual Skeleton 5.0.1 palettes, surface pairings and native CSS components while keeping a complete reading card in view.</p></div><span class="badge preset-tonal-primary">Original OpenDesign study</span></header><div class="controls"><label for="theme">Theme<select id="theme" class="select"><option value="cerberus">Cerberus</option><option value="mint">Mint</option><option value="rose">Rose</option></select></label><button id="mode" class="btn preset-tonal-primary">Use dark appearance</button><button id="reset" class="btn preset-tonal-surface">Reset presentation</button></div><div class="workbench"><article class="card preset-outlined-surface-200-800 reading"><span class="chip preset-tonal-primary">Reading / 4 minutes</span><h2 class="mt-6">Make the next step easier to see</h2><p>A useful interface explains the next action without making every detail compete for attention. Start with a complete piece of content, then inspect how its hierarchy survives a change of theme.</p><ul><li>Keep the heading clear in both appearances.</li><li>Use a supporting surface to group related information.</li><li>Repeat an important state in text, not color alone.</li></ul><button id="bookmark" class="btn preset-filled-primary-500 bookmark" aria-pressed="false">Save to this reading desk</button><p id="message" role="status">This reading card is not saved.</p></article><aside class="card preset-tonal-surface side"><h2 class="text-xl font-bold">Current theme values</h2><div class="palette" aria-label="Primary palette samples"><div class="swatch" style="background:var(--color-primary-100)"></div><div class="swatch" style="background:var(--color-primary-300)"></div><div class="swatch" style="background:var(--color-primary-500)"></div><div class="swatch" style="background:var(--color-primary-700)"></div><div class="swatch" style="background:var(--color-primary-900)"></div></div><dl class="tokens" id="tokens"></dl><details class="disclosure mt-6"><summary class="preset-tonal-primary">What changes with the theme?</summary><p>The imported theme changes palette, typography declarations and shape variables. The reading text and local saved state stay the same. Dark appearance changes surface pairings; it is not a second copy of the content.</p></details></aside></div><p class="scope">Uses Skeleton’s actual Tailwind CSS utilities and three shipped themes. The page logic is original plain JavaScript; no Skeleton Svelte or React component runtime is loaded. Saving changes this page only and sends nothing.</p></main><script type="module" src="./main.js"></script></body></html>

@import 'tailwindcss';
@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/themes/cerberus';
@import '@skeletonlabs/skeleton/themes/mint';
@import '@skeletonlabs/skeleton/themes/rose';
@source './index.html';
@custom-variant dark (&:where(.dark, .dark *));
body{margin:0}*{box-sizing:border-box}main{max-width:1080px;margin:auto;padding:32px}header{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:flex-start}h1{font-size:36px;line-height:1.15;font-weight:700;margin:16px 0}.intro{max-width:66ch;line-height:1.6}.controls{display:flex;gap:16px;align-items:end;flex-wrap:wrap;margin:32px 0}.controls label{display:grid;gap:8px}.workbench{display:grid;grid-template-columns:1.25fr 1fr;gap:24px}.reading{padding:32px}.reading h2{font-size:28px;line-height:1.25;font-weight:700}.reading p{line-height:1.7;margin:24px 0}.reading ul{list-style:disc;padding-left:24px}.reading li{margin:12px 0}.palette{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:24px 0}.swatch{height:72px;border-radius:var(--radius-base)}.tokens{display:grid;gap:12px;font-size:13px}.tokens div{display:grid;gap:8px;padding-bottom:12px;border-bottom:1px solid currentColor}.tokens dd{overflow-wrap:anywhere}.side{padding:24px}.disclosure p{padding:16px;line-height:1.6}.scope{font-size:13px;line-height:1.6;margin-top:32px}.bookmark{margin-top:24px}#message{font-size:14px;margin-top:16px}:focus-visible{outline:3px solid var(--color-primary-500);outline-offset:3px}@media(max-width:720px){main{padding:16px}.workbench{grid-template-columns:1fr}.reading{padding:24px}.palette{gap:4px}.swatch{height:56px}}

.workbench>*{min-width:0}.bookmark{max-width:100%;white-space:normal;height:auto;min-height:2rem;text-align:center}.disclosure summary{white-space:normal}

import './style.css';
const root=document.documentElement;let saved=false;function inspect(){const style=getComputedStyle(root);const keys=['--color-primary-500','--radius-base','--spacing','--typo-base--font-family'];document.querySelector('#tokens').replaceChildren(...keys.map(key=>{const row=document.createElement('div'),dt=document.createElement('dt'),dd=document.createElement('dd');dt.textContent=key;dd.textContent=style.getPropertyValue(key).trim();row.append(dt,dd);return row}));}document.querySelector('#theme').addEventListener('change',e=>{root.dataset.theme=e.target.value;inspect()});document.querySelector('#mode').addEventListener('click',e=>{let dark=root.classList.toggle('dark');e.currentTarget.textContent=dark?'Use light appearance':'Use dark appearance';inspect()});document.querySelector('#bookmark').addEventListener('click',e=>{saved=!saved;e.currentTarget.setAttribute('aria-pressed',String(saved));e.currentTarget.textContent=saved?'Remove from this reading desk':'Save to this reading desk';document.querySelector('#message').textContent=saved?'Saved in this preview only.':'This reading card is not saved.'});document.querySelector('#reset').addEventListener('click',()=>{root.dataset.theme='cerberus';root.classList.remove('dark');document.querySelector('#theme').value='cerberus';document.querySelector('#mode').textContent='Use dark appearance';inspect()});inspect();

import{defineConfig}from'vite';import tailwindcss from'@tailwindcss/vite';export default defineConfig({plugins:[tailwindcss()],base:'./',build:{cssCodeSplit:false}});