DEV Community: FSCSS

How to generate 1,000 CSS classes in 3 lines of FSCSS

FSCSS — Thu, 15 Oct 2026 22:33:53 +0000

Open this example in the FSCSS IDE: Run it live

It is completely normal if this looks strange at first. FSCSS uses a small “template + loop” model so you can describe a pattern once and expand it into standard CSS.

@arr classes[ count(1000, 1) ]
.item-@arr.classes[] {
    margin: @arr.classes[]px;
}

Three lines in. About a thousand rules out.

Line 1 — Build a list of numbers

@arr classes[ count(1000, 1) ]

Piece	Meaning
`@arr classes[...]`	Declare an array named `classes`
`count(1000, 1)`	Count from 1 up to 1000

Behind the scenes the list is effectively:

[1, 2, 3, …, 999, 1000]

Arrays in FSCSS are 1-indexed and string-native. count(n, start) is the built-in that fills them without typing every value.

Line 2 — Loop the selector

.item-@arr.classes[] {

Piece	Meaning
`.item-`	Fixed class prefix
`@arr.classes[]`	Auto-loop: expand this rule once per item

Empty [] means “for each entry in the array.” The compiler stamps out:

.item-1 { ... }
.item-2 { ... }
.item-3 { ... }
/* … */
.item-1000 { ... }

Line 3 — Reuse the same index in the value

    margin: @arr.classes[]px;
}

Inside the same loop, @arr.classes[] is the current item. For .item-1 that becomes 1px; for .item-500, 500px.

So each expanded rule stays consistent: class number and property value come from the same step of the array.

Final CSS (abbreviated)

.item-1 {
    margin: 1px;
}
.item-2 {
    margin: 2px;
}
.item-3 {
    margin: 3px;
}
/* … hundreds of rules later … */
.item-1000 {
    margin: 1000px;
}

You are not shipping FSCSS to the browser forever. You either:

prototype in the IDE / runtime, or
compile with the CLI: fscss input.fscss output.css and ship plain CSS.

Real-world tweaks

Fixed step sizes (e.g. spacing scale):

@arr steps[4, 8, 12, 16, 24, 32, 48, 64]
.gap-@arr.steps[] {
  gap: @arr.steps[]px;
}

Fewer utilities, still generated:

@arr n[count(32, 1)]
.m-@arr.n[] { margin: calc(@arr.n[] * 0.25rem); }

Pair with %n() multiplexing when several properties share one value:

@arr n[count(8, 1)]
.box-@arr.n[] {
  %2(width, height[: calc(@arr.n[] * 8px);])
}

Docs: arrays · loop · num

Why this pattern exists

Utility sheets and design tokens often need many parallel rules (margins, radii, z-index layers, animation delays). Hand-writing them is slow and error-prone. A short FSCSS template:

Defines the data (@arr / count)
Loops selectors and values together ([])
Compiles to boring, predictable CSS

Same idea powers denser modules (charts, staggered delays, icon packs)—the 1,000-class demo is just the clearest “aha.”

Try it

Open the IDE link above.
Press Ctrl+Enter (Cmd on Mac) to compile.
Scroll the CSS panel — you should see .item-1 through .item-1000.

Then change 1000 to 12 or replace count(...) with a hand-picked list and compile again.

FSCSS: npm · docs · IDE

Build a Pure CSS Radar Chart — Lightweight, Max Performance

FSCSS — Sun, 11 Oct 2026 19:55:02 +0000

Most radar charts pull in SVG path math or a JavaScript charting library. You can skip both.

With st-core.fscss v2, a spider (radar) chart is:

an FSCSS array of scores (0–100)
polar coordinates stored as CSS variables (--st-sxN, --st-syN)
shapes drawn with clip-path: polygon()
rings and spokes from gradients

No canvas. No SVG. No chart runtime on the critical path.

Source: github.com/fscss-ttr/st-core.fscss

Here’s how it works

1. Data is an array

@arr skills[80, 65, 90, 55, 70, 85]

Length can be 5, 6, 8 — whatever you need. Geometry (number of polygon vertices) is fixed when FSCSS expands the mixins.

2. One mixin writes coordinates

.spider {
  @st-spider-points(skills, 42)  /* array, max radius % of the box */
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
}

For each index i:

angle = (i - 1) × 360° / N (0° at the top)
radius = (value / 100) × rmax
CSS gets:

--st-sxN: calc(50% + (r * 1%) * sin(θ));
--st-syN: calc(50% - (r * 1%) * cos(θ));

Trig stays in the browser’s calc(). Updating values later is rewriting those variables.

3. Renderers only read variables

@st-spider-fill(.spider-fill, skills)
@st-spider-line(.spider-line, skills)
@st-spider-dots(.spider-dot-, skills, 9px)
@st-spider-grid(.spider-grid)
@st-spider-spokes(.spider-spokes, skills)

Layer	Role
fill	Closed polygon through every `--st-sx/sy` pair
line	Dual-pass polygon (outer path + path scaled toward center) so the stroke has real thickness
dots	Absolutely positioned markers at each vertex
grid	Concentric rings (`radial-gradient`)
spokes	Thin radial axes (`conic-gradient`)

Rule: call @st-spider-points on the host. Children inherit. Same model as linear @st-chart-points / fill / line in st-core.

4. Markup is plain HTML

<div class="spider">
  <div class="spider-grid"></div>
  <div class="spider-spokes"></div>
  <div class="spider-fill"></div>
  <div class="spider-line"></div>
  <div class="spider-dot-1"></div>
  <div class="spider-dot-2"></div>
  <div class="spider-dot-3"></div>
  <div class="spider-dot-4"></div>
  <div class="spider-dot-5"></div>
  <div class="spider-dot-6"></div>
</div>

Dots need real nodes — the mixin emits .spider-dot-1 … .spider-dot-N rules; it does not invent elements.

Here’s how values can be displayed on the dot nodes

Markers are normal DOM nodes, so you can show the score next to (or inside) each dot without a chart API.

Option A — `data-value` + CSS `::after`

<div class="spider-dot-1" data-value="80"></div>
<div class="spider-dot-2" data-value="65"></div>
<!-- … -->

.spider-dot-1,
.spider-dot-2,
.spider-dot-3,
.spider-dot-4,
.spider-dot-5,
.spider-dot-6 {
  /* st-core already sets left/top from --st-sx / --st-sy */
}

[data-value]::after {
  content: attr(data-value);
  position: absolute;
  left: 50%;
  top: -1.4em;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-text);
  white-space: nowrap;
  pointer-events: none;
}

Push labels slightly outward per axis if they collide with the polygon (different top / left offsets per index).

Option B — nested label element

<div class="spider-dot-1">
  <span class="dot-label">80</span>
</div>

.dot-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: var(--st-muted);
}

Option C — update labels from JS with the series

function setSeries(host, values, rmax = 42) {
  const n = values.length;
  let css = "";
  values.forEach((v, i) => {
    const ang = (i * 360) / n;
    const r = (v / 100) * rmax;
    css += `--st-sx${i + 1}: calc(50% + (${r} * 1%) * sin(${ang} * 1deg));`;
    css += `--st-sy${i + 1}: calc(50% - (${r} * 1%) * cos(${ang} * 1deg));`;
    const dot = host.querySelector(`.spider-dot-${i + 1}`);
    if (dot) {
      dot.dataset.value = v;
      // or: dot.querySelector(".dot-label").textContent = v;
    }
  });
  host.style.cssText = css;
}

Geometry and labels stay in sync because both come from the same array pass.

Axis names (Speed, Quality, …) stay outside the dots — absolute labels around the circle — so vertices stay readable at small sizes.

Here’s why it’s lighter

Traditional radar	st-core radar
Chart.js / D3 / Recharts bundle	Mixins → CSS
SVG path string updates	Custom properties + `clip-path`
Layout + paint on every redraw	Often compositor-only if you transition `clip-path`
Library hydration before first paint	CSS paints as soon as the stylesheet applies

Compile time: FSCSS expands loops into concrete polygon() stops and selectors. Array length is fixed in the stylesheet.

Runtime: Changing scores is assigning --st-sxN / --st-syN (and optional label text). No path serializer, no virtual DOM for the shape.

Size: A compiled spider block is on the order of ~1 kb of CSS for the chart rules — not a 50–200 kb chart dependency.

Performance profile:

First paint: no JS required for a static series
Updates: style recalc + composite; avoid layout thrash if size is fixed
Multi-series: extra layers are extra divs + inherited variables, not extra chart instances

That’s “max performance” in the practical sense: minimum work per frame and minimum bytes on the wire.

Here are some use cases of spider (radar) charts

Skills / competency matrices — Speed, Quality, UX, Scale, Cost, Support for a team or candidate.
Product scorecards — Compare features across dimensions (performance, price, ecosystem, docs, support).
Sprint or OKR health — Delivery, quality, collaboration, predictability on one glanceable shape.
Security / compliance posture — Control families as axes; one polygon per system or vendor.
Player or character stats — Games and education UIs where polar layout is the expected metaphor.
Brand or perception studies — Trust, value, innovation, service — survey averages as radii.

Anywhere humans already think in “balanced vs spiky” profiles, a radar chart communicates faster than six separate bars.

Here’s how to do multi-series radar charts with still pure CSS

Each series is a separate host with its own @st-spider-points. Shared grid and spokes sit underneath.

@import((*) from st-core@v2)
@st-root()
@st-spider-root()

@arr seriesA[70, 55, 40, 85, 90]
@arr seriesB[45, 75, 60, 50, 55]
@arr seriesC[85, 40, 70, 35, 65]

@st-spider-fill(.fill-a, seriesA)
@st-spider-line(.line-a, seriesA)
@st-spider-dots(.dot-a-, seriesA, 8px)

@st-spider-fill(.fill-b, seriesB)
@st-spider-line(.line-b, seriesB)
@st-spider-dots(.dot-b-, seriesB, 8px)

@st-spider-fill(.fill-c, seriesC)
@st-spider-line(.line-c, seriesC)
@st-spider-dots(.dot-c-, seriesC, 8px)

@st-spider-grid(.spider-grid)
@st-spider-spokes-n(.multi-spokes, 5)

.multi-spider {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--st-surface);
}

.series-a {
  @st-spider-points(seriesA, 42)
  position: absolute;
  inset: 0;
  --st-accent: #ff9f43;
  --st-spider-fill-opacity: 20%;
}
.series-b {
  @st-spider-points(seriesB, 42)
  position: absolute;
  inset: 0;
  --st-accent: #54a0ff;
  --st-spider-fill-opacity: 16%;
}
.series-c {
  @st-spider-points(seriesC, 42)
  position: absolute;
  inset: 0;
  --st-accent: #ff6b9d;
  --st-spider-fill-opacity: 18%;
}

<div class="multi-spider">
  <div class="spider-grid"></div>
  <div class="multi-spokes"></div>

  <div class="series-a">
    <div class="fill-a"></div>
    <div class="line-a"></div>
    <div class="dot-a-1"></div>
    <div class="dot-a-2"></div>
    <div class="dot-a-3"></div>
    <div class="dot-a-4"></div>
    <div class="dot-a-5"></div>
  </div>

  <div class="series-b">
    <div class="fill-b"></div>
    <div class="line-b"></div>
    <div class="dot-b-1"></div>
    <!-- … -->
  </div>

  <div class="series-c">
    <div class="fill-c"></div>
    <div class="line-c"></div>
    <div class="dot-c-1"></div>
    <!-- … -->
  </div>
</div>

Why this stays pure CSS:

No JS chart instance per series
Isolation is DOM + custom properties, not a scene graph
Opacity and accent are tokens (--st-spider-fill-opacity, --st-accent)
Spoke count can match the axis count via @st-spider-spokes-n(..., 5) without tying spokes to one series’ array

If two series shared one host and only one @st-spider-points call, the last write would win and every series would draw the same shape. Separate hosts fix that — the same multi-series rule as linear st-core charts.

Quick start

FSCSS CLI, Vscode extention, or prototyping via its cdn

@import((*) from st-core@v2)

Full API in the repo: github.com/fscss-ttr/st-core.fscss

Pure CSS radar charts are not a compromise. With st-core they’re a styling problem: arrays in, variables out, polygons on screen — lightweight by construction, fast by default.

I made string-range-tokens (srTokens) — here’s what to use it for

FSCSS — Sat, 10 Oct 2026 19:33:19 +0000

A few days ago I had a simple, slightly weird idea:

What if every string was just an array of single letters… and I could rebuild words, paths, and API links by pointing at index ranges?

That experiment turned into string-range-tokens (srTokens).

It’s a tiny, zero-dependency ESM package that does one thing well:

Turn any string into a letter-per-index token array, then reassemble pieces of it with clean range calls.

No regex. No string slicing gymnastics. Just indexes.

The 30-second version

import { toTokens, sub, build } from 'string-range-tokens';

const t = toTokens('https://api.example.com/v1/users');

sub(t, 0, 4);                 // "https"
sub(t, 23, 25, [26, 31]);     // "/v1/users"
sub(t, -5, -1);               // "users"
build(t, [0, 4], [23, 25]);   // "https/v1"

That’s the core. Everything else is built on top of it.

What you can actually use it for

1. Assemble API paths from a shared pool

Instead of hard-coding every endpoint, keep one master string and pull the parts you need:

const pool = toTokens('https://api.myapp.com/v1/users/orders/products/settings');

const users    = build(pool, [0, 22], [23, 27]);     // https://api.myapp.com/v1/users
const orders   = build(pool, [0, 22], [29, 34]);     // https://api.myapp.com/v1/orders
const products = build(pool, [0, 22], [36, 43]);     // https://api.myapp.com/v1/products

Useful when you want a single source of truth for the base URL + version and then compose endpoints on the fly.

2. Build words from a letter pool (like a tiny anagram engine)

const letters = toTokens('the quick brown fox jumps over the lazy dog');

const ranges = plan(letters, 'fox jumps');
build(letters, ...ranges);   // "fox jumps"

plan(letters, 'lazy dog');   // finds the ranges
plan(letters, 'brown');      // finds "brown"

plan() does a greedy longest-match search and returns the ranges that reconstruct the target. If a character is missing, it throws. Great for puzzles, teaching, or constrained string generation.

3. Negative indexes for “from the end” slicing

const t = toTokens('invoice-2026-10-09-final.pdf');

sub(t, -9, -1);     // "final.pdf"
sub(t, -14, -10);   // "10-09"
sub(t, 0, 6, [-9, -1]); // "invoice-final.pdf"

Feels natural once you start thinking of the string as a fixed array.

4. Scatter & gather — deterministic scramble

Sometimes you want to shuffle a string in a repeatable way and still be able to put it back together:

const { pool, key } = scatter('/api/private/orders', 42);

console.log(pool.join(''));  
// something like "r/paeivtr/o/psordo" (order depends on seed)

gather(pool, key);  
// "/api/private/orders"  ← perfect round-trip

Same seed always produces the same shuffle. Handy for demos, tests, or playful obfuscation (remember: this is not security).

5. Tiny templating from a fixed alphabet

const alphabet = toTokens('abcdefghijklmnopqrstuvwxyz0123456789-_.');

// build a fake ID
const id = build(alphabet, 
  [0, 0], [1, 1], [2, 2], [10, 10], [26, 26], [27, 27]
); // "abc k01" → wait, better with plan or explicit ranges

// or more expressively:
const ranges = plan(alphabet, 'user-42');
build(alphabet, ...ranges); // "user-42"

You can keep a single character pool and generate many different strings from it.

6. Teaching indexing and ranges

Because everything is explicit indexes, it’s surprisingly good for explaining:

zero-based indexing
inclusive ranges
negative indexing
how Array.from handles Unicode

toTokens('a😳b');           // ['a', '😳', 'b']  — emoji is one token
sub(toTokens('hello'), 1, 3); // "ell"

Students can see exactly which characters are being selected.

Full API at a glance

Function	What it does
`toTokens(str)`	String → array of single characters (Unicode-safe)
`sub(tokens, s, e, …)`	Join one or more inclusive ranges
`build(tokens, …ranges)`	Same idea, ranges-only style
`plan(tokens, target)`	Find ranges that rebuild `target`
`scatter(str, seed)`	Seeded shuffle → `{ pool, key }`
`gather(pool, key)`	Reconstruct original from scatter output

All functions are pure. Zero dependencies. Works in Node 18+, Deno, Bun, and modern browsers.

TypeScript types are included, and you can even import the .ts source directly if your runtime supports it.

Install

npm i string-range-tokens

Or skip the install and just copy src/index.js — it’s a single file.

CDN:

import { toTokens, sub, build, plan, scatter, gather } 
  from 'https://cdn.jsdelivr.net/npm/string-range-tokens@1.0.0/src/index.js';

Important note about “hiding” strings

This is string assembly, not encryption.

Anything that ends up in the browser can be read by the user. Never try to hide real API keys, tokens, or secrets with it. Keep those on the server (Node Functions services, Cloudflare Workers, etc.).

Use srTokens for clarity, composition, teaching, and fun — not for security theater.

Introducing overlapui.css — drop-in overlap stacks for any stack

FSCSS — Tue, 06 Oct 2026 16:17:58 +0000

You want stacked avatars, a peeking card pile, or a “+” that fans into actions — and you don’t want a JS component library or an FSCSS build step just for that.

overlapui.css is the plain-CSS build of overlapui: same behavior as the FSCSS module, shipped as a single stylesheet you can link from npm or jsDelivr and use with utility class names.

Works with any modern web setup: static HTML, React, Vue, Svelte, Next, Nuxt, Astro, WordPress themes — if you can load a CSS file, you can use it.

Install

npm

npm install overlapui

<link rel="stylesheet" href="node_modules/overlapui/overlapui.css">

CDN

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/overlapui@1.0.0/overlapui.min.css">

CSS import

@import url("https://cdn.jsdelivr.net/npm/overlapui@1.0.0/overlapui.min.css");

No FSCSS process required for this path.

Utility classes (drop-in)

Class	Role
`.avatar-overlap`	Horizontal face stack (`data-alph` + optional `img`)
`.card-overlap`	Vertical notification / card stack
`.img-overlap`	Overlapping photo strip
`.circle-overlap`	Radial menu (`--n` = satellite count)

Theme with --ou-* variables on :root or a parent — no preprocessor.

Minimal example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>overlapui CSS-only</title>
  <link rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/overlapui@1.0.0/overlapui.min.css">
  <style>
    :root {
      --ou-center-bg: #6366f1;
      --ou-ring: #0f172a;
    }
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      gap: 48px;
      background: #0b1220;
    }
  </style>
</head>
<body>
  <ul class="avatar-overlap" tabindex="0">
    <li data-alph="g">G</li>
    <li data-alph="h">H</li>
    <li data-alph="i">I</li>
    <li data-alph="j">J</li>
  </ul>

  <div class="circle-overlap" style="--n:5" tabindex="0">
    <button type="button" aria-label="Menu">+</button>
    <a href="#" aria-label="Home">H</a>
    <a href="#" aria-label="Search">S</a>
    <a href="#" aria-label="Chat">C</a>
    <a href="#" aria-label="Groups">G</a>
    <a href="#" aria-label="Profile">P</a>
  </div>
</body>
</html>

Hover or focus a stack to open it. Interaction is CSS-only.

Frameworks

Same classes in JSX/Vue/Svelte markup:

<ul className="avatar-overlap" tabIndex={0}>
  <li data-alph="a">Ada</li>
  <li data-alph="b">Bo</li>
</ul>

Import once in the app shell (layout.css, global.css, or import 'overlapui/overlapui.css').

Lightweight by design

Compiled from overlapui.fscss — one focused module, not a full design system
No runtime JS for open/close
Tokens (--ou-size, --ou-overlap, --ou-center-bg, …) keep restyles local
Prefer the FSCSS source when you need custom selectors or a smaller selective compile; use .css when you want drop-in speed

How to design overlapped / cascaded UI with overlapui (native CSS architecture)

FSCSS — Mon, 05 Oct 2026 13:25:05 +0000

Stacked faces in a members column. Notification cards that peek under each other. A “+” that fans into actions. That look is usually a pile of one-off CSS—or a JS component library.

overlapui.fscss turns it into a small architecture: shared tokens, four stack patterns, hover/focus open states, no JS for the motion.

This article is about how the pieces fit, not only how to import the module.

The idea: cascade by design

“Overlap UI” is a layout contract:

Rest — children share space (negative margin, peek, or stacked under a center).
Open — hover or :focus-within restores gap / orbit / full card height.
Tokens — size, gap, ring, timing live in --ou-*, not scattered magic numbers.
Plain CSS out — FSCSS expands @defines; the browser runs normal CSS.

@ou-root()          → design tokens
@avatar-overlap()   → horizontal faces
@card-overlap()     → vertical cards
@img-overlap()      → tilted photos
@circle-overlap()   → radial menu

One module, four cascades.

Install

FSCSS 1.2.5+.
Vscode: FSCSS Support

Example with browser runtime:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.5/runtime.min.js" defer></script>

@import((*) from overlapui)

@ou-root()
@avatar-overlap(.avatar-overlap)
@card-overlap(.card-overlap)
@img-overlap(.img-overlap)
@circle-overlap(.circle-overlap)
@ou-reduced-motion()

Architecture layer 1 — tokens (`--ou-*`)

Everything visual should read from the token sheet:

Concern	Examples
Motion	`--ou-time`, `--ou-ease`
Chrome	`--ou-ring`, `--ou-ring-width`
Avatar	`--ou-size`, `--ou-overlap`, `--ou-gap`
Card	`--ou-peek`, `--ou-card-h`, `--ou-card-gap`
Image	`--ou-img`, `--ou-img-overlap`, `--ou-img-tilt`
Circle	`--ou-item`, `--ou-r`, `--ou-center-bg`, `--n`

@ou-root()

:root {
  --ou-ring: #0f172a;
  --ou-center-bg: #6366f1;
  @ou-avatar-size(40px, -12px)
  @ou-circle-size(48px, 80px)
}

Fit: product theme = override tokens once; stack mixins stay unchanged. Same pattern as st-core’s --st-* or circle-progress’s --progress-*.

Architecture layer 2 — rest vs open

Each mixin encodes the same state machine in CSS:

Pattern	Rest	Open (`:hover` / `:focus-within`)
Avatar	`margin-left: var(--ou-overlap)`	siblings get `var(--ou-gap)`
Card	`margin-top: peek − height`	siblings get `var(--ou-card-gap)`
Image	overlap + tilt	gap + `rotate(0)`
Circle	satellites `opacity: 0` under center	polar `rotate` + `translateY(−r)`

Fit: designers describe “collapsed density” and “expanded density”; you map those to tokens, not new class names per page.

Use tabindex="0" on the stack so keyboard users get the same open state.

Avatar cascade — members & presence

<ul class="avatar-overlap" tabindex="0">
  <li data-alph="g">Gina</li>
  <li data-alph="h"><img src="…" alt="">Hank</li>
  <li data-alph="5">Ops</li>
</ul>

Letter from data-alph (::before + font-size: 0 on the face so names stay in the DOM for a11y).
Optional img covers the letter.
FSCSS arrays map A–Z / 0–9 → palette at compile time.

Where it fits

Dashboard Members column
Comment “also notified” rows
Workspace switcher

@avatar-overlap(.members)

:root {
  @ou-avatar-size(28px, -10px)  /* denser in tables */
}

Card cascade — notifications without a drawer

<div class="card-overlap" tabindex="0">
  <div>
    <img src="…" alt="">
    <h3>Invoice paid</h3>
    Acme · $2,400
  </div>
  <div>…</div>
</div>

Peek amount is --ou-peek vs --ou-card-h. Open state is margin, not display toggles—cheap and animatable.

Fit: inbox previews, activity feeds, stacked tickets.

Image cascade — editorial strips

<div class="img-overlap" tabindex="0">
  <img src="…" alt="">
  <img src="…" alt="">
  <img src="…" alt="">
</div>

Rest: overlap + alternating tilt. Open: align and gap.

Fit: case-study heroes, “recent shots,” gallery teasers.

Circle cascade — radial settings / FAB

<div class="circle-overlap" style="--n:5" tabindex="0">
  <button type="button" aria-label="Settings">+</button>
  <a href="#profile" aria-label="Profile">P</a>
  <a href="#billing" aria-label="Billing">B</a>
  <a href="#team" aria-label="Team">T</a>
  <a href="#api" aria-label="API">K</a>
  <a href="#out" aria-label="Sign out">×</a>
</div>

First child = center (--ou-center-bg).
--n = number of satellites (not counting the center).
Position via --i and 360deg / var(--n).

Fit: topbar settings, mobile FAB, reaction pickers. Label the center and each action for screen readers.

Composing with the rest of the stack

overlapui does not own the page shell. It plugs into larger systems:

Same --ou-ring can align with a dark glass sidebar border so stacks feel native, not pasted on.

Responsive architecture

Scale tokens at breakpoints instead of rewriting markup:

@media (max-width: 520px) {
  :root {
    @ou-avatar-size(36px, -11px)
    @ou-circle-size(40px, 64px)
  }
}

Horizontal stacks: allow scroll or smaller --ou-size. Tables: overflow-x: auto on a wrapper; keep avatars in the first column.

Accessibility (part of the architecture)

Real names in the DOM for avatars.
aria-label on circle center and actions.
tabindex="0" on stacks for focus-within.
@ou-reduced-motion() kills springy transitions when preferred.

Mental model checklist

Pick a cascade type (avatar / card / image / circle).
Set density tokens (overlap vs gap, size, radius).
Mark the root with tabindex="0" if it should open from keyboard.
Theme with --ou-*, not one-off overrides on every child.
Compile with FSCSS ship CSS.

module

fscss-ttr / overlapui.fscss

CSS-first overlapping UI stack: avatars, cards, and images that overlap at rest and spread on hover/focus in FSCSS

overlapui.fscss

CSS-first overlapping UI stacks for the FSCSS ecosystem.
Avatars, cards, images, and radial circle menus that overlap at rest and open on hover/focus — no JS required for the interaction.

MIT Licensed · github.com/fscss-ttr/overlapui.fscss

Requires FSCSS v1.2.3+. Recommended: FSCSS 1.2.5 or later (stable shorthands + array attribute maps).

1. What is overlapui?

overlapui.fscss is an FSCSS module for stacked UI:

Component	Behavior
Avatar overlap	Circles pull together; hover/focus spreads them; `data-alph` sets letter + color
Card overlap	Cards peek under each other; expand vertically on hover/focus
Image overlap	Tilted photos overlap; straighten and gap on hover/focus
Circle overlap	Center trigger; other children fan out on a ring on hover/focus (`--n` = satellite count)

Everything is driven by --ou-* custom properties. Compile with the CLI or…

View on GitHub

Live chart updates without re-rendering the DOM — st-core + one CSS variable write

FSCSS — Sat, 03 Oct 2026 22:39:31 +0000

When data changes every second, the expensive path is rebuilding markup or redrawing a canvas. With st-core@v2, the chart is already pure CSS (clip-path fill/line driven by --st-p1 … --st-pN). Live updates only need JavaScript to rewrite those variables on the chart layers.

Template: templates/live-shift

JS: dashboard.js

Why this is low-overhead

Approach	Cost on each tick
Rebuild table / SVG nodes	DOM create/destroy, layout
Full chart library redraw	Often heavy paint + JS
st-core live shift	Set `element.style` CSS variables; browser composites the existing layers

You need real-time, low-overhead updates: for fast-changing streaming data (crypto or stock ticker), updating an st-core chart means modifying the CSS custom properties on the fill/line elements. No list re-render, no virtual DOM diff for the plot itself.

How the template is split

File	Role
`dashboard.fscss`	`@arr priceData[...]`, `@st-chart-fill` / `line` / `grid`, phone shell
`dashboard.css`	Compiled CSS
`dashboard.js`	Random-walk series → `--st-pN` + labels
`index.html`	Markup only

Initial geometry and series length are declared in FSCSS:

@arr priceData[42, 55, 48, 68, 61, 79, 72, 85]

@st-chart-fill(.chart-fill, priceData)
@st-chart-line(.chart-line, priceData)

JS keeps the same length and only pushes new values into the same --st-p* slots.

The update path

Normalize human values (0–100 “up is higher”) into st-core’s inverted Y vars, then assign in one cssText pass:

function normalize(v) {
  return 100 - Math.max(0, Math.min(100, v)) + '%';
}

function applySeries(arr) {
  const vars = arr
    .map((v, i) => `--st-p${i + 1}: ${normalize(v)};`)
    .join(' ');
  fill.style.cssText = vars;
  line.style.cssText = vars;
}

Each tick: shift the window, append a new sample, apply:

function shift() {
  const last = series[series.length - 1];
  const next = /* stream or random-walk */;
  series = [...series.slice(1), next];
  applySeries(series);
  // optional: text for P&L, allocation bar vars
}

setInterval(shift, 1200); // or your websocket handler

Allocation bars in the same demo use another token:

barEl.style.setProperty('--st-cat-bar-fill-range', eq + '%');

Still no chart DOM rebuild — width/fill is CSS.

Wiring a real stream

Replace the random walk with your feed:

socket.addEventListener('message', (ev) => {
  const price = JSON.parse(ev.data).price; // map to 0–100 or your scale
  series = [...series.slice(1), scale(price)];
  applySeries(series);
});

Keep N fixed (or regenerate CSS when N changes). Transitions on .chart-fill / .chart-line (clip-path transition in the template) give you motion “for free.”

When to use this

Tickers, live dashboards, status charts where N is stable
You already like CSS-first charts from st-core
You want updates that are basically style invalidation, not tree updates

When N changes often or you need hit-testing/tooltips per point, you may still add a thin JS layer — but the series itself can stay on CSS variables.

Try it

git clone https://github.com/fscss-ttr/st-core.fscss.git
cd st-core.fscss/templates/live-shift
# open index.html after dashboard.css is built, or use FSCSS runtime on dashboard.fscss

Source

FSCSS Shorthands: the full reference (1.2.5+)

FSCSS — Thu, 01 Oct 2026 08:20:08 +0000

FSCSS 1.2.5 adds property shorthands: compile-time rewrites that turn short property names into standard longhand CSS before the stylesheet ever reaches the browser. No runtime cost for these names in production, since a compiled build just ships plain CSS.

This is the reference version: every shorthand group, what it expands to, and the processing order the compiler applies. For the story behind the release.

npm install fscss@1.2.5

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.5/runtime.min.js" defer></script>

ESM build: https://cdn.jsdelivr.net/npm/fscss@1.2.5/esm.min.js

Everything below is optional helpers. Longhand CSS is always valid inside an FSCSS file, shorthands just save you from typing the same pair of properties over and over.

Processing order

The compiler expands shorthands in a fixed order, which matters when a name could be read two ways:

Side-scoped blocks (top| ... |)
Axis and size
Aliases and layout helpers
Border and radius
Background
ratio-fit()

Longer, more specific names win over shorter ones. scroll-mx resolves before the plain mx, bg-size resolves before the plain size.

Quick example

FSCSS:

.card {
  stack: 12px;
  px: 16px;
  py: 14px;
  rounded: 12px;
  bg: #12121a;
  border-x: 1px solid rgba(255,255,255,.08);
  shadow: 0 8px 24px rgba(0,0,0,.35);
  max-w: 360px;
}

.card h3 {
  fs: 1.1rem;
  fw: 600;
  m: 0;
}

Compiles to:

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-radius: 12px;
  background: #12121a;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  max-width: 360px;
}
.card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

One stack: plus a handful of two-letter properties replaces nine lines of longhand.

Axis & spacing

Shorthand	Expands to
`inset-x` / `inset-y`	left+right / top+bottom
`margin-x` / `mx`	margin-left + margin-right
`margin-y` / `my`	margin-top + margin-bottom
`padding-x` / `px`	padding-left + padding-right
`padding-y` / `py`	padding-top + padding-bottom
`gap-x` / `gap-y`	column-gap / row-gap
`scroll-mx` · `scroll-my` · `scroll-px` · `scroll-py`	scroll-margin / scroll-padding axes
`safe-x` · `safe-y` · `inset-safe`	padding/inset using `env(safe-area-inset-*)`

.overlay-side {
  pos: absolute;
  inset-x: 45px;  /* left + right only, top/bottom untouched */
  top: 0;
  h: 4px;
}

That last point is the reason inset-x exists at all: inset: auto 45px sets all four sides, there's no native shorthand that means "left and right only, leave the rest alone."

Size

Shorthand	Expands to
`w` / `h`	width / height
`min-w` · `max-w` · `min-h` · `max-h`	min/max width/height
`size: A`	width: A; height: A
`size: A B`	width: A; height: B
`min-size` / `max-size`	same one- or two-value pattern

.icon  { size: 24px; }
.panel { size: 100% 200px; max-w: 480px; }
.thumb { min-size: 48px; max-size: 120px 80px; }

.icon  { width: 24px; height: 24px; }
.panel { width: 100%; height: 200px; max-width: 480px; }
.thumb { min-width: 48px; min-height: 48px; max-width: 120px; max-height: 80px; }

Property aliases

Single-property renames, not axis pairs:

m mt mb ml mr · p pt pb pl pr · fs fw ff lh ls · ta td tt ws tsh · ov ovx ovy · z op cur pe us pos · jc ai ac ji js as pi · fdir fwrap grow shrink basis · trans anim tf fil · shadow aspect obj-fit obj-pos

.title {
  fs: 1.25rem;
  fw: 700;
  lh: 1.2;
  ta: center;
}

Layout helpers

Helper	Result
`center: x` / `y` / other	flex justify / align, or grid place-items center
`stack: G` / `hstack: G`	column/row flex with that gap
`fill` / `fill: fixed`	absolute or fixed, inset 0
`abs-center`	absolute, inset 0, margin auto
`truncate` / `line-clamp: N`	single-line ellipsis / multi-line clamp
`cols` / `rows`	grid, a number becomes `repeat(N, 1fr)`
`auto-fit: MIN`	`repeat(auto-fit, minmax(MIN, 1fr))`
`glass: BLUR` / `ring: W`	backdrop-filter blur / box-shadow ring

Place, origin, object

place-x expands to justify-content plus justify-items
place-y expands to align-content plus align-items
origin-x / origin-y set an axis of transform-origin
object-x / object-y set an axis of object-position

Side-scoped blocks

A side block rewrites every known property inside it (padding, margin, border, border-width/style/color, inset, offset, paired border-radius corners) to apply to just that side:

.card {
  top| padding: 8px; border-width: 1px; |
  left| margin: 12px; |
}

Supported sides: top, bottom, left, right, block-start, block-end, inline-start, inline-end.

Border & radius

border-x / border-y set a full border on left+right or top+bottom
border-t border-b border-l border-r for a single side
bw / bw-x / bw-t ... for border-width
bs-* for border-style, bc-* for border-color
rounded / radius for border-radius
rounded-t/b/l/r, rounded-tl and the other corners, radius-top and friends

Background

bg expands to background
bg-x / bg-y expand to background-position-x/y
bg-size-x / bg-size-y set a partial background-size
bg-color bg-image bg-repeat bg-pos bg-attachment bg-clip bg-origin bg-size map straight to their longhand names

`ratio-fit()`

.media-frame > img {
  inset: ratio-fit(16 / 9);
  obj-fit: cover;
}

Expands into absolute positioning, inset: 0, margin: auto, aspect-ratio, and width/height caps that use container-query units, so the box holds its ratio while staying inside whatever it's placed in. The exact formula tracks the compiler implementation, so treat the expansion above as the shape rather than a byte-for-byte guarantee.

Seen in a real file

Template

body {
  ff: 'Inter', system-ui, sans-serif;
  bg: #e8eaf0;
  min-h: 100vh;
  center: both;
  gap: 40px;
  py: 40px;
  px: 20px;
  fwrap: wrap;
}

.icon-btn {
  size: 32px;
  rounded: 10px;
  bg: rgba(255,255,255,0.06);
  center: both;
}

.loan-card {
  mx: 22px;
  mb: 18px;
  rounded: 16px;
  px: 16px;
  py: 14px;
  hstack: 12px;
  ai: center;
}

Full template: st-core.fscss / templates / budget-app.

Notes

Shorthands are optional. Longhand CSS is always valid in the same file.
Works through both the CLI and the browser runtime, but production should compile ahead of time rather than ship the runtime.
Older value-multiplexing helpers like %2() and %3() are unaffected and still work alongside 1.2.5 shorthands.
Full backward compatibility: nothing from pre-1.2.5 syntax breaks.

Tooling

The FSCSS VS Code extension highlights .fscss/.xfscss files, ships snippets for @define, @import, arrays and others, and adds an FSCSS: Compile command with compile-on-save. It needs the compiler installed separately (npm install -g fscss or as a project dependency), the extension itself just drives it.

How to build an analytics dashboard with FSCSS( st-core, circle-progress, and icon-mask)

FSCSS — Fri, 25 Sep 2026 08:15:16 +0000

A full walkthrough of the admin dashboard template: pure CSS charts, a traffic pie, mask icons, and a little JS for tabs and the mobile drawer — no Chart.js, no SVG charting library.

You will use

Module	Role
st-core@v2	Design tokens + revenue area/line chart
circle-progress	Traffic multi-pie
icon-mask	Sidebar / toolbar icons
FSCSS ≥ 1.2.3 (1.2.4+ recommended)	Compile or runtime

End result: responsive analytics shell (stats, chart, pie, goals, lists, table).

Architecture

index.html     → structure only
dashboard.fscss → tokens, layout, chart, pie, icons  →  dashboard.css
dashboard.js   → drawer, profile menu, --st-pN for chart ranges

FSCSS builds geometry and chrome at compile (or runtime) time.
JS only changes CSS variables when the user picks 7d / 30d / 90d.
Production: ship HTML + compiled CSS + JS (no FSCSS runtime in the browser).

1. Project files

admin-dashboard/
├── index.html
├── dashboard.fscss
├── dashboard.css    # generated
└── dashboard.js

mkdir admin-dashboard && cd admin-dashboard

2. FSCSS — modules, tokens, chart

Create dashboard.fscss.

Imports and roots

@import((*) from st-core@v2)
@import((*) from circle-progress)
@import((*) from icon-mask)

@st-root()
@progress-root()
@icon-pack()

Pulls in chart helpers, pie helpers, and icon utilities, then installs default CSS variables from each module.

Theme overrides

:root {
  --st-bg:        #0b0c10;
  --st-surface:   #12131a;
  --st-card:      #181924;
  --st-accent:    #22c55e;
  --st-text:      #f1f5f9;
  --st-muted:     #94a3b8;
  --st-border:    rgba(255,255,255,0.08);
  --st-radius-lg: 16px;

  --progress-size:   140px;
  --progress-stroke: 16px;

  @icon-color(#94a3b8)
  @icon-size(20px)
}

Green accent, dark surfaces. Icon defaults apply to .icon masks from icon-mask.

Minimal reset + shell

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  min-height: 100vh;
  background: var(--st-bg);
  color: var(--st-text);
  font-family: system-ui, sans-serif;
  display: flex;
}

.sidebar {
  width: 240px;
  background: var(--st-surface);
  border-right: 1px solid var(--st-border);
  padding: 24px 16px;
  position: sticky;
  top: 0;
  height: 100vh;
}

.main {
  flex: 1;
  padding: 24px 28px;
  overflow-y: auto;
}

.card {
  background: var(--st-card);
  border: 1px solid var(--st-border);
  border-radius: var(--st-radius-lg);
  padding: 22px;
}

Flex body: sidebar + main. Cards use st-core-style tokens.

Revenue chart (st-core@v2)

@arr data7d[42, 58, 65, 60, 78, 70, 92]

@st-chart-fill(.rev-fill, data7d)
@st-chart-line(.rev-line, data7d)
@st-chart-grid(.rev-grid, 5, 7)

.chart {
  @st-chart-points(data7d)
  position: relative;
  height: 220px;
}

.rev-fill {
  --st-accent: #22c55e;
  opacity: 0.22;
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.rev-line {
  --st-accent: #22c55e;
  @st-chart-line-width(2.5px)
  transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

What this does

@arr data7d[…] — compile-time length (7 stops).
@st-chart-points — writes --st-p1…7 as inverted Y (num(100 - v)%).
Fill + line — clip-path polygons from those variables.
JS can later overwrite --st-pN; CSS transitions the shape.

Markup for the chart:

<div class="chart" id="revenueChart">
  <div class="rev-fill"></div>
  <div class="rev-line"></div>
  <div class="rev-grid"></div>
</div>

Traffic pie (circle-progress)

@circle-pie-multi(.traffic-pie)

.traffic-pie {
  --progress-size: 140px;
  --pie-a: 45;
  --pie-b: 30;
  --pie-c: 15;
  --pie-d: 10;
  --progress-color-arc: #22c55e;
  --progress-arc-2: #3b82f6;
  --progress-arc-3: #8b5cf6;
  --progress-arc-4: #f59e0b;
  position: relative;
}

Four slices from CSS variables. Optional hole with a pseudo-element so a center label can sit on top.

Icons (icon-mask)

.logo .icon { @icon-color(#22c55e) @icon-size(24px) }
.nav a.active .icon { @icon-color(#22c55e) }

In HTML, icons are empty spans with classes the pack understands:

<span class="icon icon-home"></span>
<span class="icon icon-chart"></span>

Responsive sidebar

@media (max-width: 1100px) {
  .menu-btn { display: grid; }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
  }
  .sidebar.open { transform: translateX(0); }
  .grid { grid-template-columns: 1fr; }
}

JS toggles .open on the sidebar and backdrop.

3. HTML — structure only

Skeleton of index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analytics Overview</title>

  <!-- Dev / preview: runtime -->
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.2.4/runtime.min.js" async></script>
  <link type="text/fscss" href="dashboard.fscss">

  <!-- Production after CLI:
  <link rel="stylesheet" href="dashboard.css">
  -->
</head>
<body>
  <div class="sidebar-backdrop" id="sidebarBackdrop"></div>

  <aside class="sidebar" id="sidebar">
    <div class="logo">
      <span class="icon icon-chart"></span> Figsh
    </div>
    <nav class="nav">
      <a href="#" class="active"><span class="icon icon-home"></span> Dashboard</a>
      <a href="#"><span class="icon icon-chart"></span> Analytics</a>
      <!-- more links -->
    </nav>
  </aside>

  <main class="main">
    <div class="topbar">
      <button class="menu-btn" id="menuBtn" type="button" aria-label="Open menu">
        <span class="icon icon-tasks"></span>
      </button>
      <h1>Analytics Overview</h1>
      <!-- search, notifications, profile -->
    </div>

    <div class="stats">
      <div class="stat-card">
        <div class="label">Total Sales</div>
        <div class="value">$48,290</div>
        <div class="delta up">↑ 12.5%</div>
      </div>
      <!-- more stats -->
    </div>

    <div class="grid">
      <div class="card">
        <div class="tabs">
          <button class="tab active" data-range="7d" type="button">7d</button>
          <button class="tab" data-range="30d" type="button">30d</button>
          <button class="tab" data-range="90d" type="button">90d</button>
        </div>
        <div class="chart" id="revenueChart">
          <div class="rev-fill"></div>
          <div class="rev-line"></div>
          <div class="rev-grid"></div>
        </div>
        <div class="x-labels" id="xLabels"><!-- filled by JS --></div>
      </div>

      <div class="card">
        <div class="traffic-pie">
          <div class="pie-center"><strong>100</strong><br><span>Total</span></div>
        </div>
        <!-- legend -->
      </div>
    </div>
  </main>

  <script src="dashboard.js"></script>
</body>
</html>

No chart config objects in HTML — only classes and a few ids for JS.

4. JavaScript — behavior + data → variables

dashboard.js does three jobs.

Mobile drawer

const menuBtn = document.getElementById('menuBtn');
const sidebar = document.getElementById('sidebar');
const backdrop = document.getElementById('sidebarBackdrop');

function openSidebar() {
  sidebar.classList.add('open');
  backdrop.classList.add('open');
}
function closeSidebar() {
  sidebar.classList.remove('open');
  backdrop.classList.remove('open');
}

menuBtn?.addEventListener('click', () => {
  sidebar.classList.contains('open') ? closeSidebar() : openSidebar();
});
backdrop?.addEventListener('click', closeSidebar);

Optional: swipe-to-close and edge-swipe-to-open on touch devices (same idea as the full template).

Chart ranges → `--st-pN`

const datasets = {
  '7d': {
    values: [42, 58, 65, 60, 78, 70, 92],
    labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
  },
  '30d': {
    values: [35, 48, 55, 62, 58, 70, 75, 68, 80, 85],
    labels: ['W1', 'W2', /* … */],
  },
  // '90d': …
};

function updateChart(range) {
  const data = datasets[range];
  const style = data.values
    .map((v, i) => `--st-p${i + 1}: ${100 - v}%;`)
    .join(' ');

  document.getElementById('revenueChart').style.cssText = style;
  document.getElementById('xLabels').innerHTML =
    data.labels.map((l) => `<span>${l}</span>`).join('');
}

document.querySelectorAll('.tab').forEach((tab) => {
  tab.addEventListener('click', () => {
    document.querySelectorAll('.tab').forEach((t) => t.classList.remove('active'));
    tab.classList.add('active');
    updateChart(tab.dataset.range);
  });
});

updateChart('7d');

Why 100 - v?

CSS 0% is the top of the box. A high score should sit high on the chart, so human 90 becomes --st-p*: 10%.

Length note: polygon stop count is fixed when you compile from @arr data7d (7 points). Extra --st-p8… for longer series need a longer compile-time array (or a max-N template). Tabs still update values and labels; see st-core docs for fixed vs bounded length.

Profile dropdown

const profileBtn = document.getElementById('profileBtn');
const dropdown = document.getElementById('profileDropdown');

profileBtn?.addEventListener('click', (e) => {
  e.stopPropagation();
  dropdown.classList.toggle('open');
});
document.addEventListener('click', () => dropdown?.classList.remove('open'));

5. Compile for production

npm install -g fscss@1.2.4
fscss dashboard.fscss dashboard.css

In index.html:

<link rel="stylesheet" href="dashboard.css">
<!-- remove runtime script and type="text/fscss" -->

CI option: GitHub Action on templates/**/*.fscss that runs the same command and commits dashboard.css for static hosting.

6. Mental model

Layer	Responsibility
FSCSS modules	Tokens, chart polygons, pie, icons
Your `.fscss`	Layout, theme, wire modules to classes
HTML	Regions and class names
JS	UX + map `number[]` → `--st-pN`

You are not driving a chart API. You are updating design tokens that already-drawn CSS shapes read.

7. Next steps

Swap green tokens for your brand.
Point datasets at a real API.
Reuse the same CSS in Svelte/React by setting style / cssText from props (see st-core integration/svelte).
Add React/Next wrappers later; the compile step stays the same.

Template & preview


Live preview	hub.devtem.org/st-core.fscss/templates/admin-dashboard/
Template source	github.com/fscss-ttr/st-core.fscss/tree/main/templates/admin-dashboard
st-core	github.com/fscss-ttr/st-core.fscss
circle-progress	github.com/Figsh/Circle-progress.fscss

Clone the template folder, run with runtime for a quick look, then compile to CSS for production.

Build the chrome and charts in FSCSS. Keep HTML boring. Let JS only move the numbers.

patterns.fscss: Write CSS in Plain English

FSCSS — Wed, 23 Sep 2026 16:30:13 +0000

Ship real UI from role-based phrases. No hand-rolled component sheets. FSCSS pattern() matches what you type, injects CSS, and lets you pass colors, sizes, and durations in the same line.

FSCSS version 1.2.4+

The idea

You register a short description and a CSS template once. Elsewhere in the stylesheet you write a normal-looking phrase. If the phrase scores high enough against that description, the template is expanded in place.

/* Library */
pattern(0.65: "solid filled primary button", `
  background: var(--pattern-accent);
  background: @match((?:bg|background):\s*([#\w().%-]+));
  color: var(--pattern-text-on-accent);
  /* … */
`)

/* App */
.btn-primary {
  solid filled primary button bg: #344466
}

No mixin name to remember. No build step required if you use the browser runtime. For production, compile once with the CLI (or a GitHub Action) and ship plain CSS.

Feature overview

1. Role-based descriptions

Patterns are named by role, not by a fixed color:

Good	Avoid
`solid filled primary button`	`solid purple primary button with white label`
`ghost outline button with accent border`	`blue outline button`

Colors live in design tokens (pattern-root) or arrive through @match when the caller supplies them. Role words stay stable when your palette changes; color words in the description go stale and pollute matching.

2. `@match` — parameters in the phrase

Inside a template, @match(regex) runs on the caller’s line. First capturing group wins.

background: var(--pattern-accent);
background: @match((?:bg|background):\s*([#\w().%-]+));

Phrase	Result
`solid filled primary button`	default token
`solid filled primary button bg: #0ea5e9`	override `#0ea5e9`

Labels used across the module include: bg / background, color / text / label, from / to, border, radius, lift, scale, duration / time, size, ring, min / max / pad / gap, thumb, fill, lines, and more.

Regexes stay simple ([#\w().%-]+ for colors, length patterns for sizes). FSCSS 1.2.4 rejects hostile nested quantifiers before compile.

3. Cascade fallbacks (no empty custom properties)

When a match fails, the engine can emit an empty value. A declared-but-empty custom property blocks the fallback:

/* Broken pattern */
--_bg: ;   /* defined but empty */
background: var(--_bg, var(--pattern-accent));  /* fallback never used */

This library uses the cascade instead:

background: var(--pattern-accent);              /* always present */
background: @match(...);                        /* empty → invalid → discarded */

Defaults always work. Overrides only apply when the phrase supplies a value.

4. Shared threshold

@define patterns(thr:0.65){`
  pattern(@use(thr): "…", `…`)
`}

@patterns(0.4)   /* caller sets sensitivity for the whole pack */

Threshold	Feel	Typical use
0.7–0.9	Strict	Short component names
0.4–0.5	Forgiving	Demo / longer role phrases
≤ 0.35	Very open	Easy collisions — keep descriptions unique

The demo uses 0.4 so paraphrases still hit without being reckless.

5. Design tokens in one place

@pattern-root()   /* writes --pattern-accent, radii, shadows, pads, … on :root */

Patterns reference tokens; callers override only what they need in the phrase.

6. Namespaced motion

Keyframes are prefixed (patternFadeInUp, patternShimmer, …) so they do not collide when you import other FSCSS modules.

What’s in the library

Cards — two-tone gradient (from / to / color), soft elevated surface (bg / radius)
Buttons — solid primary, surface, ghost outline (bg / color / border)
Hover — lift, scale, glow (lift / scale / glow)
Motion — fade-in-up, pulse, spin, shimmer + keyframes (duration)
Layout — centered max-width container, auto-fit grid, sticky translucent header, divider
Components — input + focus ring, pill badge, glass, tooltip, avatar + ring, skeleton, toggle track, progress track/fill, status alerts, tab underline, thin scrollbar
Text — single-line truncate, multiline clamp (lines)
A11y — :focus-visible ring, disabled muted state

Usage

Install

npm install fscss@1.2.4

Local import

@import((pattern-root, patterns) from "./patterns.fscss")

@pattern-root()
@patterns(0.4)

.hero {
  vibrant two tone gradient card from: #121212 to: #676756 color: #fff
}

.btn-primary {
  solid filled primary button bg: #344466
}

.btn-primary {
  lift up on hover with stronger shadow lift: -2px
}

Compile (CLI or CI)

fscss demo.fscss demo.css

The repo includes a GitHub Action that recompiles demo.css on every .fscss push. The live demo serves that compiled file — no runtime required on the page.

Browser runtime (playgrounds)

<link type="fscss" href="./demo.fscss">
<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.4/runtime.min.js" defer></script>

Design choices worth knowing

Descriptions are stable contracts. Change tokens freely; do not bake hex values into the match text.
One match group per concern. Keep regexes readable and 1.2.4-safe.
Defaults first, overrides second. That is the only reliable way to survive failed matches today.
Project-specific patterns belong in your own module. This pack is for roles many apps share.

Contribute

PRs welcome. Prefer:

Role-based, lexically distinct descriptions
Cascade defaults + simple @match
Namespaced pattern* keyframes
A short note in the PR with example phrases and the CSS they produce

See CONTRIBUTING.md.

Links

Write the role. Optionally pass the values in the same line. Get real CSS.

How to Use st-core.fscss with Svelte (Compiled)

FSCSS — Mon, 21 Sep 2026 11:00:57 +0000

st-core.fscss draws charts with pure CSS, clip-path polygons plus custom properties, no JS chart library, no SVG, no canvas. Svelte doesn't need to draw anything for it. It just needs to own the data and reactively set --st-p1, --st-p2, and so on whenever your series changes. Wanted to write up the actual integration because getting the responsibilities split correctly took me a minute the first time through.

Why compiled mode, not the runtime CDN

Svelte already has a build pipeline. Shipping the FSCSS runtime to a Svelte app just to expand a few chart mixins into static CSS is unnecessary work for the browser to do on every load. The runtime CDN script is fine for a CodePen or a quick static HTML demo, but for an actual Svelte or SvelteKit app you compile once at build time and import plain CSS.

Three layers, each with one job:

Layer	Job
FSCSS CLI	Expand `@st-chart-fill` / `@st-chart-line` into static CSS
Svelte	Reactive `data[]` → `--st-pN`
Browser CSS	Paint, plus optional `clip-path` transitions

Svelte state  →  style="--st-p1: 30%; --st-p2: 45%; …"
                      ↓
              compiled st-core.css
                      ↓
                 chart on screen

1. Write the FSCSS entry file

src/styles/st-core.fscss:

@import((*) from st-core@v2)

@st-root()

/* Length at compile time = number of polygon stops */
@arr chartData[0, 0, 0, 0, 0, 0, 0]

@st-chart-fill(.chart-fill, chartData)
@st-chart-line(.chart-line, chartData)

.chart {
  @st-chart-points(chartData)
  position: relative;
  width: 100%;
  height: 220px;
  background: var(--st-surface);
  border-radius: var(--st-radius-lg);
  overflow: hidden;
}

.chart-fill,
.chart-line {
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

The zeros are placeholders, they only matter for their count. Svelte overwrites the real Y values through CSS variables at runtime. What you can't change without recompiling is the array's length — match it to your series (7 days of data → 7 entries).

2. Compile it as part of your build

npm install -D fscss@latest
npx fscss src/styles/st-core.fscss src/styles/st-core.css

Wire it into package.json so it runs automatically before every build:

{
  "scripts": {
    "build:st-core": "fscss src/styles/st-core.fscss src/styles/st-core.css",
    "prebuild": "npm run build:st-core"
  }
}

Then import the compiled CSS once, wherever makes sense for your app (root layout, app.css, or the chart's parent component):

import '../styles/st-core.css';

3. Map your data to `--st-pN`

Chart geometry in st-core is top-down, the same way CSS itself is. A high value needs to sit near 0%, not 100%. So every point gets inverted:

--st-pᵢ = (100 - humanValue) %

A score of 90 ends up 10% from the top, which is exactly where you'd expect it visually.

Here's a reusable Chart.svelte that does that mapping reactively, Svelte 4 style:

<script>
  /** @type {number[]} 0–100, higher = taller */
  export let data = [];
  export let height = '200px';
  export let color = '#9d7eff';

  $: cssVars = [
    ...data.map((value, index) => `--st-p${index + 1}: ${100 - value}%`),
    `--st-accent: ${color}`,
    `height: ${height}`
  ].join('; ');
</script>

<div class="chart" style={cssVars}>
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
</div>

And the Svelte 5 version, using $props / $derived instead of the old export-let / reactive-statement pattern:

<script>
  let { data = [], height = '200px', color = '#9d7eff' } = $props();

  let cssVars = $derived(
    [
      ...data.map((value, index) => `--st-p${index + 1}: ${100 - value}%`),
      `--st-accent: ${color}`,
      `height: ${height}`
    ].join('; ')
  );
</script>

<div class="chart" style={cssVars}>
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
</div>

Both do the exact same job, just with whichever reactivity API your Svelte version uses.

4. Use it like any other component

<script>
  import './styles/st-core.css';
  import Chart from './lib/Chart.svelte';

  let weekly = [45, 70, 30, 90, 60, 80, 50];

  function randomize() {
    weekly = Array.from({ length: 7 }, () => Math.floor(Math.random() * 80) + 10);
  }
</script>

<Chart data={weekly} color="#4fffb0" height="250px" />

<!-- Svelte 4 -->
<button type="button" on:click={randomize}>Randomize</button>

<!-- Svelte 5 -->
<!-- <button type="button" onclick={randomize}>Randomize</button> -->

Reassigning weekly recomputes cssVars, the browser applies the new custom properties, and the compiled CSS's clip-path transition animates the shape change. No chart library re-rendering, no SVG path recalculation, no manual DOM diffing on your end.

Fixed length vs changing length

Because geometry is baked in at compile time, the array length is the one thing you can't change on the fly:

Situation	What to do
Always exactly N points	Compile `@arr chartData` with N zeros, always pass exactly N values from Svelte
Length varies, up to a max of M	Compile M zeros, then `data.slice(0, M)` and pad shorter series with `0`

If you compile a template expecting 5 points and hand it 8 values from Svelte, the extra --st-p6, --st-p7, --st-p8 have nowhere to go, there's no polygon stop for them until you recompile with a longer array.

What not to do in production

<!-- Fine for a demo, avoid as your only path in a real Svelte app -->
<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.3/runtime.min.js"></script>

Runtime mode is for CodePen and quick static HTML, not for a build pipeline that already exists. See the plain HTML integration sample if that's what you actually want.

The mental model, condensed

@st-chart-points, fill, and line define the structure and only ever read --st-p*.
Svelte's only job is to replace those variables when the data changes.
transition: clip-path gives you motion for free, no animation library needed.

Nothing here is Svelte-specific past step 3, the same pattern maps directly to Vue, React, or vanilla JS, only the reactivity layer changes. Contributions for other frameworks welcome under integration/.

Repo: github.com/fscss-ttr/st-core.fscss
Svelte sample: integration/svelte

Compile the chart. React to the data. Let CSS paint.

Pure CSS Charts? Yes, Really. Introducing st-core.fscss v2

FSCSS — Sat, 19 Sep 2026 19:10:33 +0000

If you've ever pulled in heavy libraries just to render a simple line chart, you know the drill: a few hundred KB of JavaScript, a canvas or SVG element, and a hydration step before anything even shows up on screen. For a lot of dashboards, that's massive overkill.

st-core.fscss takes a different approach. It's a CSS-only visualization system built on FSCSS that renders area charts, multi-line charts, and stat dashboards using nothing but clip-path: polygon() and CSS custom properties. No canvas. No SVG. No chart library shipping down the wire.

Here's how it works, and how to build real charts with it.

The Core Idea

Every chart in st-core is really just a polygon. Give the mixin an array of data points, and it:

Spaces the points evenly across the chart width (0% to 100%, based on array length)
Normalizes each value into a Y-position
Generates a clip-path: polygon() that traces the line (or fills the area beneath it)

@arr myData[50, 10, 97, 35, 66, 50, 80, 54, 70, 60]

@st-chart-fill(.chart-fill, myData)
@st-chart-line(.chart-line, myData)

That's the whole rendering pipeline. The array can be any length: 5 points, 50 points, doesn't matter.

Getting It Running

For Testing - Drop the runtime in your <head>:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.3/runtime.min.js" async></script>

Then import the module inside your <style> block:

@import((*) from st-core@v2)

Prefer a build step for production? The CLI compiles .fscss file straight to production CSS:

npm install -g fscss@latest
fscss input.fscss output.css

Vscode Extention for syntax highlights and auto-compile: FSCSS Support

A Basic Area Chart

<style>
@import((*) from st-core@v2)

@st-root()

@arr myData[20, 45, 28, 80, 65, 90, 40]

@st-chart-fill(.chart-fill, myData)
@st-chart-line(.chart-line, myData)

.chart {
  @st-chart-points(myData)
  position: relative;
  height: 200px;
  width: 100%;
  max-width: 400px;
  background: var(--st-surface);
  border-radius: 16px;
}
</style>

<div class="chart">
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
</div>

Two things worth calling out about how this splits responsibilities:

@st-chart-fill / @st-chart-line declare the renderer for a selector. The array argument just tells it how many points to expect.
@st-chart-points(myData) is what actually writes the --st-p1 through --st-p{n} values onto an element. Any child that doesn't call it inherits from the nearest ancestor that did — which is exactly what makes the multi-series case below work cleanly.

Multi-Line, Multi-Area Charts

This is where the point-inheritance model pays off. Each series gets its own renderer and its own explicit @st-chart-points call, so nothing bleeds into another series by accident:

@arr seriesA[30, 50, 75, 40, 85, 60]
@arr seriesB[10, 25, 45, 20, 55, 30]

@st-chart-fill(.fill-a, seriesA)
@st-chart-line(.line-a, seriesA)

@st-chart-fill(.fill-b, seriesB)
@st-chart-line(.line-b, seriesB)

.chart {
  @st-chart-points(seriesA)
  position: relative;
  height: 220px;
  width: 100%;
  background: var(--st-bg);
}

.fill-a {
  @st-chart-points(seriesA)
  opacity: 0.6;
  --st-accent: #9d7eff;
}
.line-a {
  @st-chart-points(seriesA)
  --st-accent: #9d7eff;
}

/* .fill-b / .line-b MUST set their own points, otherwise they'd
   silently inherit .chart's seriesA values */
.fill-b {
  @st-chart-points(seriesB)
  opacity: 0.3;
  --st-accent: #4fffb0;
}
.line-b {
  @st-chart-points(seriesB)
  --st-accent: #4fffb0;
}

<div class="chart">
  <div class="chart-fill fill-a"></div>
  <div class="chart-line line-a"></div>

  <div class="chart-fill fill-b"></div>
  <div class="chart-line line-b"></div>
</div>

Stack as many series as you want this way. Each one is independently opaque, colored, and pointed at its own array.

Custom Data Points and Markers

For a single highlighted marker (a peak, a tooltip anchor), use @st-chart-dot directly:

/* selector, x%, y%, size */
@st-chart-dot(.chart-dot, 70, 60, 12px)

To mark every point in a dataset automatically:

/* Generates .dot-1, .dot-2 ... .dot-N */
@st-chart-dots(.dot-, myData, 8px)

Combine that with @st-chart-grid(.chart-grid, rows, cols) and the axis wrappers @st-chart-axis-x / @st-chart-axis-y, and you've got a fully annotated chart with zero JS.

Making It Interactive Anyway

Pure CSS rendering doesn't mean the data has to be static. Updating a chart at runtime is just a matter of rewriting the --st-p{n} variables:

const chartLine = document.querySelector(".chart-line");
const normalize = (n) => (100 - n) + '%';

function updatePoints(pointsArray) {
  const cssVars = pointsArray
    .map((v, i) => `--st-p${i + 1}: ${normalize(v)};`)
    .join(' ');

  chartLine.style.cssText = cssVars;
}

updatePoints([50, 20, 85, 40, 95]);

Pair that with a transition: clip-path 0.6s cubic-bezier(0.4, 0, 0.2, 1); on .chart-fill / .chart-line, and dataset changes animate smoothly through the browser's compositor, without touching layout or paint.

Why This Matters

Zero hydration. The chart is visible the instant CSS parses. No JS has to boot before you see data.
Tiny footprint. The compiled output is shapes and custom properties, around 0.8kb minified.
GPU-accelerated updates. Because everything animates through clip-path and CSS variables, transitions run on the compositor thread instead of the main thread.

If you're building something where every kilobyte of JS matters (embedded widgets, low-power devices, SEO-sensitive pages), st-core gets you real, responsive charts without the usual charting-library tax.

st-core.fscss is MIT licensed and built on FSCSS

Repo: github.com/fscss-ttr/st-core.fscss

deepspace.fscss: a CSS planet in a box

FSCSS — Thu, 17 Sep 2026 22:12:06 +0000

A small FSCSS module that draws a deep-space scene: starfield, soft rays, atmosphere, rotating planet, and an orbiting moon. CSS (and FSCSS to package it).

Why a module?

The scene is easy to paste once and painful to keep consistent across pages. deepspace.fscss turns it into four helpers:

Helper	Role
`@deepspace-root()`	Tokens (size, glow, background)
`@deepspace-size(planet)`	Scale planet / system / moon together
`@deepspace(sel)`	Bind the scene to a host (default `body`)
`@deepspace-as-body()`	Full-viewport body reset when you want the page itself to be the stage

Important detail: the host is scoped. Use @deepspace(.scene) and overflow, stars, and motion stay inside that element. The rest of the page is untouched.

Contained demo

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.1/runtime.min.js" defer></script>

@import((*) from deepspace)

@deepspace-root()
@deepspace(.scene)
:root {
  @deepspace-size(200px)
}

body {
  margin: 0;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: #111;
  font-family: system-ui, sans-serif;
  color: #ccc;
}
main { width: min(420px, 92vw); }
h1 { font-size: 1rem; margin: 0 0 12px; font-weight: 600; }
.scene {
  height: 380px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
p {
  font-size: 13px;
  color: #888;
  margin: 12px 0 0;
}

<main>
  <h1>deepspace.fscss — contained</h1>
  <div class="scene">
    <div class="ds-rays"></div>
    <div class="ds-planet-system">
      <div class="ds-atmosphere"></div>
      <div class="ds-planet"></div>
      <div class="ds-moon-orbit"><div class="ds-moon"></div></div>
    </div>
    <div class="ds-title">Deep Space</div>
  </div>
  <p>Overflow stays inside <code>.scene</code></p>
</main>

Markup classes: ds-rays, ds-planet-system, ds-atmosphere, ds-planet, ds-moon-orbit, ds-moon, ds-title.

Live preview

Fork from the template:

codepen.io/editor/pen?template=01a0b135-563b-7138-a185-260878cab5fb

Full page (optional)

When the scene should own the viewport:

@deepspace-root()
@deepspace-as-body()
@deepspace(body)

Put the same ds-* children on body (or nest them as in the sample).

Tokens

Defaults from @deepspace-root() — override anytime:

--ds-planet, --ds-system, --ds-moon
--ds-glow, --ds-bg-top, --ds-bg-bottom, --ds-title

Or scale in one call: @deepspace-size(180px).

Requirements

FSCSS ≥ 1.2.1 (runtime or CLI)
Import via deepspace / from deepspace

CSS art stays maintainable when it’s a module with a host selector, not a one-off paste on body.

Repo: github.com/fscss-ttr/deepspace.fscss

DEV Community: FSCSS

How to generate 1,000 CSS classes in 3 lines of FSCSS

Line 1 — Build a list of numbers

Line 2 — Loop the selector

Line 3 — Reuse the same index in the value

Final CSS (abbreviated)

Real-world tweaks

Why this pattern exists

Try it

Build a Pure CSS Radar Chart — Lightweight, Max Performance

Here’s how it works

1. Data is an array

2. One mixin writes coordinates

3. Renderers only read variables

4. Markup is plain HTML

Here’s how values can be displayed on the dot nodes

Option A — data-value + CSS ::after

Option B — nested label element

Option C — update labels from JS with the series

Here’s why it’s lighter

Here are some use cases of spider (radar) charts

Here’s how to do multi-series radar charts with still pure CSS

Quick start

I made string-range-tokens (srTokens) — here’s what to use it for

The 30-second version

What you can actually use it for

1. Assemble API paths from a shared pool

2. Build words from a letter pool (like a tiny anagram engine)

3. Negative indexes for “from the end” slicing

4. Scatter & gather — deterministic scramble

5. Tiny templating from a fixed alphabet

6. Teaching indexing and ranges

Full API at a glance

Install

Important note about “hiding” strings

Links

Introducing overlapui.css — drop-in overlap stacks for any stack

Install

Utility classes (drop-in)

Minimal example

Frameworks

Lightweight by design

Links

How to design overlapped / cascaded UI with overlapui (native CSS architecture)

The idea: cascade by design

Install

Architecture layer 1 — tokens (--ou-*)

Architecture layer 2 — rest vs open

Avatar cascade — members & presence

Card cascade — notifications without a drawer

Image cascade — editorial strips

Circle cascade — radial settings / FAB

Composing with the rest of the stack

Responsive architecture

Accessibility (part of the architecture)

Mental model checklist

module

fscss-ttr / overlapui.fscss

CSS-first overlapping UI stack: avatars, cards, and images that overlap at rest and spread on hover/focus in FSCSS

overlapui.fscss

Table of Contents

1. What is overlapui?

Live chart updates without re-rendering the DOM — st-core + one CSS variable write

Why this is low-overhead

How the template is split

The update path

Wiring a real stream

When to use this

Try it

FSCSS Shorthands: the full reference (1.2.5+)

Processing order

Quick example

Axis & spacing

Size

Property aliases

Layout helpers

Place, origin, object

Side-scoped blocks

Border & radius

Background

Option A — `data-value` + CSS `::after`

Architecture layer 1 — tokens (`--ou-*`)

`ratio-fit()`

Chart ranges → `--st-pN`

2. `@match` — parameters in the phrase

3. Map your data to `--st-pN`