Semantic HTML
Style elements, not components. Your markup stays meaningful.
Beta
Classless
Opt-in scope
Mode CSS
A classless, cascade-first CSS layer. Style semantic HTML directly — minimal classes, no utility-class soup, a small and reusable footprint.
Because to get a real micro DOM you need a micro CSS too.
Goals
Minimal classes
Reach for a class only when the cascade genuinely can't.
No utility soup
No endless utility classes cluttering your markup.
Highly reusable
One calm, neutral baseline you carry between projects.
Small footprint
A tiny stylesheet that earns every rule it ships.
DOM-first
A sane default for people who don't want a design system.
How it works
This very page is built with Mode CSS. The layout, header, navigation, cards, forms and footer you are looking at come straight from the base stylesheet — semantic HTML plus a few µ-attributes. Only the colors and a few decorative touches live in a separate theme file.
page.html
<link rel="stylesheet" href="mode.css"> <!-- base layout + defaults -->
<link rel="stylesheet" href="custom.css"> <!-- your theme -->Write plain, semantic markup. The cascade does the styling — no class on every element.
page.html
<main>
<section µ-grid="3-col">
<article>
<h3>Readable by default</h3>
<p>Just semantic HTML — no classes.</p>
</article>
</section>
</main>The attribute vocabulary
Layout that the cascade can't express alone is opted into with a tiny set of µ-attributes — no class soup, just intent.
| Attribute | What it does |
|---|---|
µ-grid | Auto-responsive grid (auto-fit, min 280px). |
µ-grid="2-col … 6-col" | Explicit column counts at each breakpoint. |
µ-grid="sidebar-left" | Asymmetric sidebar + content layout. |
µ-style="…" | Themed section variant defined in your theme file. |
µ-grid > article | Becomes a native card automatically. |
Tokens are the theme
The base ships a small set of design tokens — typography scale, spacing rhythm, a neutral palette and the master layout widths. Re-skinning the whole site is mostly a matter of overriding them in custom.css.
custom.css
:root {
--color-bg: #0b0d12; /* dark steel */
--color-text: #d8dee8;
--color-accent: #ff7a18; /* molten ember */
--radius: 12px;
--max-width: 1080px;
}