term.css: a classless CSS framework with terminal aesthetics

I built term.css because I wanted to redesign this blog with terminal aesthetics. Monospace fonts, clean lines, that kind of look. I spent a few weeks on it, got it working, and then realized I actually prefer the UI I already had.

So I had this CSS sitting around with no use. I cleaned it up, made it work as a standalone classless framework, and open-sourced it.

what is it

A classless CSS framework. You write standard semantic HTML and it styles everything automatically. Headings, paragraphs, lists, tables, forms, code blocks. No classes needed.

The terminal look is there because that was the original goal. A blog that looks like a well-configured terminal. Monospace typography, clean lines, dark-first. That aesthetic just carried over into the framework.

features

• Classless styling for all standard HTML elements
• 13 built-in themes: default, dracula, nord, solarized, one-dark, monokai, tokyo-night, catppuccin, rose pine, gruvbox, everforest, github, and kanagawa
• Dark and light modes with automatic system preference detection
• 10 CSS variables control the entire visual appearance, so custom themes are easy
• WCAG 2.1 AA contrast ratios, focus rings, and reduced motion support
• Optional components (cards, badges, callouts, tables) using t- prefixed classes for when you need them
• Theme generator CLI that validates accessibility automatically

getting started

Install from npm:

npm install @eshlox/termcss

Import in your CSS:

@import "term.css";

Or link directly in HTML:

<link rel="stylesheet" href="node_modules/term.css/dist/term.min.css" />

To use a theme:

@import "term.css";
@import "term.css/themes/dracula.min.css";

You can also generate a custom theme:

npx termcss --hue 200 --name ocean

The generator checks WCAG AA compliance for you.

links

• GitHub repository
• npm package