tty.css

A small, class-light CSS framework for semantic HTML—mixing turbopuffer's visual style with Pico CSS's semantic, class-light philosophy. Monospace text, hard borders, and textured offset shadows, without a component runtime.

• One CSS file; no framework JavaScript, fonts, or icon dependencies.
• Native HTML elements styled by default, with optional layout and appearance classes.
• Light, dark, and automatic themes; customization through CSS variables.

Documentation · Examples · Customization

Install

Use the CDN:

<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. Or download tty.css and link it locally:

<link rel="stylesheet" href="tty.css">

Start with HTML

<!doctype html>
<html lang="en" data-theme="auto">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="tty.css">
    <title>Hello, tty.css</title>
  </head>
  <body>
    <main>
      <h1>Plain HTML. Sharp edges.</h1>
      <article>
        <h2>Start building</h2>
        <p>Semantic elements provide the defaults. Classes are optional.</p>
        <button type="button">Hello</button>
      </article>
    </main>
  </body>
</html>

See the docs for components, layouts, themes, and accessibility and browser requirements. Interactive examples supply their own application JavaScript; tty.css supplies styling only.

Contributing

Issues and pull requests are welcome. The framework source is the root tty.css; documentation and examples live in docs/. The documentation site is static and needs no build step.

License

MIT © slok