Ready
Your semantic interface is connected.
Getting started
Quick start
Style semantic HTML with one small stylesheet. tty.css has no package manager, JavaScript, or component runtime requirement.
Install
Use jsDelivr for automatic minification and compression.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/slok/tty.css@main/tty.min.css">@main follows the latest main branch; pin a release tag or commit for production.
Alternatively, download the repository-root tty.css, keep it with your project, and serve it locally.
<link rel="stylesheet" href="tty.css">Start with semantic HTML
Direct body landmarks receive the centered framework viewport automatically. Native elements pick up the rest of the visual system without component classes.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="tty.css">
<title>Hello terminal</title>
</head>
<body>
<main>
<h1>Hello terminal.</h1>
<p>Semantic HTML, styled by default.</p>
<button type="button">Run command</button>
</main>
</body>
</html>What you get
Typography, cards, controls, tables, code, navigation, and native components share the same compact terminal-inspired system.
<article>
<header class="legend"><h3>Ready</h3></header>
<p>Your semantic interface is connected.</p>
<button type="button">Run command →</button>
</article>Most framework selectors use :where(). A normal application selector can therefore override tty.css without a specificity contest.