⚡ High-Performance Core

Skeletonic Stylus is a hyper-optimized, modular CSS engine designed for the high-performance era. It leverages 2026 native features to deliver a complete UI foundation in under 5kb.

• Size: 4.40 kB Core Bundle (Raw) / 1.4 kB (Brotli).
• Architecture: Zero-JS, 100% Native CSS APIs.
• Accessibility: 100% WCAG 2.2 AA coverage guaranteed.

🛠 Features

🌈 2026 Color Engine

Native oklch() and light-dark() support. Derives hover and active states dynamically via Relative Color Syntax (RCS), ensuring zero extra CSS weight for theming.

📐 Precision Layouts

Built-in support for Native Grid Masonry (grid-lanes) and Bento Grids using Container Queries. No JavaScript layout libraries required.

🖋 Fluid Typography

Headings and body text scale smoothly between mobile and desktop via native clamp() functions. No media query hacks, just mathematical precision.

♿ Accessibility First

Enforced :focus-visible ring management, 65ch reading limits, and global prefers-reduced-motion overrides at the engine level.

🚀 Quick Start

1. Installation

pnpm add @sebastienrousseau/skeletonic-stylus

2. Basic Usage

Import the core foundations in your Stylus file (tokens + reset + layout primitives only):

@import "@sebastienrousseau/skeletonic-stylus/stylus/skeletonic"

Or pull in the full UI add-on (buttons, alerts, badges, cards, forms — built on top of core):

@import "@sebastienrousseau/skeletonic-stylus/stylus/skeletonic-ui"

📊 Performance Benchmarks

| Metric | Core Engine | UI Addon | | :------------------ | :---------- | :---------- | | Size (Minified) | 4.4 kB | 33.6 kB | | Size (Gzip) | 1.6 kB | 6.8 kB | | Size (Brotli) | 1.4 kB | 5.9 kB | | Cascade Layers | 2 (@layer) | 4 (@layer) | | Lighthouse A11y | 100/100 | 100/100 |

📖 Documentation

For the complete API reference, design tokens, and component library usage, see the Full Documentation.

📄 License

Skeletonic Stylus is dual-licensed under MIT or Apache-2.0.

Copyright (c) 2023 - 2026 Skeletonic CSS. All rights reserved.