A cascade-layer CSS framework you never compile.
741 design tokens, automatic dark mode, fluid type & spacing — no build step, no Node, no JavaScript.

Website · Configurator · Documentation · Changelog

---

SLASHED — Standalone · Lean · Agnostic · Structured · Hybrid · Explicit · Deterministic — is a CSS framework built the other way around: instead of a toolchain that generates CSS, it ships CSS that generates your design system. Add one stylesheet:

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/codeslash-dev/SLASHED@dist/slashed.optimal.min.css">

Then rebrand the entire site by overriding six tokens. Every hover state, tint, shade, tonal step, the four status colors, and the complete dark palette derive from them — in plain CSS, at runtime, with nothing to recompile:

:root {
  --sf-color-primary-source-light:   #3b5bdb;
  --sf-color-secondary-source-light: #5c677d;
  --sf-color-tertiary-source-light:  #0c8599;
  --sf-color-action-source-light:    #0ca678;
  --sf-color-neutral-source-light:   #495057;
  --sf-color-base-source-light:      #f8f9fa;
}

Each color takes an optional -source-dark counterpart for per-mode control, and the derived status colors (success / warning / danger / info) can be overridden individually — up to 20 color knobs in total. Or use the light-dark() shorthand:

:root { --sf-color-primary: light-dark(#3b5bdb, #748ffc); }

To design visually instead, open the configurator: live light/dark preview of every token, override-CSS export, and shareable config links.

The name is the philosophy

Every letter of SLASHED is a design commitment, and each one is checkable against the source:

• Standalone — one stylesheet. No build step, no Node, no runtime dependencies.
• Lean — a foundation, not a kit. No utility-class bloat, nothing to purge, nothing you didn't ask for.
• Agnostic — no stack assumptions. Any CMS, any builder, any JS framework, plain HTML — if it renders a stylesheet, SLASHED runs on it. No vendor lock-in, ever.
• Structured — fifteen named cascade layers in a fixed order, and a fully catalogued token API with stability tiers (PUBLIC / PUBLIC-ADVANCED / INTERNAL).
• Hybrid — classless where it can be (base elements, opt-in form styling), class-based where it counts (layout primitives, macros, .sf-is-* states).
• Explicit — every visual value is a named token; hardcoded numbers are treated as bugs. Even the browser floor is stated up front instead of failing quietly.
• Deterministic — same tokens in, same design out. Every rule lives in a layer, so load order never changes the cascade, and every derived color and scale is computed by formula, not hand-picked.

What's inside

• 741 design tokens (--sf-*) covering color, typography, spacing, layout, borders, shadows, motion, and z-index — catalogued in a machine-readable API index.
• Layout primitives — .sf-container, .sf-stack, .sf-grid, .sf-cluster, .sf-sidebar, .sf-switcher, .sf-cover, .sf-center, .sf-frame, .sf-reel, .sf-bento, and more (docs/layout.md).
• Macros — recipes like .sf-prose, .sf-flow, .sf-truncate, .sf-aspect, .sf-scroll-shadow, .sf-surface (docs/macros.md).
• State classes — .sf-is-* classes mapped to ARIA semantics (docs/states.md).
• A fluid engine — the type, display, and space scales are generated at runtime from 12 input scalars (viewport range, modular ratios, base sizes). Change one ratio and the whole system recalculates — no build (docs/theming.md).
• Classless form styling, motion, accessibility, and print modules.

SLASHED is BEM-first: the token API is the product, and you build components on top. It ships a curated subset of utility classes in 0.x — heading (.sf-h1–.sf-h6), text-size (.sf-text-*), hover-transform (.sf-hover-*), list-reset, marker-colour, selection, and sticky helpers — with the rest staged. .sf-btn and .sf-card, live since v0.7.0 (in the -components and full bundles), are the component surface shipped so far; further components (badge, tag, alert, avatar, modal, a skeleton/placeholder shape) are planned — see docs/roadmap.md and #384. What you get today is the foundation plus those two components, honestly labelled.

Dark mode

Pure CSS — no script, no flash:

<html>                        <!-- follows the OS preference by default -->
<html data-theme="dark">      <!-- force dark -->
<section data-theme="dark">   <!-- dark section inside a light page -->

Cascade layers

Every rule lives in one of fifteen named @layers with a fixed order, declared in core/layers.css:

slashed.tokens → reset → base → forms → layout → components → macros →
utilities → states → themes → motion → accessibility → print → legacy →
overrides

Later layers win, regardless of selector specificity. slashed.overrides is reserved for you and sits last — your customisations always beat framework defaults, no !important required.

Bundles

Pre-built bundles ship with every release and on the CDN, each as readable, minified (+ source map), and layer-flattened .flat variants:

Bundle	Contents
slashed.optimal.css	all of core/ + classless forms — recommended
slashed.full.css	optimal + the component and utility layers (.sf-btn, .sf-card, and the curated utility helpers)

À la carte loading (individual source files)

core/layers.css must load first; optional/legacy.css is not bundled by default — add it explicitly if you need back-compat shims and load it last:

<!-- core -->
<link rel="stylesheet" href="core/layers.css">
<link rel="stylesheet" href="core/tokens.css">
<link rel="stylesheet" href="core/tokens.layout.css">
<link rel="stylesheet" href="core/tokens.macros.css">
<link rel="stylesheet" href="core/reset.css">
<link rel="stylesheet" href="core/base.css">
<link rel="stylesheet" href="core/themes.css">
<link rel="stylesheet" href="core/layout.css">
<link rel="stylesheet" href="core/macros.css">
<link rel="stylesheet" href="core/states.css">
<link rel="stylesheet" href="core/motion.css">
<link rel="stylesheet" href="core/accessibility.css">
<link rel="stylesheet" href="core/print.css">

<!-- optional -->
<link rel="stylesheet" href="optional/forms.css">

<!-- legacy shims (opt-in only) -->
<!-- <link rel="stylesheet" href="optional/legacy.css"> -->

Browser support

Floor: Chrome 125+, Safari 18.0+, Firefox 129+ (≈ April–September 2024). The color system, fluid engine, and scroll-driven animations depend on CSS features that arrived in 2024 with no graceful fallback:

Feature	Used for	Chrome	Safari	Firefox
light-dark()	every resolved color token	123	17.5	120
@property with inherits: true	animatable brand/status colors, initial reset	85	16.4	128
oklch(from …) relative color	hover/tint/shade/dark derivation	119	16.4	128
pow() math function	generative fluid type/space scales	125	15.4	118
animation-timeline: view()	scroll-driven animations	115	18.0	114
@starting-style	dialog / modal entry animations	117	17.5	129

optional/legacy.css smooths a few property-level gaps within that window but does not lower the color floor. If you must support older engines, SLASHED is not the right tool — and it would rather tell you that than break quietly.

Documentation

Guide	What's inside
Getting started	install, bundle choice, boilerplate, first rebrand — start here
Cookbook	copy-paste recipes for common builds (page shell, card grid, hero, sidebar, states)
Architecture	layers, file structure, class taxonomy, bundles, token contract, performance
Theming	rebrand in 6 tokens, dark mode, multi-brand, contrast
Layout primitives	every .sf-* layout class + tokens
Macros / recipes	every .sf-* macro class + tokens
Components	reserved component names + roadmap
State classes	every .sf-is-* + ARIA mapping + overlap semantics
Motion	animation classes, tokens, reduced motion
Class reference	every shipped class (generated)
Token reference	all --sf-* tokens + defaults (generated)
LLM guide	compact API reference for AI-assisted development
Migration	upgrading SLASHED + migrating from other frameworks

Building with an AI assistant? The slashed-build skill (.claude/skills/slashed-build/) turns this documentation set into a guided build workflow — mental model, decision tree, and routing into the docs above.

Editor integration

A generated VS Code CSS Custom Data file ships alongside the bundles, so every --sf-* token autocompletes with its description and default value in any editor that supports the format:

// .vscode/settings.json
{
  "css.customData": ["./node_modules/slashed/dist/css-custom-data.json"]
}

WordPress

The WordPress plugin — Bricks Builder and Gutenberg integrations plus a visual token editor in wp-admin — lives in its own repository: SLASHED-Plugins.

Development

npm run build        # build all dist/ bundles + docs
npm run watch        # rebuild on change
npm run lint:css     # stylelint all CSS
npm test             # full suite (unit + Playwright, light + dark)
npm run test:install # one-time: install the test browsers

Commits follow Conventional Commits; see CONTRIBUTING.md for setup and conventions.

License

MIT © CODE/