Theme & Layout Showcase

Experience dramatic visual transformations by combining extreme themes with pure CSS layout switching. No JavaScript required for layouts.

Open Full Demo Learn About Extreme Themes

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.

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

The demo includes three distinct layout patterns, all controlled via CSS Grid:

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:

Swiss

Precision grid design inspired by Swiss typography. Clean, structured, professional.

Brutalist

Raw, industrial aesthetic. Bold borders, monospace fonts, no rounded corners.

Cyber

Neon cyberpunk vibes. Glowing effects, dark backgrounds, futuristic feel.

Terminal

Retro CRT terminal aesthetic. Green-on-black, scanlines, monospace everything.

Organic

Natural, handcrafted feel. Earthy colors, flowing shapes, warm typography.

See the Themes documentation for all available extreme themes including Editorial, Kawaii, and 8-bit.

How Layout Switching Works

The layout switching uses pure CSS with the :checked pseudo-class and sibling combinators. No JavaScript is required.

HTML Structure

<input type="radio" name="layout" id="layout-stack" class="layout-radio" /> <input type="radio" name="layout" id="layout-sidebar" class="layout-radio" checked /> <input type="radio" name="layout" id="layout-holy-grail" class="layout-radio" />  <div class="page-container"> <header>...</header> <nav>...</nav> <main>...</main> <aside>...</aside> <footer>...</footer> </div>

CSS Grid Templates

/* CSS Grid templates for each layout */ #layout-stack:checked ~ .page-container { grid-template: "header" auto "main" 1fr "footer" auto / 1fr; } #layout-sidebar:checked ~ .page-container { grid-template: "header header" auto "nav main" 1fr "footer footer" auto / 15rem 1fr; } #layout-holy-grail:checked ~ .page-container { grid-template: "header header header" auto "nav main aside" 1fr "footer footer footer" auto / 12rem 1fr 12rem; }

The key insight is that radio inputs at the start of the document can control any sibling element's styles using the general sibling combinator (~).

Using Extreme Themes

Apply any extreme theme by setting the data-theme attribute on your <html> element:

<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 Yourself

The full demo includes:

Collapsible controls panel (click "Controls" to toggle)
All layout options with live switching
Theme picker with color modes, personalities, and extreme themes
Sample content that showcases theme transformations

Open Full Demo