Like the German Beer Purity Law (Reinheitsgebot), BrewCSS uses only what's essential. Semantic HTML elements as components. M3 design tokens as settings. English helper classes for customization. Plus BrewCSS additions: GridForms & Bones Grid.
Philosophy
In 1516, the German Beer Purity Law declared that beer may only contain water, barley, and hops. BrewCSS follows the same principle — a CSS framework needs only three ingredients:
Material Design 3 color tokens that affect the whole document. --primary, --surface, --error, and 30+ tokens. Set once, used everywhere.
Components styled by their HTML tag, not by class. <button> not <div class="btn">. <article> for cards. <nav class="left"> for drawers.
Full English words that make elements scalable: small, large, round, fill, primary, border. No abbreviations.
Simplicity
<button class="fill round">Save</button> <button class="border">Cancel</button> <article class="elevate round"> <h6>Title</h6> <div>Content</div> </article> <nav class="left">...</nav>
<div class="btn btn-primary btn-rounded">Save</div> <div class="btn btn-outline">Cancel</div> <div class="card card-elevated card-rounded"> <div class="card-header">Title</div> <div class="card-body">Content</div> </div> <div class="sidebar sidebar-left">...</div>
The Brew
Beyond the BeerCSS purity, BrewCSS brews in three extra ingredients:
Spreadsheet-style data-entry forms with labeled cells, column spans, and fieldset grouping.
12-column CSS Grid with border-based cells, gap utilities, and auto-fit responsive patterns.
Six independent theme dimensions: style, colors, typography, borders, size, density. Mix freely via data-* attributes.
Features
No JavaScript dependencies. No build tools required. One CSS file with 30+ components, a grid system, and form layouts.
4.5:1+ contrast ratios, keyboard navigation, focus-visible outlines, ARIA attributes, skip links, and screen reader support.
Full M3 color token system. Elevated/filled/outlined cards, segmented buttons, FABs, chips, dialogs, and more.
Components use native HTML elements: <button>, <article>, <nav>, <details>, <dialog>. Clean, accessible markup.
Material (subtle, elevated), Brutalist (sharp, heavy borders), Neobrutalist (bold offset shadows). Switch with one attribute.
Toggle themes by adding .dark to the body. All colors switch via CSS custom properties — zero JS for theming.
Components
All components with live examples on the Components page.
Quick Start
Add one CSS file to your HTML:
<link rel="stylesheet" href="brew.css">
Use semantic HTML with helper classes:
<button class="fill round">Click me</button> <article class="elevate round"> <h6>Title</h6> <div>Content</div> </article>
Toggle dark mode:
document.body.classList.toggle('dark');