dotmatrix.css
v0.2.0
Published
Classless pixel-art CSS framework with textures and bevels — write semantic HTML, get a retro CRT interface for free.
Maintainers
trongarReadme
dotmatrix.css
Classless pixel-art CSS framework — write semantic HTML, get a retro CRT interface for free.
Features
- Classless — zero classes required, styles semantic HTML directly
- Lightweight — ~5KB gzipped, no JavaScript
- Retro aesthetic — pixel-art UI with CRT terminal vibes
- Themeable — CSS variables for full customization
- Textured — 8 paper/grain/dot patterns via
data-textureattribute - Beveled — 3D pressed/raised surfaces via
data-bevelattribute - Accessible — proper focus states, semantic structure, captions on tables, labeled navs
- Responsive — desktop-first, collapses gracefully on smaller screens
Quick Start
CDN
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dotmatrix.css">npm
npm install dotmatrix.cssimport 'dotmatrix.css/dotmatrix.css';Manual
Download dotmatrix.css and link it:
<link rel="stylesheet" href="dotmatrix.css">Usage
Just write semantic HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="dotmatrix.css">
</head>
<body>
<header>
<h1>My Retro App</h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>Welcome</h2>
<p>This is a paragraph with <strong>bold</strong> and <em>italic</em>.</p>
<button>Click me</button>
</article>
</main>
</body>
</html>That's it. No classes, no JavaScript, no build step.
Textures
Apply any of 8 texture patterns to any element with a single attribute:
<article data-texture="paper">...</article> <!-- recycled paper grain -->
<section data-texture="dots">...</section> <!-- graph paper -->
<div data-texture="halftone">...</div> <!-- newsprint photo -->
<aside data-texture="hatch">...</aside> <!-- cross-hatch weave -->
<header data-texture="stripes">...</header> <!-- 45° stripes -->
<footer data-texture="noise">...</footer> <!-- xerox grain -->
<div data-texture="carbon">...</div> <!-- gradient + grain -->
<main data-texture="phosphor">...</main> <!-- CRT RGB dots -->Presets
Quick combos for common aesthetics:
<body data-texture-preset="vintage"> <!-- strong brown grain -->
<body data-texture-preset="sepia"> <!-- subtle warm grain -->
<body data-texture-preset="phosphor"> <!-- for dark themes -->
<body data-texture-preset="subtle"> <!-- barely there -->
<body data-texture-preset="strong"> <!-- pronounced -->Bevels
3D pressed or raised look with a single attribute:
<button data-bevel="out">Raised button</button>
<input data-bevel="in" type="text"> <!-- sunken input -->
<div data-bevel="out">Raised panel</div>Themes
Light (default)
<body>
<!-- Light theme is automatic -->
</body>Dark
<body data-theme="dark">
<!-- Dark theme activated -->
</body>Customization
Override CSS variables to create your own theme:
:root {
--dm-bg: #1a1a2e;
--dm-accent: #ff6b6b;
--dm-text: #eaeaea;
--dm-font-size: 14px;
--dm-texture: 1;
--dm-texture-color: rgba(255, 100, 100, 0.15);
}All available variables:
:root {
/* Colors */
--dm-bg: #f0f0e8;
--dm-surface: #e8e8e0;
--dm-surface-2: #dcdcd0; /* NEW: deeper surface variant */
--dm-border: #b0b0a0;
--dm-border-light: #d0d0c0; /* NEW: bevel highlight */
--dm-border-dark: #808070; /* NEW: bevel shadow */
--dm-text: #1a1a1a;
--dm-text-muted: #666655;
--dm-accent: #006600;
--dm-accent-dim: #004400;
--dm-accent-alt: #aa6600;
--dm-danger: #cc0000;
--dm-success: #006600;
/* Typography */
--dm-font: 'Courier New', monospace;
--dm-font-size: 13px;
--dm-line-height: 1.6;
--dm-heading-font: 'Courier New', monospace;
/* Spacing */
--dm-space-xs: 4px;
--dm-space-sm: 8px;
--dm-space-md: 16px;
--dm-space-lg: 24px;
--dm-space-xl: 32px;
--dm-space-2xl: 48px;
/* Borders */
--dm-border-width: 2px;
--dm-radius: 0px;
--dm-pixel: 2px; /* stepped shadow offset */
/* Effects */
--dm-scanlines: 1; /* 0-2, scanline intensity */
--dm-texture: 0; /* 0-2, texture intensity */
--dm-texture-color: rgba(0,0,0,0.08);
--dm-emoji-style: text; /* text | emoji | unicode */
--dm-max-width: 800px;
}Demos
See dotmatrix.css in action across 10 real-world apps:
- Landing page — marketing site
- Auth flows — sign-in / sign-up / 2FA
- SaaS dashboard — CRM with sidebar + KPI + charts
- Pricing — tiered plans + comparison
- Long-form essay — blog/article with TOC
- Library catalog — book grid with filters
- Bakery — pastry shop with order form
- IRC / BBS social — chat + forum threads
- Encyclopedia — Encarta-style article
- Running tracker — GPS map + stats + training calendar
Showcase hub: showcase/index.html — links all 10 with texture/bevel previews.
Each demo uses a different theme via CSS variable overrides. Same HTML semantics, radically different vibes.
Browser Support
- Chrome/Edge (last 2 versions)
- Firefox (last 2 versions)
- Safari (last 2 versions)
data-texture and data-bevel use only standard CSS (gradients, box-shadow) — works everywhere.
font-variant-emoji: text requires Chrome 131+, Firefox 132+, Safari 18.2+. Falls back gracefully to native emoji on older browsers.
Inspiration
- Spidey Tracker — Sony/Samsung promotional site with CRT terminal aesthetic
- NES.css — 8-bit CSS framework (requires classes)
- Pico CSS — classless CSS framework
- Water.css — minimal classless stylesheet
Philosophy
Less is more. You shouldn't need to add class="btn btn-primary" to every button. Your HTML tags already have semantic meaning — let them style themselves.
dotmatrix.css exists because:
- Existing pixel-art frameworks (NES.css) require verbose class names
- Classless frameworks (Pico, Water) lack retro aesthetics
- Building retro UIs from scratch wastes tokens and time
- No other framework combines classless + pixel-art + textures + bevels in one small file
Development
# View the main demo
open demo.html
# View the showcase hub
open showcase/index.html
# View individual demos
open demos/03-dashboard.htmlNo build step. It's just CSS.
Contributing
Issues and PRs welcome. Keep it simple, keep it classless.
License
MIT © 2026