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 jsDelivr, auto-mirrored from the npm package — 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.jsdelivr.net/npm/css-is-awesome@1/public/themes/sketchbook-light/theme.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-is-awesome@1/dist/css-is-awesome.min.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>

Three bundle tiers

Pick the smallest bundle that covers your needs — they all read the same theme tokens, so you can start with core and graduate to full later without changing markup.

The /compare page shows these sizes next to Tailwind's and Bootstrap's equivalents.

Utility class, or SCSS mixin

The same button is reachable two ways. If you have no build step, drop the utility class on a tag. If you have a Sass build, call the mixin from your own selector — every variant the utility class ships rides through to the mixin and back.

Utility classSame, via mixin
<!-- Tier 1: utility class, no build -->
<a class="cia-btn-primary" href="#">Get started</a>

// Tier 2: same output, via the SCSS mixin
@use 'css-is-awesome/scss/components/buttons' as b;

.hero-cta {
  @include b.btn(primary);
}

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.jsdelivr.net/npm/css-is-awesome@1/public/themes/sketchbook-light/theme.css">

/* after — press */
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/css-is-awesome@1/public/themes/press/theme.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