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.
Theme & Layout Showcase
Dramatic visual transformations by combining extreme themes with pure CSS layout switching. No JavaScript required for layouts.
What This Demo Shows
The showcase demonstrates two powerful Vanilla Breeze capabilities working together:
Pure CSS Layout Switching
Change between Stack, Sidebar, and Holy Grail layouts using only CSS. Radio buttons control which grid template is active — no JavaScript needed.
Extreme Theme Transformations
Watch the entire page transform with themes like Brutalist, Swiss, Cyber, Terminal, and Organic. Typography, colors, shadows, and shapes all change.
Available Layouts
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 |
Extreme Themes
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.
How Layout Switching Works
The layout switching uses pure CSS with the :checked pseudo-class and the general sibling combinator (~). No JavaScript required.
HTML Structure
Layout radio inputs
<!-- 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>CSS Grid Templates
Layout switching CSS
/* 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;}Using Extreme Themes
Apply any extreme theme by setting the data-theme attribute:
Applying extreme themes
<!-- 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.
Try It
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 DemoRelated
Themes
Complete theme documentation
Kitchen Sink
All components in one page
Attributes
Layout attributes reference