Keystone ### One framework. Three pillars. Pick any. **Styles, icons, and behavior as three independent layers** — each a single include that works from a CDN or a local file, on its own or together. No dependencies. No build step. Drop the files in and go.
![Version](https://img.shields.io/badge/version-1.0.0-466A99?style=flat-square) ![License](https://img.shields.io/badge/license-Proprietary-595D61?style=flat-square) ![Dependencies](https://img.shields.io/badge/dependencies-0-466A99?style=flat-square) ![Build step](https://img.shields.io/badge/build_step-none-466A99?style=flat-square) ![Icons](https://img.shields.io/badge/icons-601-595D61?style=flat-square) ![Core size](https://img.shields.io/badge/core-~24KB_gzip-595D61?style=flat-square) **[Live demo](demo/index.html)** · **[Icon browser](icons/index.html)** · **[Design principles](DESIGN-PRINCIPLES.md)** · **[Roadmap](ROADMAP.md)** · **[Changelog](CHANGELOG.md)**
--- Each pillar is **independent** and reduces to a **single include**. Use any one, any two, or all three — they're designed to be used together but never depend on each other. | Pillar | Include | What it gives you | |--------|---------|-------------------| | **Style** | `` | Design tokens (`--ks-*`) + component classes (`.ks-*`) | | **Icons** | `` | 601 icons via `.ks-i--` — font embedded, **one self-contained file** | | **Behavior** | `` | From-scratch vanilla JS components + a runtime plugin system | There is **no required build step** to *use* Keystone and **no bundler** — the three files are shipped ready to serve. `keystone-icons.css` is generated (WOFF2 embedded); the other two are authored directly. ## Quick start ```html

Hello

It works.
``` See [`demo/index.html`](demo/index.html) for a full showcase of every component. ## Loading: remote (CDN) or local The includes are identical either way: ```html ``` - **Icons** embed their WOFF2 as a `data:` URI, so `keystone-icons.css` is genuinely a single file — no sibling assets folder, and the same file works from a CDN or local disk unchanged. - **Behavior** resolves its plugins config relative to its own URL (`import.meta.url`), so the CDN and local cases both find `plugins/config.json` automatically. ## Pillar 1 — Style All custom properties are namespaced `--ks-*`; all classes are `.ks-*`. Add `class="ks-body"` to `` for base typography, and `ks-scope` to opt into `box-sizing` on a subtree. - **Theming:** set `data-theme="dark"` on `` for the dark token set. Tokens are plain CSS custom properties — override any `--ks-*` value to retheme. - **Components:** `.ks-btn`, `.ks-card`, `.ks-input`/`.ks-field`, `.ks-badge`, `.ks-chip`, `.ks-alert`, `.ks-table`, `.ks-navbar`, `.ks-tabs`, `.ks-modal`, `.ks-dropdown`, `.ks-tooltip`, `.ks-toast`, `.ks-accordion`, `.ks-progress`, `.ks-spinner`, `.ks-avatar`, `.ks-list`, and more. CSS provides the **look**; interactive components respond to state classes the behavior layer toggles (`.is-open`, `.is-active`). Without the JS, they sit in their default state. ## Pillar 2 — Icons ```html ``` Icons use `currentColor`, so set `color` to recolor them. Size with `font-size` or the helpers `.ks-i-12 / -16 / -20 / -24 / -32 / -48`. This file is standalone — no JS or `keystone.css` needed. Browse and copy any of the 601 glyphs in [`icons/index.html`](icons/index.html). ## Pillar 3 — Behavior One `