Headings
Regular paragraph with bold, italic, and highlight. Links look like this.
"The best interface is no interface."
— Golden Krishna
Textures — opt-in via [data-texture]
Eight patterns baked into the framework. Apply any of them to any element with a single attribute. No new classes, no extra CSS.
paper
newsprint grain
newsprint grain
data-texture="paper"
dots
graph paper
graph paper
data-texture="dots"
stripes
45° hatched
45° hatched
data-texture="stripes"
hatch
cross-weave
cross-weave
data-texture="hatch"
halftone
newsprint photo
newsprint photo
data-texture="halftone"
noise
xerox / photocopy
xerox / photocopy
data-texture="noise"
carbon
gradient + grain
gradient + grain
data-texture="carbon"
phosphor
CRT RGB dots
CRT RGB dots
data-texture="phosphor"
Bevel — pressed/raised 3D look
Use data-bevel="in" for sunken (input fields) or data-bevel="out" for raised (buttons, panels). Works alongside borders and textures.
Raised panel
data-bevel="out" — looks like it's sticking out toward you. Great for cards and callouts.
Sunken panel
data-bevel="in" — looks pressed in. Perfect for input areas, terminal windows, wells.
> system.status [OK] all services running
Typography
Code
Inline var(--dm-accent) renders with the accent color.
// Boot sequence
function init() {
console.log('[OK] System ready');
console.log('[OK] dotmatrix.css loaded');
}Forms — semantic, accessible
Components
Details / Accordion
What is dotmatrix.css?
A classless CSS framework that turns semantic HTML into a retro pixel-art interface.
Why "classless"?
Because class="btn btn-primary" on every button is silly.
Progress & Meter
Status badges
CONFIRMED RUMORED EVENT
Tables — striped, dense
| Framework | Style | Classless | Size | Textures |
|---|---|---|---|---|
| dotmatrix.css | Pixel/8-bit | Yes | 7KB | 8 |
| NES.css | 8-bit | No | 23KB | 0 |
| Pico CSS | Modern | Yes | 10KB | 0 |
| Water.css | Minimal | Yes | 2KB | 0 |