CSS is Awesome

Install css-is-awesome

One design system, four install tiers — CDN for quick HTML, npm + SCSS for builds, a framework integration for React/Next, or a single theme file you can airdrop into any project.

Pick your path

Match your scenario to an install tier. Each tier ships the same tokens and components — only the delivery differs.

CDN

The fastest path. Two <link> tags via jsDelivr (auto-mirrored from npm). Theme first so the library can read its tokens.

<!-- in your <head> -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/css-is-awesome@0.6.0/public/theme.css">
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/css-is-awesome@0.6.0/dist/css-is-awesome.min.css">

Verify by dropping a button into the body — if it renders with the theme’s primary color, you’re wired up.

<body>
  <button class="cia-btn-primary">Verify</button>
</body>

Subresource Integrity (SRI)

For security-conscious environments, pin each <link> to a hash. jsDelivr auto-generates an .sha384 sidecar for every published file — fetch it once at the version you intend to ship and paste the value into integrity.

# fetch the sha384 for the version you're pinning
curl https://cdn.jsdelivr.net/npm/css-is-awesome@0.6.0/dist/css-is-awesome.min.css.sha384
curl https://cdn.jsdelivr.net/npm/css-is-awesome@0.6.0/public/theme.css.sha384
<!-- pinned <link> tags with integrity + crossorigin -->
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/css-is-awesome@0.6.0/public/theme.css"
      integrity="sha384-…paste from above…"
      crossorigin="anonymous">
<link rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/css-is-awesome@0.6.0/dist/css-is-awesome.min.css"
      integrity="sha384-…paste from above…"
      crossorigin="anonymous">

Re-fetch the hash on every version bump — pinned versions intentionally fail to load if the file mutates upstream.

npm + SCSS

For Sass-driven projects. Install the package, then @use what you need. The simplest path is to pull the entire system in one line via scss/main; reach for the smaller subpaths when you only want the mixin API.

# install
npm install css-is-awesome
// app.scss — full system, generates CSS at this load point
@use 'css-is-awesome/scss/main';

That single line emits tokens, base resets, animations, utilities, and component classes. From here, author your own classes against the mixin API.

// app.scss — mixin API only, you control the output
@use 'css-is-awesome/scss/mixins' as m;
@use 'css-is-awesome/scss/components/buttons' as b;

.hero-cta {
  @include b.btn(primary, $px: 6, $r: full);
  @include m.elevation(2);
}

Available subpaths: scss/main, scss/mixins, scss/utilities, scss/animations, scss/icons, scss/layout, scss/system, scss/theme, scss/components/<name> (buttons, data, feedback, forms, navigation, overlay), and scss/recipes/<name> (e.g. bare-tags). The scss/main entry already pulls in everything, so don’t re-include components you’ve already loaded through it.

React + Next.js

Import the stylesheets once in your root app/layout.tsx and set the active theme on the <html> element. Components read tokens via var(--…), so you can mix and match anywhere in your tree.

// app/layout.tsx
import "css-is-awesome/theme";       // 1. tokens (all six themes, one file)
import "css-is-awesome/min.css";     // 2. compiled library (utilities + components)

export default function RootLayout({ children }) {
  return (
    <html lang="en" data-theme="sketchbook">
      <body>{children}</body>
    </html>
  );
}

Once the theme is active, any component can pull a token straight off CSS custom properties — no hooks, no context.

<div style={{ color: "var(--ink)" }}>
  Ink-colored text, regardless of which theme is active.
</div>

To switch themes at runtime, flip document.documentElement.dataset.theme — every token updates in one paint. Or swap css-is-awesome/min.css for css-is-awesome/core.css (tokens + resets only) when you want to author the rest yourself.

Download a theme file

Every shipped theme is a single theme.css file. Grab one, place it in your project, and link to it. This path also works for any custom theme you self-host — the file is just tokens on :root.

Drop the file into your project (for example public/themes/ or assets/css/) and reference it with a standard <link>, paired with the compiled library.

<link rel="stylesheet" href="./path/to/theme.css">
<link rel="stylesheet" href="./path/to/css-is-awesome.min.css">

Verify

However you installed, a styled success badge is the quickest smoke test. If this renders as a filled pill with the theme’s success color, you’re done.

Installed
import Badge from "@/components/Badge";

<Badge status="success">Installed</Badge>
Theme