Get Started

Cirth styles standard HTML elements first. Load one stylesheet, write ordinary semantic markup, and most of your interface is already styled.

CDN #

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.15.0/dist/cirth.min.css"
  integrity="sha384-EY9wuVx8+257bjfSiQThO5hiMpZ+YQAcVqmR6XcdxqYI0+qEJ15YD3/RVWYApOiN"
  crossorigin="anonymous">

The integrity hash is the SHA-384 digest of that exact file: if the CDN ever answers with different bytes, the browser drops the stylesheet instead of applying it. crossorigin="anonymous" is what lets the browser read the response to check it. The hash is tied to the version in the URL: if you pin a different release, take that release's hash from its own copy of this page or from jsDelivr's file listing, because a mismatched pair blocks the stylesheet everywhere.

npm #

npm install @cirthcss/cirth

import "@cirthcss/cirth/dist/cirth.min.css";

Every published build also has a shorter exports path, for example @cirthcss/cirth/classless, @cirthcss/cirth/scoped, or @cirthcss/cirth/presets/plain; see Contributions for the full map. The dist/*.css paths keep working alongside them.

The package ships compiled CSS only. main and style both point at dist/cirth.min.css. SCSS sources in the repository are internal build infrastructure, not a published Sass API.

Quickstart #

<main class="container">
  <nav>
    <ul>
      <li><strong>Product</strong></li>
    </ul>
    <ul>
      <li><a href="#">Docs</a></li>
      <li><a href="#">Account</a></li>
    </ul>
  </nav>

  <article>
    <h1>Settings</h1>
    <form>
      <label>
        Email
        <input type="email" name="email" placeholder="you@example.com" autocomplete="email">
      </label>
      <button type="submit">Save</button>
    </form>
  </article>
</main>

No classes were added above beyond .container: <nav>, <article>, <form>, <label>, and <button> are styled directly.

Which build do I need? #

Cirth publishes four CSS builds from the same source:

All four builds share the same official copper theme. plain and playroom (see Colors) are optional presets: stylesheets that override an existing set of custom properties (color, shadow, type, spacing, motion). Load them after any of the four builds above, for example dist/presets/plain.min.css.

Classless #

<link rel="stylesheet" href="dist/cirth.classless.min.css">

<header>
  <hgroup>
    <h2>Cirth</h2>
    <p>Semantic by default. Classes only when needed.</p>
  </hgroup>
</header>
<main>
  <p>
    The classless build styles <code>body &gt; header</code>,
    <code>body &gt; main</code>, and <code>body &gt; footer</code> directly,
    without adding a single class.
  </p>
  <button type="button">Get started</button>
</main>
<footer>
  <small>Built with Cirth.</small>
</footer>

Scoped #

Useful when embedding Cirth into an existing page, CMS, widget, or app shell, where only descendants of .cirth should be styled.

<link rel="stylesheet" href="dist/cirth.scoped.min.css">

<div class="cirth">
  <article>
    <h3>Embedded widget</h3>
    <button type="button">Save</button>
  </article>
</div>

<div class="cirth">
  <article>
    <h3>Embedded widget</h3>
    <p>Everything inside <code>.cirth</code> is styled. Everything outside it is untouched.</p>
    <button type="button">Save</button>
  </article>
</div>

This documentation site is itself styled by Cirth's default build. The header nav, the sidebar, the prose you're reading, and every live example are ordinary semantic HTML with no documentation specific component framework on top.

Next steps #

• Customization: override the CSS custom property surface.
• Colors: the default theme, plus the plain/playroom presets.
• Layout: start reading the component reference.