@cirthcss/cirth 0.2.0 → 0.3.0

package/README.md

@@ -24,9 +24,13 @@
   ·
   <a href="#customization">Customization</a>
   ·
+  <a href="#documentation">Documentation</a>
+  ·
+  <a href="#browser-support">Browser support</a>
+  ·
   <a href="#philosophy">Philosophy</a>
   ·
-  <a href="#roadmap">Roadmap</a>
+  <a href="#comparison">Comparison</a>
 </p>
 
 <p align="center">
@@ -36,7 +40,7 @@
   <a href="https://github.com/cirthcss/cirth/releases">
     <img alt="GitHub Release" src="https://img.shields.io/github/v/release/cirthcss/cirth?include_prereleases">
   </a>
-  <img alt="Status" src="https://img.shields.io/badge/status-early%20stabilization-orange">
+  <img alt="Status" src="https://img.shields.io/badge/status-active%20development-blue">
   <img alt="License" src="https://img.shields.io/badge/license-MIT-blue">
 </p>
 
@@ -45,7 +49,7 @@
 Include one stylesheet and write ordinary semantic HTML.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.2.0/dist/cirth.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@cirthcss/cirth@0.3.0/dist/cirth.min.css">
 ```
 
 ```html
@@ -98,8 +102,9 @@ The main generated stylesheets are:
 | `dist/cirth.classless.scoped.min.css` | Scoped classless build. |
 
 Theme-specific builds are also generated, for example
-`dist/cirth.slate.min.css` and `dist/cirth.classless.slate.min.css`. The theme
-set is still being reviewed and will likely become smaller.
+`dist/cirth.jade.min.css` and `dist/cirth.classless.slate.min.css`. Cirth
+ships three maintained themes — azure (default), jade, and slate — each with
+light and dark variants. See [Colors](docs/colors.md) for the full list.
 
 ### Classless
 
@@ -152,7 +157,79 @@ For scoped builds, put the overrides on the scoped root:
 ```
 
 The generated CSS in `dist/cirth.css` is the most reliable reference for the
-current custom property surface.
+current custom property surface. The [Customization](docs/customization.md)
+page covers the token layers, color groups, and light/dark switching in
+detail.
+
+## Documentation
+
+The full documentation lives in [`docs/`](docs/) as a
+[VitePress](https://vitepress.dev) site with live examples. The site itself
+is styled with Cirth's own default build — the header, sidebar, prose, and
+every demo are ordinary semantic HTML dogfooding the framework.
+
+Run it locally:
+
+```sh
+npm install
+npm run docs:dev
+```
+
+- **Getting started** —
+  [Get Started](docs/get-started.md) ·
+  [Customization](docs/customization.md) ·
+  [Colors](docs/colors.md) ·
+  [About Cirth](docs/about.md)
+- **Layout** —
+  [Document](docs/layout/document.md) ·
+  [Landmarks](docs/layout/landmarks.md) ·
+  [Section](docs/layout/section.md) ·
+  [Container](docs/layout/container.md) ·
+  [Grid](docs/layout/grid.md) ·
+  [Overflow auto](docs/layout/overflow-auto.md)
+- **Content** —
+  [Typography](docs/content/typography.md) ·
+  [Link](docs/content/link.md) ·
+  [Button](docs/content/button.md) ·
+  [Table](docs/content/table.md) ·
+  [Code](docs/content/code.md) ·
+  [Figure](docs/content/figure.md) ·
+  [Embedded content](docs/content/embedded.md) ·
+  [Misc](docs/content/misc.md)
+- **Forms** —
+  [Overview](docs/forms/index.md) ·
+  [Checkbox, radio, switch](docs/forms/checkbox-radio-switch.md) ·
+  [Input color](docs/forms/input-color.md) ·
+  [Input date](docs/forms/input-date.md) ·
+  [Input file](docs/forms/input-file.md) ·
+  [Input range](docs/forms/input-range.md) ·
+  [Input search](docs/forms/input-search.md)
+- **Components** —
+  [Accordion](docs/components/accordion.md) ·
+  [Card](docs/components/card.md) ·
+  [Dropdown](docs/components/dropdown.md) ·
+  [Group](docs/components/group.md) ·
+  [Loading](docs/components/loading.md) ·
+  [Modal](docs/components/modal.md) ·
+  [Nav](docs/components/nav.md) ·
+  [Progress](docs/components/progress.md) ·
+  [Tooltip](docs/components/tooltip.md)
+- **Utilities** —
+  [Accessibility](docs/utilities/accessibility.md) ·
+  [Reduce motion](docs/utilities/reduce-motion.md)
+- **Project** —
+  [Build tooling](docs/build-tooling.md) ·
+  [Contributing](.github/CONTRIBUTING.md) ·
+  [Changelog](CHANGELOG.md)
+
+## Browser Support
+
+Cirth is designed and tested for the latest stable Chrome, Edge, Firefox,
+and Safari releases. The compiled CSS is processed with Lightning CSS
+against the Browserslist [`defaults`](https://browsersl.ist/#q=defaults)
+query (roughly: the last two versions of each major browser, everything
+above 0.5% global usage, and Firefox ESR). No version of Internet Explorer
+is supported.
 
 ## Philosophy
 
@@ -167,6 +244,36 @@ Core principles:
 - Avoid utility-first class soup and broad component catalogs.
 - Keep customization based on CSS custom properties.
 
+## Comparison
+
+Cirth, Pico CSS, and Tailwind CSS solve the same broad problem — styling
+HTML — with different trade-offs. This is directional, not a benchmark;
+actual bundle size depends on the utilities or components you end up using
+in every case.
+
+| | Cirth | Pico CSS | Tailwind CSS |
+| --- | --- | --- | --- |
+| Styling model | Semantic HTML first; classes only where semantics run out | Semantic HTML first; classes only where semantics run out | Utility-first; classes on nearly every element |
+| Typical markup | `<button>`, `<article>`, `<nav>` — no `.btn`, `.card` | Same | `<button class="rounded bg-blue-600 px-4 py-2 ...">` |
+| Customization | CSS custom properties, override after loading | CSS custom properties, override after loading | Config file (`tailwind.config.js`) plus utility classes |
+| Build step | None to use the default build; only needed to pick a theme | None to use the default build | Required for any production bundle (JIT/content scanning) |
+| Themes | 3 maintained (azure, jade, slate), light/dark each | ~20 accent colors, light/dark each | None built in; arbitrary via config |
+| Default build, gzip | ~13KB | ~11.5KB | No single default — depends entirely on utilities used |
+| Public Sass API | No — CSS only | Yes | N/A |
+
+**"Classless" Tailwind** setups — writing `@apply` rules against bare
+elements (`h1`, `button`, `article`) instead of adding utility classes to
+markup — get close to Cirth's authoring experience, but that layer is
+something you assemble yourself against Tailwind's utility values. It still
+needs the full Tailwind build pipeline (PostCSS, content scanning, JIT) and
+isn't a published, versioned stylesheet you can link directly. Cirth and
+Pico ship that layer already built, tuned, and versioned.
+
+Cirth is a fork of Pico CSS; the practical difference today is scope. Pico
+maintains a broader theme and utility surface and a public Sass API. Cirth
+trims both in exchange for a smaller, more curated build — see
+[Differences From Pico CSS](#differences-from-pico-css) below for specifics.
+
 ## Differences From Pico CSS
 
 Cirth began as a fork of Pico CSS, but it should be treated as an independent
@@ -184,24 +291,19 @@ The most important user-facing differences are:
   document styles, color schemes, and modal states.
 - Standalone color utility builds and fluid classless builds are not part of
   the public build surface.
-- The inherited theme set is being reduced toward a smaller group of maintained
-  examples.
+- The inherited 20-accent theme set has been reduced to three maintained
+  themes: azure (default), jade, and slate.
 
 ## Roadmap
 
-Cirth is still in early stabilization. The main public priorities are:
+Cirth is under active development, working toward a stable 1.0. The main
+public priorities are:
 
 - stabilize the CSS custom property surface;
 - audit inherited Pico CSS bugs and keep the fixes relevant to Cirth;
 - refine layout primitives and decide which utilities should remain;
-- reduce and document the theme set;
 - document the supported build variants and migration notes from Pico CSS.
 
-## Project Docs
-
-- Contribution workflow: [`.github/CONTRIBUTING.md`](.github/CONTRIBUTING.md)
-- Build and package details: [`docs/build-tooling.md`](docs/build-tooling.md)
-
 ## License
 
 Licensed under the [MIT License](LICENSE.md).