Lightning fast
Design and customise responsive interfaces in minutes. Native CSS variables, predefined classes, a 12-column grid covering every semantic HTML element.
- Version
- 2.0.0
- Gzip
- 7.7 KB
- Brotli
- 6.7 KB
- License
- MIT or Apache-2.0
- Standard
- WCAG 2.2 AA
The short version
Skeletonic Stylus is an open-source Stylus CSS library for accessible, fast, modular UI styling.
Born in 2018 as a personal experiment in shipping less CSS without giving up the ergonomics of a real component library. Eight years later, the goal is unchanged.
What it gives you
Lightweight
7.7 KB gzip, 6.7 KB brotli — measured against the actual minified CDN bundle, not a marketing approximation. See the numbers.
Responsive design
Crafted for desktop and mobile. Layouts adapt to any device. Touch-optimised, semantic HTML throughout.
Accessibility
WCAG 2.2 baked in: focus-visible rings, AA contrast, skip-link helpers, keyboard-friendly components, reduced-motion support — no extra stylesheet, no aria-* boilerplate.
Component library
Modular CSS components and Stylus mixins. Buttons, forms, cards, alerts, badges, palettes and animations — clean, modular, ready to drop in.
Free & open source
Designed, built and maintained by Sebastien Rousseau. Dual-licensed under MIT or Apache 2.0. No fees, no licensing costs, even for commercial use.
How it compares
One self-hosted stylesheet covers typography, buttons, forms, cards, tables, palettes, animations and utility classes. No JavaScript. No build step required.
The matrix below is measured, not marketed: gzip and brotli numbers are
from the framework benchmark (gzip -9 / brotli -q 11
on the canonical jsDelivr bundle as of 2026-04-30). Where rows are
honest losses for Skeletonic, they're called out plainly.
| Capability | Skeletonic Stylus 2.0.0 | Pico CSS 2.1 | Bulma 1.0 | Bootstrap 5.3 | Tailwind v4 |
|---|---|---|---|---|---|
| Gzip (canonical CDN bundle) | 7.7 KB | 11.6 KB | 64.9 KB | 30.9 KB | varies (purged build only) |
| Brotli | 6.7 KB | 10.1 KB | 36.3 KB | 23.0 KB | varies |
| No build step required | ✅ Yes | ✅ Yes | ❌ Sass | ✅ Yes | ❌ Oxide / PostCSS |
| Class-based authoring | ✅ Yes | ❌ Classless only | ✅ Yes | ✅ Yes | ✅ Utility-first |
| JavaScript-free components | ✅ Yes | ✅ Yes | ✅ Yes | ❌ Popper + BS JS | ✅ CSS-only |
Cascade layers (@layer) |
✅ Yes | ❌ No | ❌ No | ❌ No | ✅ v4 |
| CSS logical properties (RTL) | ✅ Yes (95 declarations) | ⚠️ Partial | ⚠️ Partial | ⚠️ Partial | ✅ Yes |
Auto dark mode (prefers-color-scheme) |
✅ Yes | ✅ Yes | ⚠️ Opt-in | ⚠️ Opt-in | ⚠️ Class-based |
prefers-reduced-motion honoured |
✅ Animations gated | ⚠️ Partial | ⚠️ Manual | ⚠️ Partial | ⚠️ Manual |
forced-colors (Windows HCM) fallbacks |
✅ Yes | ⚠️ Partial | ❌ No | ❌ No | ⚠️ Manual |
| CycloneDX SBOM in release | ✅ dist/sbom.json |
❌ No | ❌ No | ❌ No | ❌ No |
| WCAG 2.2 axe-core CI gate | ✅ Zero violations | ⚠️ Manual | ⚠️ Manual | ⚠️ Manual | ⚠️ Manual |
| OKLCH colour system | ✅ All tokens | ❌ HSL/sRGB | ❌ HSL/Sass | ❌ HSL | ⚠️ Partial |
| Native CSS Grid utilities | ✅ .grid, .grid-cols-N, .col-span-N |
❌ Classless | ⚠️ Sass-only | ✅ Yes | ⚠️ via plugins |
Container queries (@container) |
✅ .card |
❌ No | ❌ No | ❌ No | ⚠️ Plugin |
| View Transitions / scroll-driven animation | ✅ Native utilities | ❌ No | ❌ No | ❌ No | ❌ No |
| License | MIT OR Apache‑2.0 | MIT | MIT | MIT | MIT |
Where Skeletonic loses, honestly. Pico CSS is smaller in gzip terms
if you're building a content-only site that fits the classless model —
but you give up the grid system, the utility classes, and the option to
mix in your own component styles without specificity wars. Tailwind v4
purged is smaller than Skeletonic in absolute terms, but only after
adding the Oxide build pipeline to your project; the no-build Tailwind
Play CDN (cdn.tailwindcss.com) ships 123 KB gzipped of JS at
runtime, ~15× Skeletonic. Pick the trade-off that matches the project.
Principles
- Accessibility is the floor, not the ceiling. WCAG 2.2 conformance is baked into every component, never bolted on as a "theme".
- Bytes matter, but not in isolation. A single shipped stylesheet shouldn't blow your page-weight budget — but every "smaller" competitor ships either a build pipeline (Tailwind, Bulma) or the wrong shape (Pico is classless, Open Props is tokens-only). 8 KB gzip / 7 KB brotli ceilings enforced in CI.
- Cascade layers beat specificity wars. Override anything with
confidence — no
!important, no DOM-order tricks. - Stylus is still good. Terse, expressive, and lets the library stay in ~3,000 readable lines.
- Boring is a feature. No JS dependencies. No build-time magic. No breaking renames. CSS classes that do exactly what they say.
- Themeable in seconds. Native CSS custom properties for colours, spacing, type and radii.
- Supply-chain hardened. Signed npm provenance. Pinned Dependabot updates. CVE-2023-44270 patched via overrides.
Versioning & semver
Skeletonic Stylus follows Semantic Versioning 2.0.
| Bump | When | Example |
|---|---|---|
| Major | Removing or renaming a public class, mixin, or token | 1.x → 2.0 |
| Minor | Adding a new component, mixin, or token | 1.1 → 1.2 |
| Patch | Bug fixes, a11y polish, performance, security | 1.1.6 → 2.0.0 |
All public class names, all CSS custom properties, and all exported Stylus mixins are part of the public API. A breaking change earns a major bump and a migration guide.
Stewardship
Skeletonic Stylus is designed, built, and maintained by Sebastien Rousseau. Dual-licensed under MIT and Apache 2.0.
Issues, ideas, and contributions welcome — see the contribution guide.