Blixtsnabbt
Designa och anpassa responsiva granssnitt pa minuter. Nativa CSS-variabler, fordefinierade klasser, ett 12-kolumners rutsystem for varje semantiskt 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
Kortversionen
Skeletonic Stylus ar ett Stylus-CSS-bibliotek med oppen kallkod for tillganglig, snabb och modular UI-styling.
Det foddes 2018 som ett personligt experiment i att leverera mindre CSS utan att ge upp ergonomin hos ett riktigt komponentbibliotek. Atta ar senare ar malet oforandrat.
Vad det ger dig
Lattiktat
8,3 KB gzippat. Sidor laddas snabbare. Alla viktiga byggstenar finns kvar.
Responsiv design
Utformat for desktop och mobil. Layouter anpassar sig till alla enheter. Touch-optimerat, genomgaende semantisk HTML.
Tillganglighet
WCAG 2.2 inbyggt: focus-visible-ringar, AA-kontrast, skip-link-hjalp, tangentbordsvanliga komponenter, stod for reducerad rorelse — inget extra stylesheet, inget aria-*-boilerplate.
Komponentbibliotek
Modulara CSS-komponenter och Stylus-mixins. Knappar, formular, kort, notiser, marken, paletter och animationer — rent, modulart, redo att anvanda.
Fri & oppen kallkod
Designat, byggt och underhallet av Sebastien Rousseau. Dubbellicensierat under MIT eller Apache 2.0. Inga avgifter, inga licenskostnader, aven for kommersiellt bruk.
Jamforelse med alternativ
Ett enda, egenhostat stylesheet tacker typografi, knappar, formular, kort, tabeller, paletter, animationer och utility-klasser. Inget JavaScript. Inget byggsteg kravs. Inga peer-beroenden till Bootstrap, Tailwind eller Bulma.
| Funktion | Skeletonic Stylus | Bootstrap 5 | Tailwind CSS | Bulma |
|---|---|---|---|---|
| Gzippad storlek | 8,3 KB | ~30 KB | ~10 KB (varies) | ~30 KB |
| WCAG 2.2-uppfyllnad | Inbyggt | Delvis | Manuellt | Delvis |
| Cascade layers | Ja (@layer) |
Nej | Nej | Nej |
| Morkt lage | prefers-color-scheme |
Opt-in | Klassbaserat | Opt-in |
| JavaScript kravs | Nej | Ja (Popper) | Nej | Nej |
| CycloneDX SBOM | Ja | Nej | Nej | Nej |
| Reducerad rorelse | Respekteras | Delvis | Manuellt | Delvis |
| Licens | MIT eller Apache 2.0 | MIT | MIT | MIT |
Principer
- Tillganglighet ar golvet, inte taket. WCAG 2.2-uppfyllnad ar inbyggt i varje komponent, inte paklistrat som ett "tema".
- Varje byte raknas. Ett enda utlevererat stylesheet ska inte spranga sidviktsbudgeten. Taket pa 8 KB gzippat tillapas i CI.
- Cascade layers slar specificitetskrig. Overskriv vad som helst med sjalvfortroende — inget
!important, inga DOM-ordningstrick. - Stylus ar fortfarande bra. Koncist, uttrycksfullt och haller biblioteket pa ~3 000 lasbara rader.
- Tradigt ar en funktion. Inga JS-beroenden. Ingen magi vid byggtid. Inga brotande namnbyten. CSS-klasser som gor exakt det deras namn sager.
- Anpassningsbart pa sekunder. Nativa CSS custom properties for farger, avstand, typografi och radier.
- Hardad leveranskedja. Signerad npm-proveniens. Lasta Dependabot-uppdateringar. CVE-2023-44270 patchad via overrides.
Versionshantering & semver
Skeletonic Stylus foljer Semantic Versioning 2.0.
| Niva | Nar | Exempel |
|---|---|---|
| Major | Borttagning eller namnbyte av en offentlig klass, mixin eller token | 1.x → 2.0 |
| Minor | Tillagg av en ny komponent, mixin eller token | 1.1 → 1.2 |
| Patch | Buggfixar, a11y-finjustering, prestanda, sakerhet | 1.1.6 → 2.0.0 |
Alla offentliga klassnamn, alla CSS custom properties och alla exporterade Stylus-mixins ar del av det offentliga API:et. En brotande andring far en major-bump och en migrationsguide.
Forvaltning
Skeletonic Stylus ar designat, byggt och underhallet av Sebastien Rousseau. Dubbellicensierat under MIT och Apache 2.0.
Arenden, ideer och bidrag ar valkomna — se bidragsguiden.