Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
Dramatic visual transformations by combining extreme themes with pure CSS layout switching. No JavaScript required for layouts.
The showcase demonstrates two powerful Vanilla Breeze capabilities working together:
Change between Stack, Sidebar, and Holy Grail layouts using only CSS. Radio buttons control which grid template is active — no JavaScript needed.
Watch the entire page transform with themes like Brutalist, Swiss, Cyber, Terminal, and Organic. Typography, colors, shadows, and shapes all change.
Three layout patterns, all controlled via CSS Grid and the :checked pseudo-class:
| Layout | Description | Use Case |
|---|---|---|
| Stack | Single-column vertical layout | Mobile, reading-focused content, articles |
| Sidebar | Two-column with navigation sidebar | Documentation, dashboards, admin panels |
| Holy Grail | Three-column with nav and aside | Full applications, content with related items |
These themes go beyond color changes to transform the entire visual language:
Precision grid design inspired by Swiss typography. Clean, structured, professional.
Raw, industrial aesthetic. Bold borders, monospace fonts, no rounded corners.
Neon cyberpunk vibes. Glowing effects, dark backgrounds, futuristic feel.
Retro CRT terminal aesthetic. Green-on-black, scanlines, monospace everything.
Natural, handcrafted feel. Earthy colors, flowing shapes, warm typography.
See the Themes documentation for all available extreme themes including Editorial, Kawaii, 8-bit, Vaporwave, and more.
The layout switching uses pure CSS with the :checked pseudo-class and the general sibling combinator (~). No JavaScript required.
<!-- Hidden radio buttons at the start of <body> --><input type="radio" name="layout" id="layout-stack" /><input type="radio" name="layout" id="layout-sidebar" checked /><input type="radio" name="layout" id="layout-holy-grail" /> <!-- Page layout changes based on which radio is checked --><section class="page-layout"> <header>...</header> <nav>...</nav> <main>...</main> <aside>...</aside> <footer>...</footer></section>
/* Stack: single column */#layout-stack:checked ~ .page-layout { grid-template: "header" auto "main" 1fr "footer" auto / 1fr;} /* Sidebar: two columns */#layout-sidebar:checked ~ .page-layout { grid-template: "header header" auto "nav main" 1fr "footer footer" auto / 15rem 1fr;} /* Holy Grail: three columns */#layout-holy-grail:checked ~ .page-layout { grid-template: "header header header" auto "nav main aside" 1fr "footer footer footer" auto / 12rem 1fr 12rem;}
Apply any extreme theme by setting the data-theme attribute:
<!-- Apply via data-theme attribute --><html data-theme="brutalist"><html data-theme="swiss"><html data-theme="cyber"><html data-theme="terminal"><html data-theme="organic">
Themes can be combined with data-mode="light" or data-mode="dark" for explicit color mode control.
The full demo includes a collapsible controls panel with layout switching, the full theme picker, and sample content that showcases how each theme transforms typography, cards, forms, buttons, and code blocks.
Open Full DemoComplete theme documentation
All components in one page
Layout attributes reference