Blitzschnell
Responsive Interfaces in Minuten gestalten und anpassen. Native CSS-Variablen, vordefinierte Klassen, ein 12-Spalten-Grid für jedes semantische HTML-Element.
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/.
- Version
- 2.0.0
- Gzip
- 7.7 KB
- Brotli
- 6.7 KB
- License
- MIT or Apache-2.0
- Standard
- WCAG 2.2 AA
Die Kurzfassung
Skeletonic Stylus ist eine Open-Source-Stylus-CSS-Bibliothek für barrierefreies, schnelles und modulares UI-Styling.
Entstanden 2018 als persönliches Experiment im Ausliefern von weniger CSS — ohne auf die Ergonomie einer echten Komponentenbibliothek zu verzichten. Acht Jahre später ist das Ziel unverändert.
Was Skeletonic bietet
Leichtgewichtig
8,3 KB gzipped. Seiten laden schneller. Alle wesentlichen Bausteine bleiben enthalten.
Responsives Design
Entwickelt für Desktop und Mobilgeräte. Layouts passen sich jedem Gerät an. Touch-optimiert, durchgehend semantisches HTML.
Barrierefreiheit
WCAG 2.2 fest integriert: focus-visible-Ringe, AA-Kontrast, Skip-Link-Helfer, tastaturfreundliche Komponenten, Unterstützung für reduzierte Bewegung — kein zusätzliches Stylesheet, kein aria-*-Boilerplate.
Komponentenbibliothek
Modulare CSS-Komponenten und Stylus-Mixins. Buttons, Formulare, Cards, Alerts, Badges, Paletten und Animationen — sauber, modular, sofort einsatzbereit.
Frei & Open Source
Entworfen, entwickelt und gepflegt von Sebastien Rousseau. Doppelt lizenziert unter MIT oder Apache 2.0. Keine Gebühren, keine Lizenzkosten, auch für kommerzielle Nutzung.
Vergleich mit Alternativen
Ein einziges, selbst gehostetes Stylesheet deckt Typografie, Buttons, Formulare, Cards, Tabellen, Paletten, Animationen und Utility-Klassen ab. Kein JavaScript. Kein erforderlicher Build-Schritt. Keine Peer-Dependencies zu Bootstrap, Tailwind oder Bulma.
| Feature | Skeletonic Stylus | Bootstrap 5 | Tailwind CSS | Bulma |
|---|---|---|---|---|
| Gzipped-Größe | 8,3 KB | ~30 KB | ~10 KB (varies) | ~30 KB |
| WCAG-2.2-Konformität | Integriert | Teilweise | Manuell | Teilweise |
| Cascade Layers | Ja (@layer) |
Nein | Nein | Nein |
| Dark Mode | prefers-color-scheme |
Opt-in | Klassenbasiert | Opt-in |
| JavaScript erforderlich | Nein | Ja (Popper) | Nein | Nein |
| CycloneDX SBOM | Ja | Nein | Nein | Nein |
| Reduzierte Bewegung | Berücksichtigt | Teilweise | Manuell | Teilweise |
| Lizenz | MIT oder Apache 2.0 | MIT | MIT | MIT |
Prinzipien
- Barrierefreiheit ist die Basis, nicht die Kür. WCAG-2.2-Konformität ist in jede Komponente eingebaut, nicht als „Theme" nachgerüstet.
- Jedes Byte zählt. Ein einziges ausgeliefertes Stylesheet darf das Seitengewicht-Budget nicht sprengen. Das 8 KB-gzipped-Limit wird in der CI durchgesetzt.
- Cascade Layers schlagen Spezifitätskriege. Alles gezielt überschreiben — ohne
!important, ohne DOM-Reihenfolge-Tricks. - Stylus ist nach wie vor eine gute Wahl. Prägnant, ausdrucksstark und ermöglicht, die Bibliothek in ~3.000 lesbaren Zeilen zu halten.
- Langweilig ist ein Feature. Keine JS-Abhängigkeiten. Keine Build-Zeit-Magie. Keine brechenden Umbenennungen. CSS-Klassen, die genau das tun, was ihr Name sagt.
- In Sekunden anpassbar. Native CSS Custom Properties für Farben, Abstände, Typografie und Radien.
- Gehärtete Lieferkette. Signierte npm-Provenienz. Gepinnte Dependabot-Updates. CVE-2023-44270 über Overrides gepatcht.
Versionierung & Semver
Skeletonic Stylus folgt Semantic Versioning 2.0.
| Stufe | Wann | Beispiel |
|---|---|---|
| Major | Entfernen oder Umbenennen einer öffentlichen Klasse, eines Mixins oder Tokens | 1.x → 2.0 |
| Minor | Hinzufügen einer neuen Komponente, eines Mixins oder Tokens | 1.1 → 1.2 |
| Patch | Bugfixes, A11y-Feinschliff, Performance, Sicherheit | 1.1.6 → 2.0.0 |
Alle öffentlichen Klassennamen, alle CSS Custom Properties und alle exportierten Stylus-Mixins sind Teil der öffentlichen API. Eine brechende Änderung erhält einen Major-Bump und einen Migrationsleitfaden.
Verantwortung
Skeletonic Stylus wird entworfen, entwickelt und gepflegt von Sebastien Rousseau. Doppelt lizenziert unter MIT und Apache 2.0.
Issues, Ideen und Beiträge sind willkommen — zum Beitragsleitfaden.