Getting Started

term.css is a minimal, classless CSS framework with terminal aesthetics. Add a single stylesheet and your HTML is styled - no classes required.

It's designed for blogs, docs, personal sites, and technical writing that benefit from terminal-like presentation. It is not a component framework or a browser TUI kit.

Installation

npm

npm install @eshlox/termcss

Then import in your CSS or bundler:

@import "@eshlox/termcss";

Or link in HTML:

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

Download

Download term.css or term.min.css from the GitHub releases page and include it in your project.

Basic Usage

term.css styles all standard HTML elements automatically. Just write semantic HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Site</title>
  <link rel="stylesheet" href="node_modules/@eshlox/termcss/dist/term.min.css">
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <h1>Hello World</h1>
    <p>Your content here.</p>
  </main>
</body>
</html>

Themes

term.css includes a default theme and 12 optional themes. To use a theme, add a second stylesheet after the base:

@import "@eshlox/termcss";
@import "@eshlox/termcss/themes/dracula.min.css";

Available themes: default, dracula, nord, solarized, one-dark, monokai, tokyo-night, catppuccin, rose-pine, gruvbox, everforest, github, kanagawa.

Dark / Light Mode

term.css auto-detects the user's system preference via prefers-color-scheme. To override:

<!-- Force dark mode -->
<html data-theme="dark">


<!-- Force light mode -->
<html data-theme="light">

A simple toggle button:

<button onclick="
  const html = document.documentElement;
  const next = html.dataset.theme === 'dark' ? 'light' : 'dark';
  html.dataset.theme = next;
">Toggle Theme</button>

Astro Integration

Install the package and import in your layout:

---
// src/layouts/Base.astro
import "@eshlox/termcss";
---
<html lang="en">
<head></head>
<body>
  <slot />
</body>
</html>

CSS Variables

term.css uses 10 core CSS custom properties. Override them to customize without creating a full theme file:

VariablePurpose
--t-bgPage background
--t-fgBody text color
--t-mutedSecondary text, comments
--t-accentLinks, headings, primary accent
--t-accent2Badges, marks, secondary accent
--t-surfaceCode blocks, cards, inputs
--t-borderBorders, dividers
--t-redError, danger states
--t-yellowWarning, caution states
--t-greenSuccess, confirmed states

Next Steps