CSS is Awesome

Get started in 5 minutes

Paste one HTML snippet, open it in a browser, and you are looking at a themed page. No build step, no config, no framework. When you are ready to re-skin, you change exactly one line.

Minimum setup

Prerequisites: any modern browser. No Node, no bundler, no build step. The stylesheets below are served from the planned CDN at https://cdn.css-is-awesome.dev/v1/ — theme first so the base can read its tokens.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Hello, sketchbook</title>
  <link rel="stylesheet" href="https://cdn.css-is-awesome.dev/v1/theme-sketchbook.css">
  <link rel="stylesheet" href="https://cdn.css-is-awesome.dev/v1/cia.css">
</head>
<body>
  <main class="cia-container">
    <h1>Hello, sketchbook</h1>
    <a class="cia-btn-primary" href="#">Get started</a>
  </main>
</body>
</html>

Save that as index.html, open it — you are done. That is the entire 1-minute track.

Your first themed element

Every element in the system reads from the active theme's tokens. Here is a button and a card rendered live on this page, followed by the exact HTML that produced them.

Get startedRead the docs

Warm paper, sumi ink

The card inherits its paper colour, border and serif title from the active theme. Swap the theme and this block re-skins without a single markup change.

<a class="cia-btn-primary" href="#">Get started</a>
<a class="cia-btn-outline" href="#">Read the docs</a>

<article class="cia-card">
  <h4>Warm paper, sumi ink</h4>
  <p>The card inherits its paper colour, border and serif title from the active theme.</p>
</article>

Swap the theme

Themes are single files. The base stylesheet never hard-codes a colour, a radius or a font — it reads them from CSS custom properties the theme defines. Re-skinning the entire site is one <link> change:

/* before — sketchbook */
<link rel="stylesheet" href="https://cdn.css-is-awesome.dev/v1/theme-sketchbook.css">

/* after — brutalist */
<link rel="stylesheet" href="https://cdn.css-is-awesome.dev/v1/theme-brutalist.css">

The ThemePicker in the site header does exactly that live — pick another theme from the menu and every preview on this page, including the button and card above, re-skins as you scroll. No reload, no rebuild. That is the entire theme contract.

What next

Theme