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-mx-auto cia-p-6 cia-flex-col cia-gap-4">
    <h1>Hello, sketchbook</h1>
    <p class="cia-text-text-secondary">Swap the theme file and this page re-skins.</p>
  </main>
</body>
</html>

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

Those classes are utilities — spacing, layout, text and animation. There are 746 of them and they are the whole of what a stylesheet drop-in gives you, alongside the tokens and resets. There are no component classes: no .cia-btn, no .cia-card. Components come from mixins, which need a Sass build — that is the next section — or from the bare-tags recipe, which styles ordinary <button> and <table> elements with no classes at all.

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 SCSS that produced them — this is the real source of the two components above, not a paraphrase. The class names are ours; cia supplies only the mixin.

// Button.module.scss
@use 'css-is-awesome/scss/components/buttons' as m;

.primary { @include m.btn(primary); }
.outline { @include m.btn(outline); }

// Card.module.scss
@use 'css-is-awesome/scss/components/data' as d;

.card {
  @include d.card-base($border: true);
  @include d.card-interactive;
}

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.

• core — 2.4 KB gzipped. Tokens (CSS custom properties) and base resets only. The minimum to use the system; bring your own components.
• utilities — 4.1 KB gzipped. Every cia-* utility class — spacing, typography, layout, color, flex/grid helpers. Composes with your own component CSS.
• full — 7.96 KB gzipped. Core plus all 746 utilities in one file. The drop-in default; what the CDN snippet above ships. It does not add component classes — there are none — so the difference between core and full is the utilities and nothing else.

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.

<!-- Tier 3: no classes at all - the bare-tags recipe styles the element -->
<button>Get started</button>

// 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

• Install — npm, Vite, Next.js and Sass entry points for build-step projects.
• Tokens — live swatches, type scale, spacing and radii for the active theme. Pick a new theme; the gallery reskins.
• Utilities — the cia- utility classes for spacing, layout and type.
• Animation — the motion tokens and the named keyframes the system ships.
• Themes editor — the live theme browser and editor for shipped themes.
• Playground — write SCSS with cia mixins and see it render live against any theme, in your browser; share it as a link. Every recipe has a “Try in playground” button.
• Authoring themes — the token contract and validator for writing your own.
• Compare — bundle sizes and feature parity with Tailwind and Bootstrap.