Skeleton-Designsystem.

Designsystem Skeleton: Grundlagen und Framework-Ebenen CSS

Wählen Sie die Ebene, die tatsächlich ausgeführt wird

Die Leseoberfläche verwendet @skeletonlabs/skeleton 5.0.1, dessen Tailwind-Utilities CSS und drei mitgelieferte Themes. Sie lädt weder skeleton-svelte noch skeleton-react. Die Darstellung von Schaltflächen, Badge, Chip, Karte und aufklappbarem Bereich basiert auf tatsächlichen CSS-Utilities; der Theme-Selektor und die Logik für den gespeicherten Status sind eigene Entwicklungen von JavaScript. Dank dieser Abgrenzung lässt sich das vollständige Beispiel als kleine Vite-Seite ausführen, ohne eine Laufzeit für Framework-Komponenten vorzutäuschen.

Utilities kompilieren, statt rohes CSS im Browser zu importieren

Der Quellcode von Skeleton enthält Tailwind-Direktiven wie @utility und @variant. Die bereitgestellte Vite-Konfiguration bindet @tailwindcss/vite ein, und das Stylesheet importiert Tailwind vor Skeleton und den ausgewählten Themes. Ein direkter Link zum Quellpaket würde die kompilierten Styles nicht wiedergeben. Der vollständige Build-Quellcode ist enthalten, damit die Vorschau nicht von verborgenen generierten CSS abhängt.

1. Tailwind CSS importieren.
2. Skeleton-Utilities importieren.
3. Importieren Sie jedes Theme, das Sie auswählen möchten.
4. Kompilieren Sie das Stylesheet mit dem Tailwind-Vite-Plugin.

Designsystem Skeleton: Theme-Auswahl und tatsächliche Werte

Jedes verfügbare Theme explizit importieren

Cerberus, Mint und Rose werden jeweils über den Themes-Pfad des Pakets importiert. Bei der Auswahl eines Namens wird data-theme am Root-Element geändert, wodurch die entsprechenden Variablendeklarationen ausgewählt werden. Die Referenz führt tatsächliche Beispiele der Primärpalette, die äußersten Oberflächenfarben sowie Abstands-, Radius- und Schriftdeklarationen für jedes Theme auf. Diese Werte stammen aus den festgelegten Dateien und werden nicht durch den Austausch einer einzelnen Akzentfarbe erzeugt.

• Cerberus ist die anfängliche Darstellung.
• Mint und Rose sind eigenständige Themes, die tatsächlich separat importiert werden.
• Bei der Theme-Auswahl wird data-theme geändert, nicht ein kopierter Inhaltsbaum.

Beim Vergleichen dieselben vollständigen Inhalte beibehalten

Lesekarte, Checkliste und gespeicherter Status bleiben beim Wechsel des Themes erhalten. Nach jeder Auswahl liest das Seitenpanel die berechneten Variablen aus dem Root-Element aus und zeigt, welche Werte der Browser tatsächlich ermittelt hat. So wird der Vergleich aussagekräftig: Typografie, Form und Farbpalette können sich ändern, während Leserinnen und Leser dieselben Inhalte und denselben Status beurteilen.

Designsystem Skeleton: Dunkle Darstellung und color-scheme

Die dunkle Variante an die tatsächliche Steuerung anbinden

Das Stylesheet definiert eine klassenbasierte dunkle Variante, die .dark am Root-Element oder an dessen Nachfahren entspricht. Die globalen Regeln von Skeleton verwenden diese Variante, um color-scheme festzulegen. Die Schaltfläche für das Erscheinungsbild ändert daher die Bedingungen, die für light-dark()-Oberflächenkombinationen gelten. Ändert ein Umschalter zwar eine Klasse, lässt Tailwinds standardmäßige, medienbasierte Variante aber unverändert, kann die Anzeige „Dunkel“ melden, während die Oberflächen tatsächlich hell bleiben.

Eine gut lesbare Voreinstellung verwenden

Für die Darstellung wird preset-tonal-primary verwendet, für die Leseaktion preset-filled-primary-500. Voreinstellungen bestimmen das Verhältnis zwischen Oberfläche und Vordergrund; ein Farbtoken allein sorgt nicht für lesbaren Kontrast. Der tatsächlich gerenderte dunkle Zustand wurde nach dem Wechsel zu Rose geprüft, einschließlich des Textes in der Steuerung und des aufklappbaren Bereichs. Eine erfolgreiche Klassenänderung wurde nicht einfach als Beleg für die visuelle Korrektheit gewertet.

Designsystem Skeleton: Typografie, Form und Layout

Theme-Deklarationen von der eigens festgelegten Hierarchie trennen

Cerberus deklariert eine Systemschrift, während Rose eine andere Fallback-Schriftliste enthält. Diese Untersuchung lädt keine entfernte Schriftart herunter; der Browser verwendet verfügbare Schriftarten aus der ausgewählten Liste. Im eigens festgelegten Layout erhalten die Überschrift der Seite ausdrücklich eine Größe von 36px und die Überschrift der Leseansicht 28px. Diese gestalterischen Entscheidungen bleiben von den eigenen Deklarationen des Themes für Schriftfamilie und Schriftstärke getrennt.

Radius und Abstände vom Theme bestimmen lassen

Designsystem Skeleton: Lesezustand und Darstellung zurücksetzen

Speichern lokal und umkehrbar halten

Die Leseaktion wechselt aria-pressed, ändert ihre Beschriftung und aktualisiert eine verständliche Statusmeldung. Sie speichert für diese Seite lediglich einen booleschen Wert im Arbeitsspeicher. Es gibt weder ein Konto noch dauerhafte Speicherung oder Netzwerkanfragen. Derselbe Status bleibt nach einem Theme-Wechsel sichtbar, sodass Leserinnen und Leser einen aktiven Zustand in verschiedenen Farbpaletten vergleichen können.

Darstellung zurücksetzen, ohne den Lesezustand zu löschen

Beim Zurücksetzen der Darstellung werden Cerberus und die helle Darstellung wiederhergestellt, der gespeicherte boolesche Wert bleibt jedoch bewusst unverändert. Die Beschriftung gibt diesen Umfang an. Mit einer separaten Aktion lässt sich die Lesekarte von der lokalen Leseoberfläche entfernen. Würden diese beiden Aktionen zusammengelegt, könnte ein unbedenkliches Zurücksetzen der Darstellung unerwartet die aktuelle Auswahl einer Person verwerfen.

Designsystem Skeleton: Nativer aufklappbarer Bereich und echte Inhalte

Ein details-Element des Browsers verwenden

Die ergänzende Erklärung besteht aus einer echten details/summary-Struktur mit dem Disclosure-Utility. Das Öffnen per Tastatur oder Zeiger wird vom Browser bereitgestellt, während Skeleton für die Darstellung sorgt. Dies ist nicht die Svelte-Accordion-Komponente von Skeleton; es werden weder ein Komponenten-API noch ein Ereignis vorgetäuscht. Der Absatz erklärt konkret, was sich ändert und was unverändert bleibt.

Den geöffneten Zustand nach dem Übergang prüfen

Das Stylesheet kann die Größe des aufklappbaren Bereichs animieren. Vor der Aufnahme des geöffneten Zustands wird abgewartet, bis der Übergang abgeschlossen ist; ein sofortiger Screenshot kann den Inhalt mitten im Aufklappen erfassen. Bei der Layoutprüfung werden auch der geöffnete Absatz und die lange, berechnete Schriftliste berücksichtigt, damit das Seitenpanel nicht nur dann besteht, wenn sein umfangreicher Inhalt verborgen ist.

Designsystem Skeleton: Responsives Theme-Inspektionswerkzeug

Werte auf schmalen Bildschirmen gut lesbar halten

Unter 720px wird der Arbeitsbereich gestapelt, und der Außenabstand verringert sich auf 16px. Jeder berechnete Tokenname und -wert erhält eine eigene Zeile. So können lange Schriftfamilien und OKLCH-Zeichenfolgen umbrochen werden, statt horizontales Scrollen zu erzwingen. Die fünf Farbmuster bleiben in einem kompakten Raster sichtbar, und die Theme-Steuerelemente werden auf zusätzliche Zeilen umgebrochen.

Theme- und Statuskombinationen testen

Der Browsertest speichert die Lesekarte, wechselt zwischen Mint und Rose, aktiviert die dunkle Darstellung, öffnet den Aufklappbereich und setzt anschließend die Darstellung zurück. Der gespeicherte Zustand muss dabei erhalten bleiben. Diese Abfolge wurde bis hinunter zu 280px geprüft. So testet sie echte lange Werte und aufgeklappte Inhalte statt nur eines Screenshots des initialen Themes.

Skeleton-Designsystem: vollständiger Vite-Quellcode

Alle vier Quelldateien speichern

Das Beispiel umfasst index.html, style.css, main.js und vite.config.mjs. Installieren Sie die festgelegten Abhängigkeiten für Skeleton, Tailwind und Vite und führen Sie anschließend Vite in diesem Verzeichnis aus. Die explizite @source verweist auf die HTML mit den Utility-Klassen. So enthält die kompilierte Ausgabe auch die Klassen, die am Lesetisch verwendet werden. Ein Framework-Grundgerüst fehlt nicht.

Framework-Komponenten bei Bedarf separat auswählen

Skeleton-Designsystem: Komponentenbeispiele

<!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}});