Komponenten — Skeletonic Stylus

Translation note (2026-04-30). v2.0.0 adds RTL support and a refreshed 2026 framework comparison. The English source is the canonical reference while these translations catch up. See https://skeletonic.io/about/ · https://skeletonic.io/components/ · https://skeletonic.io/benchmarks/.

Jedes Beispiel auf dieser Seite wird mit genau dem Stylesheet gerendert, das hier vorgestellt wird. Kein Praeprozessor. Kein JavaScript. Keine zusaetzlichen Abhaengigkeiten. Jeden Ausschnitt in eine leere HTML-Datei kopieren — fertig.

Eingaben

Interaktive Elemente, die Besuchende anklicken, antippen oder fokussieren, um die Seite zu steuern.

Schaltflaechen

Ein semantischer, thematisierbarer Aktionstrigger. Volle und Outline-Varianten liefern je sechs Markenfarben.

<a href="#" class="button primary">Primary</a>
<a href="#" class="button secondary">Secondary</a>
<a href="#" class="button tertiary">Tertiary</a>

Primaer Sekundaer Tertiaer

Outline-Varianten:

<a href="#" class="button primary-outline">Outline</a>
<a href="#" class="button secondary-outline">Outline</a>

Outline Outline

Hinweis zur Barrierefreiheit. Jede .button-Variante hat einen :focus-visible-Ring und eine Mindest-Trefferflaeche von 24×24 px (WCAG 2.2 SC 2.5.8). <button type="button"> fuer seiteninternes Verhalten verwenden, <a href> ausschliesslich fuer Navigation.

Badges

Ein kompaktes Label fuer Status, Anzahl oder Kategorie. Die Schriftgroesse ist fixiert, damit Badges sich am umgebenden Text ausrichten.

<span class="badge">Default</span>
<span class="badge primary">Primary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

Standard Primaer Erfolg Warnung Gefahr

Hinweis zur Barrierefreiheit. Badges sind standardmaessig dekorativ. Wenn das Badge das einzige Signal traegt (z. B. eine Anzahl ungelesener Nachrichten), in einen visuell versteckten Helfer einbetten: <span class="visually-hidden">3 ungelesene Nachrichten</span>.

Rueckmeldungen

Oberflaechen, die Besuchende informieren, dass etwas geschehen ist — oder bald geschehen wird.

Hinweise

Statusmeldungen mit semantischer Bedeutung. In v2.0.0 ist jede Variante explizit unter .alert-{primary,secondary,info,success,warning,error} benannt, damit die Variantenklasse nicht mit Zustandsklassen anderswo auf der Seite kollidiert.

<div class="alert alert-primary" role="alert">
  <strong>Achtung.</strong> Dies ist ein primaerer Hinweis.
</div>
<div class="alert alert-success" role="status">
  <strong>Gespeichert.</strong> Die Aenderungen wurden uebernommen.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Vorsicht.</strong> Diese Aktion betrifft gemeinsam genutzten Zustand.
</div>
<div class="alert alert-error" role="alert">
  <strong>Fehler.</strong> Das Formular konnte nicht gespeichert werden.
</div>

Achtung. Dies ist ein primaerer Hinweis.

Gespeichert. Die Aenderungen wurden uebernommen.

Vorsicht. Diese Aktion betrifft gemeinsam genutzten Zustand.

Fehler. Das Formular konnte nicht gespeichert werden.

Hinweis zur Barrierefreiheit. role="alert" fuer Meldungen verwenden, die sofortige Aufmerksamkeit erfordern (Fehler, Warnungen), und role="status" fuer nicht dringende Bestaetigungen. Beide machen die Meldung fuer assistive Technologien sofort sichtbar.

Oberflaechen

Container, die zusammengehoerige Inhalte rahmen und gruppieren.

Karten

Ein umrandeter, mit Abstand versehener Container fuer eine einzelne zusammenhaengende Einheit. Mit dem flex-N-Raster kombinieren fuer responsive Kartenwände.

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Lightweight</h3>
      <p>38.8 KB minified, 7.7 KB gzipped.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Accessible</h3>
      <p>WCAG 2.2 conformant out of the box.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Modular</h3>
      <p>Cascade-layered for easy overrides.</p>
    </div>
  </article>
</section>

Leichtgewichtig

45,7 KB minifiziert, 8,3 KB gzipped.

Barrierefrei

WCAG 2.2-konform ab Werk.

Modular

Cascade-Layer fuer einfaches Ueberschreiben.

Hinweis zur Barrierefreiheit. Jede Karte in ein semantisches Landmark einbetten (<article>, <section>) und den Inhalt mit einer Ueberschrift (<h3>) beginnen. Screenreader-Nutzende koennen die Kartenliste dann als vollwertige navigierbare Bereiche durchlaufen.

Formulare

Eingabefelder, Labels und Gruppierungen zur Erfassung von Benutzerdaten.

Formularfelder

Labels, Textfelder, Textbereiche, Fieldsets und Legenden — alle einheitlich zum restlichen Designsystem dimensioniert.

<form>
  <label for="name">Name</label>
  <input id="name" type="text" required>

  <label for="email">E-Mail</label>
  <input id="email" type="email" required class="input-primary">

  <label for="msg">Nachricht</label>
  <textarea id="msg" rows="4"></textarea>

  <button type="submit" class="button primary">Senden</button>
</form>

Name

E-Mail

Nachricht

Hinweis zur Barrierefreiheit. Jedes Eingabefeld muss ein programmatisch verknuepftes <label for="..."> haben. Zusammengehoerige Steuerelemente in ein <fieldset> mit einer <legend> einbetten. Pflichtfelder mit required (und einem sichtbaren Sternchen im Label-Text) kennzeichnen.

Layout

Strukturelle Grundbausteine — Raster, Container, Kopfzeile — die das gesamte Seitenlayout bilden.

Raster

Ein responsives flex-N-Raster (1 bis 12 Spalten), basierend auf Flexbox. Der .row-Elterncontainer fuegt Abstaende ein und umbricht automatisch.

<div class="row">
  <div class="flex-6">Half</div>
  <div class="flex-6">Half</div>
</div>
<div class="row">
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
</div>

Haelfte

Drittel

Hinweis zur Barrierefreiheit. Die visuelle Reihenfolge sollte der DOM-Reihenfolge entsprechen. Zeilen nicht mit flex-direction: row-reverse oder order: umordnen — Screenreader und Tastaturnutzende folgen dem Quelltext, nicht der Darstellung.

Eine vollstaendige, rein CSS-basierte Kopfzeile mit responsivem Hamburger-Toggle. Kein JavaScript. Den folgenden Ausschnitt in eine leere HTML-Seite kopieren, die bereits skeletonic.min.css laedt — das Menue klappt sich korrekt ein, aus und haelt den Fokus selbststaendig.

<style>
  .sk-header{position:relative;display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border:1px solid #e4e4e7;border-radius:.5rem;background:#fff;}
  .sk-header .sk-brand{font-weight:600;color:#0a0a0a;text-decoration:none;}
  .sk-header .sk-toggle{position:absolute;left:-9999px;}
  .sk-header .sk-burger{display:none;margin-left:auto;cursor:pointer;padding:.625rem .75rem;border:1px solid #e4e4e7;border-radius:.375rem;font-size:1.125rem;line-height:1;min-width:2.75rem;min-height:2.75rem;}
  .sk-header .sk-burger:focus-within,.sk-header .sk-toggle:focus-visible+.sk-burger{outline:2px solid hsl(210,100%,42%);outline-offset:2px;}
  .sk-header .sk-menu{list-style:none;display:flex;gap:.25rem;margin:0 0 0 auto;padding:0;}
  .sk-header .sk-menu a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem .875rem;border-radius:.375rem;color:#1a1a1a;text-decoration:none;}
  .sk-header .sk-menu a:hover{background:#f4f4f5;}
  @media (max-width:640px){
    .sk-header .sk-burger{display:inline-flex;align-items:center;justify-content:center;}
    .sk-header .sk-menu{display:none;flex-direction:column;gap:0;position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid #e4e4e7;border-radius:.5rem;padding:.375rem;box-shadow:0 4px 24px rgba(0,0,0,.08);z-index:10;}
    .sk-header .sk-menu a{padding:.75rem 1rem;border-bottom:1px solid #f4f4f5;}
    .sk-header .sk-menu li:last-child a{border-bottom:0;}
    .sk-header .sk-toggle:checked ~ .sk-menu{display:flex;}
  }
</style>
<header class="sk-header">
  <a class="sk-brand" href="#">Marke</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Navigation umschalten">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Dokumentation</a></li>
    <li><a href="#">Komponenten</a></li>
    <li><a href="#">Ueber uns</a></li>
  </ul>
</header>

Marke

Hinweis zur Barrierefreiheit. Die versteckte Checkbox bleibt in der Tab-Reihenfolge, damit Tastaturnutzende das Menue mit Leertaste oder Eingabetaste oeffnen koennen. Das <label> traegt aria-hidden, da die Checkbox selbst die barrierefreie Namensquelle ist. Das Browserfenster unter 640 px verkleinern, um den Hamburger-Toggle in Aktion zu sehen.

Alle Hinweise zur Barrierefreiheit ansehen → · Farbpaletten durchstoebern →