@microdom/mode.css

v1.0.0

Published

19 days ago

The visual layer of the Microdom ecosystem — a super-tiny, classless CSS library driven by attributes, not class soup.

0High
0Medium
0Low

microdom

microdom css classless tiny design-tokens framework

mode.css

A super-tiny, class-less CSS library driven by attributes — not class soup.

~4.8 KB minified · ~1.4 KB gzipped · zero dependencies · zero build step

Documentation · Live demo

What is it?

mode.css styles semantic HTML out of the box, then lets you compose layouts and components with a tiny family of µ-* attributes. No utility classes, no class="..." bloat, no naming bikeshedding. You write clean, native HTML — the cascade does the rest.

<!-- This is a responsive, themed card grid. That's the whole markup. -->
<section µ-grid="3-col cards">
  <article>
    <header><h3>Fast</h3></header>
    <p>One stylesheet, no build, no runtime.</p>
    <footer><button>Learn more</button></footer>
  </article>
  <!-- … -->
</section>

No classes were harmed. The grid, the gaps, the responsive breakpoints, the card borders, the typography and the button are all inherited through the cascade.

mode.css is the visual layer of the Microdom ecosystem — the complement to mode.js. Every Microdom piece works standalone: the ecosystem is better together, but nothing requires anything else.

What mode.css is not

Not a component framework. No modals, no carousels, no JS widgets.
Ships no JavaScript. The hamburger menu and the theme toggle are checkboxes.
Requires no build step. One <link> tag and you're styled.

Quick start

CDN (recommended)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microdom/mode.css@1/dist/mode.min.css">
<!-- or via GitHub tag -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/microdom/[email protected]/dist/mode.min.css">

Local

<link rel="stylesheet" href="dist/mode.css">

That's it. Write semantic HTML and it already looks right:

<body>
  <input type="checkbox" id="menu-toggle" hidden>
  <header>
    <div>
      <b>My Site</b>
      <label for="menu-toggle"><span></span></label>
      <nav><ul><li><a href="#">Home</a></li><li><a href="#">About</a></li></ul></nav>
    </div>
  </header>

  <main>
    <section>
      <h1>Hello, cascade</h1>
      <p>Native elements are styled automatically — no classes, no setup.</p>
    </section>
  </main>

  <footer>
    <div><p>&copy; 2026</p></div>
  </footer>
</body>

You get a sticky responsive header with a no-JS hamburger menu, a centered reading column, harmonic typography and a footer — for free.

Why it's on NPM

The CDN is for prototyping; npm is for shipping.

npm install @microdom/mode.css

import "@microdom/mode.css";      // flat, readable build
import "@microdom/mode.css/min";  // minified build

mode.css is fully standalone, dependency-free and weighs under 10 KB — and that footprint isn't elegance for its own sake, it exists for a reason. The CDN is perfect for a quick prototype, but installing from npm unlocks a workflow the CDN can't: building UIs for smart contracts. On-chain interfaces live under a hard size ceiling (around 20 KB) and must ship as a single, self-contained HTML file with every byte of CSS and JS inlined. Pull @microdom/mode.css from npm and it drops straight into your module graph, where your bundler inlines it into a <style> tag at build time — embedded in your exported HTML with zero copy-pasting and a fully pinned, reproducible version. Its tiny footprint fits comfortably inside those limits while still delivering a complete styling layer. Pair it with @microdom/mode (mode.js) — install both from npm — and you get the full mode experience, embedded and bundle-ready, whether you're targeting an on-chain interface or any other size-sensitive deployment.

The mental model

mode.css is built on one idea: style through a strong attribute cascade, in three layers.

Children stay bare. A card's <h3>, <p> and <button> carry no styling attributes — the parent attribute targets them through nesting ([µ-grid] > article h3 { … }).

Naming rule: attribute values describe the thing, never a CSS property. ✅ µ-grid="pricing" ❌ µ-grid="centered" ❌ µ-text-blue
If it reads like Tailwind, it's wrong.

📖 The full philosophy, with migration examples, lives in the docs.

Core attributes

µ-style, µ-card, µ-buttons, µ-items and friends are convention hooks: mode.css ships the structural defaults, and you define the aesthetics in a small theme file. See the theming guide in docs/tokens.md for a worked example.

Theming

Everything keys off CSS custom properties. Override them in :root (or under a #theme-toggle:checked rule for instant dark mode) — no recompilation:

:root {
  --color-bg:     #ffffff;
  --color-text:   #1f2937;
  --color-accent: #111827;
  --spacing:      1.5rem;
  --radius:       6px;
  --max-width:    1200px;
  --screen-padding: 1.5rem;
}

Why mode.css?

Tiny. ~1.4 KB gzipped. Smaller than this README.
No build. One <link>. Works on a static file, a PHP page, anything.
No classes. Your HTML stays readable and portable.
Native first. Flatten div-soup into <main> <section> <article> <header> <footer>.
Cascade-powered. Style the parent once; children fall in line.
Themeable. Pure CSS variables. Dark mode is a checkbox.

Project structure

mode.css/
├── src/
│   └── mode.css        # the source — readable, commented, native CSS nesting
├── dist/
│   ├── mode.css        # flat build (nesting transpiled by Lightning CSS)
│   └── mode.min.css    # minified production build
├── demos/              # classless demo pages (zero custom CSS, zero JS)
├── docs/               # documentation (tokens, layout, philosophy)
├── package.json        # @microdom/mode.css — `npm run build`
├── LICENSE
└── README.md

⚠️ Never write theming code in src/ or dist/ — that's the library, and dist/ is regenerated on every build. Your styles belong in your own theme layer (see docs/tokens.md).

Browser support

The source is written with native CSS nesting; the dist/ builds are transpiled to flat CSS with Lightning CSS (browserslist >= 0.5%), so the shipped files work well beyond the evergreen set. Logical properties and CSS custom properties are the only hard requirements.