Add the stylesheet
Include Vanilla Breeze CSS in your HTML head.
Vanilla Breeze
A layered HTML component system. Build with native HTML, enhance with CSS, add interactivity with JavaScript - each layer optional.
Simple Elegant Markup >
Complex <div> Soup!
- 84
- Native Elements
- 15
- Custom Elements
- 9
- Web Components
- 0
- Dependencies
Built Different
-
HTML-First Start with semantic HTML5 elements. Everything works without CSS or JavaScript.
-
Progressive Enhancement Add CSS for styling, JavaScript for interactivity. Each layer is optional.
-
Zero Dependencies No frameworks, no build tools required. Works directly in the browser.
-
Design Tokens CSS custom properties for colors, spacing, typography. Consistent and themeable.
-
Layout Primitives Stack, Grid, Sidebar, Cluster - CSS-only custom elements for any layout.
-
Accessible ARIA patterns built-in. Keyboard navigation and screen reader support.
Quick Start
- 1
<link rel="stylesheet" href="vanilla-breeze.css"> - 2
Write semantic HTML
Use native elements with simple class names for variants.
<layout-stack data-gap="m"> <h1>Welcome</h1> <p>Build beautiful interfaces with semantic HTML.</p> <layout-cluster data-gap="s"> <button class="primary">Get Started</button> <button class="outline">Learn More</button> </layout-cluster> </layout-stack> - 3
Add interactivity (optional)
Include JS for enhanced components like accordions and tabs.
<script type="module" src="vanilla-breeze.js"></script>