In Development

Terminal.css

An open-source, drop-in CSS framework that transforms any website into a retro terminal interface. Dark theme, monospace typography, glowing cursors, and scanline effects — all in a single <link> tag. No JavaScript required.

Role: Creator & Maintainer
Timeline: Ongoing
Stack: CSS, PostCSS, npm
Status: v0.4-alpha

01 — Idea

What if CSS could feel like a terminal?

I love the aesthetic of old-school terminals — the glow, the monospace text, the blinking cursors. But recreating that look from scratch every time is tedious. Terminal.css packages the entire vibe into a reusable, configurable framework.

Drop it into any HTML page and you instantly get a dark, hacker-style look with proper spacing, responsive grids, form styles, and animated elements. Zero JavaScript.

02 — Live Demo

Interactive component preview

This is a real CSS-only rendering of the framework's components:

> Buttons

Execute Cancel Skip Delete

> Status Badges

● ONLINE ● WARNING ● CRITICAL ● INFO ● CUSTOM

> Form Elements

hostname: prod-server-01

ip_addr: 192.168.1.42

ssh_port: 22

password: ••••••••

> Data Table

PIDPROCESSCPUMEMSTATUS

1024nginx2.1%48MB● RUN

2048node12.4%256MB● RUN

3072postgres5.7%512MB● RUN

4096redis0.3%24MB● IDLE

5120cron0.0%8MB● STOP

> Cards

┌── System Info ──┐

OS: Ubuntu 24.04 LTS

Kernel: 6.8.0-generic

Uptime: 42 days, 7h

└── ● HEALTHY ──┘

┌── Disk Usage ──┐

/dev/sda1 ████████░░ 78%

/dev/sdb1 ███░░░░░░░ 31%

/tmp █░░░░░░░░░ 12%

└── 240GB free ──┘

> Alerts

⚠ WARNING: SSL certificate expires in 14 days. Run `certbot renew` to fix.

✓ SUCCESS: Deployment complete. 3 services restarted, 0 errors.

> Progress

Deploying...

73%

03 — Component Sheet

Full component reference

fig.1 — All 40+ components rendered with default Matrix Green theme

04 — Numbers

Lightweight by design

7.2 KB gzipped

0 JS Dependencies

40+ Components

12 CSS Variables

05 — Features

What's in the box

🖥️

Full Component Set

Buttons, forms, tables, cards, modals, alerts — all terminal-styled out of the box.

🎛️

CSS Custom Properties

Customize colors, fonts, glow intensity, scanline opacity — all via CSS variables.

📱

Fully Responsive

Looks great on desktop, tablet, and mobile. Built-in grid system included.

✨

Animations

Scanlines, CRT flicker, typing cursors, glitch text — toggle each independently.

📦

Tiny Footprint

Under 8KB gzipped. No JavaScript, no build step required for basic usage.

🔌

npm or CDN

Install via npm for build pipelines or drop a single CDN link into any HTML file.

🎨

Theme Presets

Matrix green, amber CRT, cyan hacker, purple synthwave — switch with one variable.

♿

Accessible

Proper contrast ratios, focus indicators, and screen reader support built in.

06 — Themes

Built-in color presets

🟢

Matrix

#00FF41

🟠

Amber

#FFB000

🔵

Cyan

#00F0FF

🟣

Synthwave

#BF5AF2

07 — Usage

Getting started

install

# Option 1: npm
$ npm install terminal.css

# Option 2: CDN
<link rel="stylesheet"
      href="https://unpkg.com/terminal.css@0.4/dist/terminal.min.css">

custom-theme.css

:root {
  --term-bg:        #0a0a0f;
  --term-text:      #e0e0e0;
  --term-accent:    #00ff41;
  --term-dim:       #3a3f47;
  --term-glow:      0 0 12px #00ff4144;
  --term-scanlines: 1;
  --term-flicker:   1;
  --term-font:      'JetBrains Mono', monospace;
  --term-radius:    4px;
}