Système de design Skeleton.

Fondations et couches du framework du système de design Skeleton CSS

Choisissez la couche qui s’exécute réellement

Le pupitre de lecture utilise @skeletonlabs/skeleton 5.0.1, ses utilitaires Tailwind CSS et trois thèmes fournis. Il ne charge ni skeleton-svelte ni skeleton-react. Les boutons, le badge, la puce, la carte et la présentation à divulgation progressive reposent sur de véritables utilitaires CSS ; le sélecteur de thème et la logique d’enregistrement de l’état sont propres à JavaScript. Cette séparation permet à l’exemple complet de fonctionner comme une petite page Vite, sans laisser entendre qu’un environnement d’exécution de composants de framework est utilisé.

Compiler les utilitaires au lieu d’importer le code source brut de CSS dans un navigateur

Le code source de Skeleton contient des directives Tailwind telles que @utility et @variant. La configuration Vite fournie inclut @tailwindcss/vite, et la feuille de style importe Tailwind avant Skeleton et les thèmes choisis. Un lien brut vers le paquet source ne reproduirait pas les styles compilés. Le code source complet de la compilation est inclus afin que l’aperçu ne dépende pas de CSS généré de manière cachée.

1. Importez Tailwind CSS.
2. Importez les utilitaires Skeleton.
3. Importez chaque thème que vous souhaitez sélectionner.
4. Compilez la feuille de style avec le greffon Tailwind pour Vite.

Sélection du thème et valeurs effectives du système de design Skeleton

Importez explicitement chaque thème disponible

Cerberus, Mint et Rose sont chacun importés depuis le chemin themes du package. Le choix d’un nom modifie l’attribut data-theme sur la racine, qui sélectionne les déclarations de variables correspondantes. La référence répertorie, pour chaque thème, des échantillons réels de la palette principale, les extrêmes des surfaces, l’espacement, le rayon et les déclarations de polices. Ces valeurs sont lues dans les fichiers épinglés, et non générées en remplaçant une seule couleur d’accent.

• Cerberus est la présentation initiale.
• Mint et Rose sont des thèmes distincts, importés séparément.
• La sélection d’un thème modifie data-theme, pas une arborescence de contenu copiée.

Conservez l’intégralité du contenu pendant la comparaison

La carte de lecture, la liste de contrôle et l’état d’enregistrement restent intacts lors d’un changement de thème. Après chaque sélection, le panneau latéral lit les variables calculées à partir de la racine et affiche les valeurs effectivement résolues par le navigateur. La comparaison est ainsi pertinente : la typographie, les formes et la palette peuvent changer, tandis que le lecteur examine le même contenu et le même état.

Apparence sombre et color-scheme du système de design Skeleton

Reliez la variante sombre au contrôle réel

La feuille de style définit une variante sombre basée sur une classe, correspondant à .dark sur la racine ou ses descendants. Les règles globales de Skeleton utilisent cette variante pour définir color-scheme. Le bouton d’apparence modifie donc les conditions utilisées par les associations de surfaces light-dark(). Un bouton qui modifie une classe sans changer la variante par défaut de Tailwind, basée sur le média, peut indiquer le mode sombre alors que les surfaces restent claires.

Utilisez un preset qui reste lisible

L’action d’apparence utilise preset-tonal-primary, et l’action de lecture utilise preset-filled-primary-500. Les presets définissent la relation entre la surface et la couleur de premier plan ; un jeton de couleur seul ne garantit pas un contraste lisible. L’état sombre réellement affiché a été vérifié après le passage à Rose, y compris le texte du contrôle et le contenu dévoilé, plutôt que de supposer qu’un changement de classe réussi garantissait un rendu correct.

Typographie, formes et mise en page du système de design Skeleton

Distinguez les déclarations du thème de la hiérarchie d’origine

Cerberus déclare une police système, tandis que Rose inclut une autre pile de polices de remplacement. Cette étude ne charge aucune police distante ; le navigateur utilise les polices disponibles dans la pile sélectionnée. La mise en page d’origine définit explicitement un titre de page de 36px et un titre de lecture de 28px. Ces choix de composition restent distincts des déclarations de famille et de graisse propres au thème.

Laissez le thème définir le rayon et l’espacement

État de lecture et réinitialisation de la présentation du système de design Skeleton

Gardez l’enregistrement local et réversible

L’action de lecture bascule aria-pressed, modifie son libellé et met à jour un message d’état lisible. Elle n’enregistre qu’une valeur booléenne en mémoire pour cette page. Il n’y a ni compte, ni persistance, ni requête réseau. Le même état reste visible après un changement de thème, ce qui permet aux lecteurs de comparer un état actif entre différentes palettes.

Réinitialisez la présentation sans supprimer l’état de lecture

La réinitialisation de la présentation rétablit Cerberus et l’apparence claire, mais laisse délibérément inchangée la valeur booléenne d’enregistrement. Son libellé précise cette portée. Une action distincte permet de supprimer la carte de lecture du bureau local. Confondre ces deux actions ferait qu’une simple réinitialisation visuelle effacerait de façon inattendue le choix actuel de l’utilisateur.

Élément de divulgation natif et contenu réel du système de design Skeleton

Utilisez un élément details du navigateur

L’explication complémentaire utilise une véritable structure details/summary avec l’utilitaire de divulgation. Le navigateur gère l’ouverture au clavier et au pointeur, tandis que Skeleton en fournit la présentation. Il ne s’agit pas du composant Svelte Accordion de Skeleton, et aucun composant API ni événement n’est inventé. Le paragraphe explique concrètement ce qui change et ce qui reste fixe.

Examinez l’état ouvert après la transition

La feuille de style peut animer le redimensionnement du contenu dévoilé. La vérification visuelle attend la fin de la transition avant de capturer l’état ouvert ; une capture d’écran immédiate peut montrer le contenu en pleine expansion. La validation de la mise en page inclut le paragraphe ouvert et la longue pile de polices calculée, afin que le panneau latéral ne soit pas validé uniquement lorsque son contenu conséquent est masqué.

Inspection responsive des thèmes du système de design Skeleton

Gardez les valeurs lisibles sur les écrans étroits

L’atelier passe à une disposition en colonne sous 720px, et le remplissage extérieur est réduit à 16px. Chaque nom et valeur de jeton calculé occupe sa propre ligne, afin que les longues piles de polices et les chaînes OKLCH puissent revenir à la ligne sans imposer de défilement horizontal. Les cinq échantillons de couleur restent visibles dans une grille compacte, et les contrôles de thème passent sur plusieurs lignes si nécessaire.

Testez différentes combinaisons de thèmes et d’états

Le test du navigateur enregistre la carte de lecture, passe par Mint et Rose, active l’apparence sombre, ouvre le contenu dévoilé, puis réinitialise la présentation. L’état enregistré doit être conservé tout au long de la séquence. Celle-ci a été vérifiée jusqu’à une largeur de 280px : le test couvre donc les valeurs longues réelles et le contenu développé, au lieu de se limiter à une capture de l’unique thème initial.

Sources Vite complètes du système de design Skeleton

Enregistrez les quatre fichiers source

L’exemple comprend index.html, style.css, main.js et vite.config.mjs. Installez les dépendances épinglées de Skeleton, Tailwind et Vite, puis exécutez Vite dans ce répertoire. La directive @source explicite pointe vers le HTML qui contient les classes utilitaires et garantit que le résultat compilé inclut les classes utilisées par l’espace de lecture. Aucun squelette de framework ne manque.

Choisissez séparément les composants du framework selon vos besoins

Exemples de composants du système de design 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}});