Sistema di design Skeleton.

Sistema di progettazione sistema di design Skeleton: fondamenti e livelli del framework CSS

Scegli il livello che viene effettivamente eseguito

La postazione di lettura usa @skeletonlabs/skeleton 5.0.1, le utility Tailwind CSS e tre temi inclusi. Non carica skeleton-svelte né skeleton-react. I pulsanti, il badge, il chip, la card e la presentazione a scomparsa sono vere utility CSS; il selettore del tema e la logica dello stato salvato sono originali JavaScript. Questa separazione consente di eseguire l’esempio completo come una piccola pagina Vite, senza implicare un runtime di componenti del framework.

Compila le utilità invece di importare CSS grezzo nel browser

Il sorgente di Skeleton contiene direttive Tailwind come @utility e @variant. La configurazione Vite fornita include @tailwindcss/vite e il foglio di stile importa Tailwind prima di Skeleton e dei temi scelti. Un semplice collegamento al pacchetto sorgente non riprodurrebbe gli stili compilati. Sono inclusi tutti i sorgenti della build, così l’anteprima non dipende da CSS generati nascosti.

1. Importa Tailwind CSS.
2. Importa le utility di Skeleton.
3. Importa ogni tema che vuoi selezionare.
4. Compila il foglio di stile con il plugin Vite di Tailwind.

Skeleton Selezione dei temi del sistema di design e valori effettivi

Importa esplicitamente ogni tema disponibile

Cerberus, Mint e Rose vengono importati ciascuno dal percorso dei temi del pacchetto. Selezionare un nome modifica data-theme sull’elemento radice, attivando le dichiarazioni delle variabili corrispondenti. Il riferimento elenca i campioni effettivi della palette principale, gli estremi delle superfici, le dichiarazioni di spaziatura, raggio e caratteri per ogni tema. Questi valori vengono letti dai file bloccati a una versione specifica, anziché essere generati sostituendo un unico colore d’accento.

• Cerberus è la presentazione iniziale.
• Mint e Rose sono temi distinti, importati separatamente.
• La selezione del tema modifica data-theme, non una copia dell’albero dei contenuti.

Mantieni invariati tutti i contenuti durante il confronto

La scheda di lettura, la lista di controllo e lo stato salvato restano intatti quando cambia il tema. Dopo ogni selezione, il pannello laterale legge le variabili calcolate dall’elemento radice e mostra i valori effettivamente risolti dal browser. Il confronto è quindi significativo: tipografia, forme e palette possono cambiare mentre si valuta lo stesso contenuto e stato.

Aspetto scuro e schema di colori di sistema di design Skeleton

Collega la variante scura al controllo effettivo

Il foglio di stile definisce una variante scura basata su classi, corrispondente a .dark sull’elemento radice o sui suoi discendenti. Le regole globali di Skeleton usano questa variante per impostare color-scheme. Il pulsante di aspetto modifica quindi le condizioni usate dalle combinazioni di superfici light-dark(). Un interruttore che cambia una classe ma lascia invariata la variante predefinita di Tailwind, basata sulle preferenze del sistema, può indicare la modalità scura mentre le superfici restano chiare.

Usa un preset che resti leggibile

L’azione di aspetto usa preset-tonal-primary, mentre l’azione di lettura usa preset-filled-primary-500. I preset regolano il rapporto tra superficie e primo piano; un token di colore, da solo, non garantisce un contrasto leggibile. Dopo il passaggio a Rose, è stato verificato l’effettivo aspetto nello stato scuro, compresi il testo del controllo e il controllo di espansione: il semplice cambio di classe non è stato considerato una prova di correttezza visiva.

Skeleton Tipografia, forme e layout del sistema di design

Separa le dichiarazioni del tema dalla gerarchia originale

Cerberus dichiara un carattere di sistema, mentre Rose include uno stack di fallback diverso. Questo studio non carica caratteri da fonti remote: il browser usa i caratteri disponibili nello stack selezionato. Il layout originale assegna esplicitamente un’intestazione di pagina da 36px e un’intestazione di lettura da 28px. Queste scelte compositive restano distinte dalle dichiarazioni del tema relative alla famiglia e al peso del carattere.

Lascia che raggio e spaziatura provengano dal tema

Stato di lettura e ripristino della presentazione del sistema di design Skeleton

Mantieni il salvataggio locale e reversibile

L’azione di lettura attiva o disattiva aria-pressed, modifica l’etichetta e aggiorna un messaggio di stato leggibile. Salva solo un valore booleano in memoria per questa pagina. Non ci sono account, persistenza o richieste di rete. Lo stesso stato rimane visibile anche dopo il cambio di tema, così chi legge può confrontare uno stato attivo tra diverse palette.

Reimposta la presentazione senza eliminare lo stato di lettura

Il ripristino della presentazione ripristina Cerberus e l’aspetto chiaro, ma lascia intenzionalmente invariato il valore booleano salvato. L’etichetta ne descrive l’ambito. Un’azione separata può rimuovere la scheda di lettura dalla postazione locale. Confondere queste due azioni farebbe sì che un innocuo ripristino visivo elimini inaspettatamente la scelta corrente dell’utente.

Sistema di design Skeleton: elementi nativi di espansione e contenuti reali

Usa un elemento details del browser

La spiegazione di supporto è una vera struttura details/summary con l’utilità disclosure. L’apertura tramite tastiera e puntatore è gestita dal browser, mentre Skeleton ne fornisce la presentazione. Non si tratta del componente Svelte Accordion di Skeleton e non vengono inventati componenti API o eventi. Il paragrafo spiega concretamente cosa cambia e cosa rimane invariato.

Esamina lo stato aperto dopo la transizione

Il foglio di stile può animare il ridimensionamento del contenuto espanso. Per la verifica visiva si attende la fine della transizione prima di acquisire lo stato aperto; uno screenshot immediato potrebbe catturare il contenuto mentre si sta ancora espandendo. La convalida del layout include il paragrafo aperto e la lunga pila di caratteri calcolata, così il pannello laterale non può superare il controllo soltanto quando il suo contenuto sostanziale è nascosto.

Sistema di design Skeleton Ispezione responsive dei temi del sistema di progettazione

Mantieni i valori leggibili sugli schermi stretti

L’area di lavoro si dispone in colonna sotto i 720px e il padding esterno si riduce a 16px. Ogni nome e valore del token calcolato occupa una riga a sé, così le famiglie di font lunghe e le stringhe OKLCH vanno a capo senza richiedere lo scorrimento orizzontale. I cinque campioni di colore restano visibili in una griglia compatta e i controlli del tema vanno a capo su più righe.

Verifica le combinazioni di tema e stato

Il test nel browser salva la scheda di lettura, passa da Mint a Rose, attiva l’aspetto scuro, apre il riquadro a scomparsa e infine ripristina la presentazione. Lo stato salvato deve conservarsi per tutta la sequenza. Questa sequenza è stata verificata fino a 280px, così il test copre i valori lunghi reali e il contenuto espanso, anziché una singola schermata del tema iniziale.

Sistema di design Skeleton Sorgenti Vite complete del sistema di progettazione

Salva tutti e quattro i file sorgente

L’esempio include index.html, style.css, main.js e vite.config.mjs. Installa le dipendenze Skeleton, Tailwind e Vite con versioni bloccate, quindi esegui Vite in quella directory. La direttiva esplicita @source punta a HTML, che contiene le classi utility, assicurando che l’output compilato includa quelle usate dalla postazione di lettura. Non manca alcuna struttura iniziale del framework.

Scegli separatamente i componenti del framework quando necessario

Esempi di componenti del sistema di progettazione sistema di 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}});