Razend snel
Ontwerp en pas responsieve interfaces aan in minuten. Native CSS-variabelen, voorgedefinieerde klassen, een 12-koloms grid voor elk semantisch 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
De korte versie
Skeletonic Stylus is een open-source Stylus CSS-bibliotheek voor toegankelijke, snelle en modulaire UI-styling.
Ontstaan in 2018 als een persoonlijk experiment in minder CSS leveren zonder de ergonomie van een echte componentenbibliotheek op te geven. Acht jaar later is het doel onveranderd.
Wat het je biedt
Lichtgewicht
8,3 KB gzipped. Pagina's laden sneller. Alle essentieel bouwstenen blijven aanwezig.
Responsief ontwerp
Gebouwd voor desktop en mobiel. Layouts passen zich aan elk apparaat aan. Geoptimaliseerd voor aanraking, doorlopend semantische HTML.
Toegankelijkheid
WCAG 2.2 ingebouwd: focus-visible-ringen, AA-contrast, skip-link-helpers, toetsenbordvriendelijke componenten, ondersteuning voor beperkte beweging — geen extra stylesheet, geen aria-*-boilerplate.
Componentenbibliotheek
Modulaire CSS-componenten en Stylus-mixins. Knoppen, formulieren, kaarten, meldingen, badges, paletten en animaties — schoon, modulair, direct inzetbaar.
Gratis & open source
Ontworpen, gebouwd en onderhouden door Sebastien Rousseau. Dubbel gelicentieerd onder MIT of Apache 2.0. Geen kosten, geen licentiekosten, ook niet voor commercieel gebruik.
Hoe het zich verhoudt
Eén zelfgehost stylesheet dekt typografie, knoppen, formulieren, kaarten, tabellen, paletten, animaties en utility-klassen. Geen JavaScript. Geen buildstap vereist. Geen peer-afhankelijkheden van Bootstrap, Tailwind of Bulma.
| Kenmerk | Skeletonic Stylus | Bootstrap 5 | Tailwind CSS | Bulma |
|---|---|---|---|---|
| Gzipped-grootte | 8,3 KB | ~30 KB | ~10 KB (varies) | ~30 KB |
| WCAG-2.2-conformiteit | Ingebouwd | Gedeeltelijk | Handmatig | Gedeeltelijk |
| Cascade Layers | Ja (@layer) |
Nee | Nee | Nee |
| Donkere modus | prefers-color-scheme |
Opt-in | Klassegebaseerd | Opt-in |
| JavaScript vereist | Nee | Ja (Popper) | Nee | Nee |
| CycloneDX SBOM | Ja | Nee | Nee | Nee |
| Beperkte beweging | Gerespecteerd | Gedeeltelijk | Handmatig | Gedeeltelijk |
| Licentie | MIT of Apache 2.0 | MIT | MIT | MIT |
Principes
- Toegankelijkheid is de basis, niet de luxe. WCAG-2.2-conformiteit is in elke component ingebouwd, nooit als een "thema" achteraf toegevoegd.
- Elke byte telt. Een enkel geleverd stylesheet mag het paginagewicht-budget niet overschrijden. Het 8 KB-gzipped-plafond wordt afgedwongen in CI.
- Cascade Layers verslaan specificiteitsoorlogen. Overschrijf alles met vertrouwen — geen
!important, geen DOM-volgorde-trucs. - Stylus is nog steeds een goede keuze. Beknopt, expressief en houdt de bibliotheek op ~3.000 leesbare regels.
- Saai is een feature. Geen JS-afhankelijkheden. Geen build-time-magie. Geen brekende hernoemingen. CSS-klassen die precies doen wat ze zeggen.
- Binnen seconden aanpasbaar. Native CSS custom properties voor kleuren, afstanden, typografie en radii.
- Geharde toeleveringsketen. Ondertekende npm-herkomst. Vastgepinde Dependabot-updates. CVE-2023-44270 gepatcht via overrides.
Versiebeheer & semver
Skeletonic Stylus volgt Semantic Versioning 2.0.
| Stap | Wanneer | Voorbeeld |
|---|---|---|
| Major | Verwijderen of hernoemen van een publieke klasse, mixin of token | 1.x → 2.0 |
| Minor | Toevoegen van een nieuwe component, mixin of token | 1.1 → 1.2 |
| Patch | Bugfixes, a11y-verbeteringen, prestaties, beveiliging | 1.1.6 → 2.0.0 |
Alle publieke klassenamen, alle CSS custom properties en alle geëxporteerde Stylus-mixins maken deel uit van de publieke API. Een brekende wijziging verdient een major-bump en een migratiegids.
Beheer
Skeletonic Stylus wordt ontworpen, gebouwd en onderhouden door Sebastien Rousseau. Dubbel gelicentieerd onder MIT en Apache 2.0.
Issues, ideeën en bijdragen zijn welkom — bekijk de bijdragegids.