DEV Community: FSCSS tutorial

Create a simple form and style it with FSCSS

FSCSS tutorial — Thu, 22 Oct 2026 08:19:26 +0000

A short walkthrough: HTML structure, FSCSS for layout and chrome, then optional polish with tokens and the form module. Everything compiles to plain CSS.

1. Markup first

Keep the form boring and accessible. FSCSS does not replace labels or name attributes.

<form class="contact" action="#" method="post">
  <h1 class="contact__title">Contact</h1>
  <p class="contact__lead">We’ll reply within one business day.</p>

  <label class="field">
    <span class="field__label">Name</span>
    <input class="field__input" type="text" name="name" autocomplete="name" required>
  </label>

  <label class="field">
    <span class="field__label">Email</span>
    <input class="field__input" type="email" name="email" autocomplete="email" required>
  </label>

  <label class="field">
    <span class="field__label">Message</span>
    <textarea class="field__input field__input--area" name="message" rows="4" required></textarea>
  </label>

  <button class="btn" type="submit">Send</button>
</form>

2. Load FSCSS

Prototype (CDN runtime):

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.6/runtime.min.js" defer></script>
<link type="text/fscss" href="form-page.fscss">

Or compile:

npm install -g fscss@1.2.6
fscss form-page.fscss form-page.css

<link rel="stylesheet" href="form-page.css">

3. Style with layout helpers and tokens

stack, px / py, rounded, and friends (1.2.5+) keep the sheet short. See shorthands.

/* form-page.fscss */
:root {
  --bg: #0b1020;
  --surface: #121a30;
  --border: #22304f;
  --text: #e6edf7;
  --muted: #9fb0d0;
  --accent: #6366f1;
  --radius: 12px;
}

body {
  m: 0;
  min-h: 100vh;
  center: both;
  p: 24px;
  bg: var(--bg);
  color: var(--text);
  ff: system-ui, sans-serif;
}

.contact {
  w: 100%;
  max-w: 400px;
  stack: 16px;
  p: 24px;
  bg: var(--surface);
  border: 1px solid var(--border);
  rounded: 16px;
}

.contact__title {
  m: 0;
  fs: 1.35rem;
}

.contact__lead {
  m: 0;
  color: var(--muted);
  fs: 0.9rem;
}

.field {
  stack: 6px;
}

.field__label {
  fs: 0.8rem;
  color: var(--muted);
}

.field__input {
  w: 100%;
  px: 12px;
  py: 10px;
  rounded: var(--radius);
  border: 1px solid var(--border);
  bg: #0a0f1e;
  color: var(--text);
  font: inherit;
}

.field__input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.field__input--area {
  resize: vertical;
  min-h: 100px;
}

.btn {
  mt: 4px;
  px: 16px;
  py: 10px;
  border: 0;
  rounded: var(--radius);
  bg: var(--accent);
  color: #fff;
  font: inherit;
  fw: 600;
  cur: pointer;
}

.btn:hover {
  filter: brightness(1.08);
}

What you get after compile: normal flex column + gap, axis padding, radius, and colors—no framework runtime.

4. Optional: reusable button with `@define`

@define btn(bg: #6366f1){`
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 0;
  border-radius: var(--radius, 12px);
  background: @use(bg);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
`}

.btn {
  @btn(var(--accent))
}

.btn-ghost {
  @btn(transparent)
  border: 1px solid var(--border);
  color: var(--text);
}

5. Optional: `form.fscss` module

When you want float labels and shared field chrome instead of hand-rolled classes:

@import((form-root, form-group, form-input, form-label, form-float, form-btn-primary) from form)

@form-root()
@form-float(.form-group, .form-input, .form-label)

Markup pattern (input before label, placeholder=" " for :placeholder-shown tricks) is documented with the module. Use selective imports so you only pull what the page needs.

6. Optional: semantic styling with `pattern()` (1.2.4+)

pattern(0.55: "soft dark form card", `
  background: #121a30;
  border: 1px solid #22304f;
  border-radius: 16px;
  padding: 24px;
`)

.contact {
  soft dark form card
  stack: 16px;
  max-w: 400px;
}

Good for role-based phrases; keep critical layout in explicit rules so the form stays predictable.

7. Try it in the IDE

Open fscss.devtem.org/ide
Paste the HTML into an index.html and the FSCSS into form-page.fscss
Ctrl+Enter to compile, preview to check focus states
Export when you’re ready

Checklist

Labels associated with controls (wrapping <label> or for / id)
:focus styles visible on keyboard
Tokens on :root so themes don’t require rewriting fields
Production: compiled CSS only, not the runtime

Shorthands: https://fscss.devtem.org/shorthands
Docs: https://fscss.devtem.org/docs
IDE: https://fscss.devtem.org/ide
npm: fscss@1.2.6

A simple contact form is a good first FSCSS page: one column (stack), a few fields, one button—and the same file can grow into tokens, @define, or a form module without changing the HTML structure.

st-core.fscss now automates setup in the FSCSS IDE

FSCSS tutorial — Mon, 19 Oct 2026 14:52:06 +0000

Enabling st-core in the browser IDE no longer means hunting docs and pasting imports by hand. One terminal flow checks the package, installs helper snippets, drops a working line-chart + spider demo, compiles, and opens the preview.

Repo: fscss-ttr/st-core.fscss

Enable script: xfcmds/enable.xfcmd

Package config: package.json

IDE: fscss.devtem.org/ide · xfcmds guide

How it’s wired

In package.json:

"xfcmd": {
  "enable": "./xfcmds/enable.xfcmd",
  "disable": "./xfcmds/disable.xfcmd"
}

Plus the usual module metadata:

name: st-core, version: 2
fscss_version: >=1.2.3
file.modules / remote: ./st-core@v2.fscss
file.usage.directive: st-*
Long helpers list (root, container, phone, chart*, spider*, stat-card, …)

When you run libon st-core (or libck st-core → yes), the IDE loads enable.xfcmd from the package and runs it top to bottom.

What enable.xfcmd does

Announce — {name}@{version}, required FSCSS range, import line
add snippets for helpers — one editor snippet per helper in package.json
Extra snippets
- st-data — sample @arr series[...]
- st-chart-block — chart shell + @st-chart-points
- st-spider-block — spider shell + @st-spider-points
Create demo project under st-core-demo/
- Line chart FSCSS (@st-root, sales array, fill/line/dots/grid/axis)
- Spider / radar FSCSS (skills array, grid/spokes/fill/line/dots)
- index.html linking both + minimal markup
Open → compile → preview and print next steps in the terminal

Disable only removes snippets and prints a note; it does not delete st-core-demo/ (you remove that folder yourself if you want).

Try it in the IDE

Ctrl+`                 # terminal
libck st-core          # report + checks
yes                    # or: libon st-core

Expect:

Snippets for st-root, st-chart-fill, st-spider-points, …
Files under st-core-demo/
Preview with a weekly-style chart and a spider chart side by side

Then in any .fscss tab, type a helper name (e.g. st-chart-fill) to insert the snippet.

Selective import still works the usual way:

@import((
  st-root as root,
  st-chart-fill as area,
  st-chart-line as stroke,
  st-chart-points as points
) from st-core@v2)

Why this matters

Before	After
Read README, copy import, build HTML by hand	`libck` → `yes`
Guess helper names	Snippets from the real helper list
Empty workspace	Runnable chart + spider demo

Same xfcmd model any package can use: point package.json → enable / disable scripts, ship demos under a dedicated folder, keep liboff non-destructive.

How it’s wired

In package.json:

"xfcmd": {
  "enable": "./xfcmds/enable.xfcmd",
  "disable": "./xfcmds/disable.xfcmd"
}

Plus the usual module metadata:

name: st-core, version: 2
fscss_version: >=1.2.3
file.modules / remote: ./st-core@v2.fscss
file.usage.directive: st-*
Long helpers list (root, container, phone, chart*, spider*, stat-card, …)

When you run libon st-core (or libck st-core → yes), the IDE loads enable.xfcmd from the package and runs it top to bottom.

What enable.xfcmd does

Announce — {name}@{version}, required FSCSS range, import line
add snippets for helpers — one editor snippet per helper in package.json
Extra snippets
- st-data — sample @arr series[...]
- st-chart-block — chart shell + @st-chart-points
- st-spider-block — spider shell + @st-spider-points
Create demo project under st-core-demo/
- Line chart FSCSS (@st-root, sales array, fill/line/dots/grid/axis)
- Spider / radar FSCSS (skills array, grid/spokes/fill/line/dots)
- index.html linking both + minimal markup
Open → compile → preview and print next steps in the terminal

Disable only removes snippets and prints a note; it does not delete st-core-demo/ (you remove that folder yourself if you want).

Try it in the IDE

Ctrl+`                 # terminal
libck st-core          # report + checks
yes                    # or: libon st-core

Expect:

Snippets for st-root, st-chart-fill, st-spider-points, …
Files under st-core-demo/
Preview with a weekly-style chart and a spider chart side by side

Then in any .fscss tab, type a helper name (e.g. st-chart-fill) to insert the snippet.

Selective import still works the usual way:

@import((
  st-root as root,
  st-chart-fill as area,
  st-chart-line as stroke,
  st-chart-points as points
) from st-core@v2)

Why this matters

Before	After
Read README, copy import, build HTML by hand	`libck` → `yes`
Guess helper names	Snippets from the real helper list
Empty workspace	Runnable chart + spider demo

Same xfcmd model any package can use: point package.json → enable / disable scripts, ship demos under a dedicated folder, keep liboff non-destructive.

Open the IDE, run libck st-core, type yes, and you should land on a compiled pure-CSS chart demo without leaving the browser.

How to Build Dual-Pass Strokes with FSCSS Array Methods

FSCSS tutorial — Fri, 16 Oct 2026 11:48:07 +0000

clip-path: polygon() can fill a shape. It cannot stroke one.

So pure-CSS chart lines in FSCSS (and libraries like st-core) fake a stroke with a dual-pass polygon: walk the data forward for the top edge, walk it backward for a parallel edge offset by line width, fill the thin band between them.

This post unpacks that pattern with @arr, inline(), $, count(), and .reverse — the same building blocks used in st-core’s @st-chart-line.

The problem

You have points as CSS variables:

--st-p1: 32%;
--st-p2: 55%;
--st-p3: 20%;
/* … Y positions (top = 0%) */

You want a polyline with thickness, not a filled area under the curve.

SVG would use stroke + stroke-width. With only clip-path, you build a closed ribbon:

→ → → →  (along the data)
← ← ← ←  (back along data + width)

Fill that ribbon with background: var(--st-accent) and it reads as a line.

The full pattern

.line {
  position: absolute;
  inset: 0;

  @arr name-idx[count(@arr.name!.length, 1)]
  @arr name-reversed-idx[@arr.name-idx!.reverse]

  clip-path: polygon(
    inline("{}
      empty-@arr.name-idx[] {
        $i: @arr.name-idx[];
        num( <$i - 1> * 100 / <@arr.name!.length - 1>)% var(--st-p$i),
      }
    ")
    inline("{}
      empty-@arr.name-reversed-idx[] reverse {
        $i: @arr.name-reversed-idx[];
        $isLast: equal($i, 1);

        num( <$i - 1> * 100 / <@arr.name!.length - 1> )%
          calc(var(--st-p$i) + var(--st-chart-line-width)),
      }
    ")
    -100% calc(var(--st-p1) + var(--st-chart-line-width))
  );

  background: var(--st-accent);
}

Assume you already have:

@arr name[40, 60, 20, 80, 50]

and something (e.g. @st-chart-points) that wrote --st-p1 … --st-p5.

Piece by piece

1. Index array — `count()` + `@arr`

@arr name-idx[count(@arr.name!.length, 1)]

@arr.name!.length → number of data points (5 in the example)
count(5, 1) → sequence 1, 2, 3, 4, 5
Stored as @arr name-idx[...]

You loop indices, not raw values. Y still comes from var(--st-p$i).

2. Reversed index — `.reverse`

@arr name-reversed-idx[@arr.name-idx!.reverse]

Forward: [1, 2, 3, 4, 5]

Reverse: [5, 4, 3, 2, 1]

The second pass must go right → left so the polygon boundary does not cross itself when you close the band.

3. `inline("{} … ")` — expand loops inside `polygon()`

clip-path: polygon(...) is one CSS declaration. FSCSS cannot drop a normal block loop in the middle of the argument list. inline("...") runs the inner FSCSS and splices the text result into the polygon stop list.

inline("{}
  empty-@arr.name-idx[] {
    $i: @arr.name-idx[];
    num( <$i - 1> * 100 / <@arr.name!.length - 1>)% var(--st-p$i),
  }
")

Rough compile for 5 points:

0% var(--st-p1),
25% var(--st-p2),
50% var(--st-p3),
75% var(--st-p4),
100% var(--st-p5),

4. `empty-@arr.…[]` — the loop form

empty-@arr.name-idx[] {
  $i: @arr.name-idx[];
  /* emitted fragment per index */
}

Iterates every entry of name-idx
$i is the current index (1 … N)
Whatever you write inside becomes one (or more) polygon stops

The empty- prefix is the FSCSS loop driver used throughout st-core-style mixins.

5. `$i` and `var(--st-p$i)` — dynamic custom properties

$i: @arr.name-idx[];
var(--st-p$i)

$i is substituted at compile time, so you get --st-p1, --st-p2, … — one variable per vertex. That is how array length stays flexible without hardcoding eight stops.

6. X spacing — `num()` and length math

num( <$i - 1> * 100 / <@arr.name!.length - 1>)%

i	formula (N = 5)	X
1	`0 * 100 / 4`	`0%`
2	`1 * 100 / 4`	`25%`
3	`2 * 100 / 4`	`50%`
…	…	…
5	`4 * 100 / 4`	`100%`

Points are evenly distributed across the box, independent of how many values you pass.

7. Second pass — offset Y by stroke width

num( <$i - 1> * 100 / <@arr.name!.length - 1> )%
  calc(var(--st-p$i) + var(--st-chart-line-width)),

Same X as the matching forward point. Y is pushed down by --st-chart-line-width (e.g. 1.5px).

Because the index array is reversed, you traverse those offset points from the last data index back to the first.

8. Closing stop

-100% calc(var(--st-p1) + var(--st-chart-line-width))

A final stitch so the polygon closes cleanly near the start of the offset edge. (Exact close strategy can vary; st-core uses this trailing stop after the reverse loop.)

9. Fill the band

background: var(--st-accent);

The clipped region is only the thin ribbon — so a solid fill looks like a stroked line.

Mental model

Pass 1 (forward idx):
  (x1, y1) → (x2, y2) → … → (xN, yN)

Pass 2 (reversed idx, y + width):
  (xN, yN+w) → … → (x2, y2+w) → (x1, y1+w)

Close → fill

Concern	Owned by
How many points	`@arr.name!.length` + `count()`
Order of second edge	`.reverse`
Emitting stops inside `polygon()`	`inline()`
Y values	`var(--st-p$i)` (written elsewhere)
Thickness	`var(--st-chart-line-width)`

Minimal standalone sketch

@arr data[30, 55, 25, 70, 45]

/* write Y vars (simplified) */
@arr data-idx[count(@arr.data!.length, 1)]
empty-@arr.data-idx[] {
  $i: @arr.data-idx[];
  --st-p$i: num(100 - @arr.data[$i])%;
}

.line {
  position: absolute;
  inset: 0;
  --st-chart-line-width: 2px;
  --st-accent: #9d7eff;

  @arr data-idx[count(@arr.data!.length, 1)]
  @arr data-rev[@arr.data-idx!.reverse]

  clip-path: polygon(
    inline("{}
      empty-@arr.data-idx[] {
        $i: @arr.data-idx[];
        num(<$i - 1> * 100 / <@arr.data!.length - 1>)% var(--st-p$i),
      }
    ")
    inline("{}
      empty-@arr.data-rev[] {
        $i: @arr.data-rev[];
        num(<$i - 1> * 100 / <@arr.data!.length - 1>)%
          calc(var(--st-p$i) + var(--st-chart-line-width)),
      }
    ")
    -100% calc(var(--st-p1) + var(--st-chart-line-width))
  );

  background: var(--st-accent);
}

Host needs position: relative and a defined height. Put <div class="line"></div> inside it.

Polar variant (same idea)

Spider/radar lines in st-core use the same dual-pass idea in polar space:

Forward: var(--st-sx$i) var(--st-sy$i)
Reverse: each vertex scaled toward the center (--st-spider-stroke-scale, e.g. 0.97)

Still: forward path + return path + fill the band. Only the coordinate system changes.

Common pitfalls

No index array — looping raw values does not give you $i for --st-p$i.
No reverse on the second pass — self-intersecting polygon, broken stroke.
Forgetting inline() — loop syntax is invalid inside polygon()’s argument list.
Width in % only — prefer px (or a fixed unit) for --st-chart-line-width so thickness stays stable.
Points not written — dual-pass only reads --st-p*; something must write them first.

Why FSCSS helps

Without a preprocessor you either hardcode N stops or generate CSS in JS. With @arr + inline():

N is data-driven
X spacing is automatic
Reverse pass is one .reverse
Output is still plain CSS clip-path — fast, cacheable, no chart library

That is the whole dual-pass stroke trick: two ordered walks over the same indices, one offset, one fill.

FSCSS IDE: write, compile, and preview FSCSS in the browser

FSCSS tutorial — Thu, 15 Oct 2026 09:50:56 +0000

FSCSS has a full browser IDE — multi-file workspace, live compile, preview, component registry, snippets, terminal, and export — in the web app.

Try it: fscss.devtem.org/ide

Guide: fscss.devtem.org/ide-guide

What you get

Area	What it does
Editor	Monaco + FSCSS highlighting and autocomplete (`def`, `arr`, `imp`, `pat`, …)
Files	`.fscss`, `.css`, `.html`, `.js`, folders, entry file (star)
Run	Compile active or entry file (`Ctrl+Enter`)
Preview	Live page from HTML + all compiled CSS + JS modules
Components	Search registry packs; one-click `@import((*) from name)`
Export	CSS, min CSS, standalone HTML, ZIP, JSON backup, share link

Workspace autosaves to localStorage (keys fside:). Export a JSON backup if you’re in a locked-down browser.

Quick start

Open the IDE.
Edit main.fscss.
Ctrl+Enter — CSS on the right.
Ctrl+Shift+Enter — compile and open preview.
Export when you’re happy.

On Mac, use Cmd instead of Ctrl.

$accent: #9d7eff;

.card {
  bg: #12121a;
  color: #e8e3ff;
  size: 200px 100px;
  padding: 1rem 1.25rem;
  rounded: 12px;
  border-left: 4px solid $accent!;
}

Layout (mental map)

Top: Run, Preview, Auto, Export, Import, theme, settings
Left: Files · Components · Snippets · Tools
Center: tabs + editor | CSS / Preview
Bottom: Terminal + Problems
Status: compiler version, errors, cursor

Drag the dividers to resize. On phones the sidebar overlays and panes stack.

Components without leaving the tab

Open Components (Alt+2). Cards load from the public libs index (with fallbacks). Import inserts:

@import((*) from overlapui)

at the top of the current FSCSS file (skipped if already present). Repo jumps to GitHub. Search matches name, description, keywords.

Useful packs: st-core, overlapui, circle-progress, icon-mask, and more on the libraries page.

Shortcuts worth muscle memory

Action	Keys
Compile	`Ctrl+Enter`
Compile + preview	`Ctrl+Shift+Enter`
Command palette	`Ctrl+Shift+P` / `F1`
Auto-compile toggle	`Alt+A`
Files / Components / Snippets / Tools	`Alt+1` … `Alt+4`
New file	`Alt+N`
Terminal	`Ctrl+``
Shortcuts list	`Alt+/`

Full table: ide-guide.

Terminal

Focus with Ctrl+`. Handy commands:

`text compile · all · preview libs [query] version 1.2.5 export · help `

exec(_log, …) and preview console.* land here too.

Export / share

Compiled or minified CSS
Standalone HTML
ZIP (sources + dist/*.css)
JSON backup (merge or replace on import)
Share link; URL hash #code= / #run?code= opens shared FSCSS

Good to know

Remote @import and the component list need network.
Preview is a sandboxed iframe (no parent localStorage).
Switch compiler version in settings or version x.y.z (jsDelivr esm.min.js).
Exposed for debugging: window.xfscss.

Open the IDE, hit Ctrl+Enter, and ship the CSS when you're ready.

Pure CSS Spider / Radar Charts Are Here in st-core.fscss v2

FSCSS tutorial — Sat, 10 Oct 2026 23:11:32 +0000

No SVG. No canvas. No JS charting library.

st-core.fscss v2 now draws spider (radar) charts the same way it draws area and line charts: FSCSS arrays, CSS custom properties, and clip-path: polygon(). The result looks like a modern product dashboard — skills matrices, multi-axis scores, team comparisons — and the payload stays tiny.

The module Source:

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

Why this feels modern

Modern UI is not “more libraries.” It’s clarity, density, and motion that doesn’t cost a framework.

Spider charts in st-core lean on:

Token-driven color — --st-accent, --st-surface, --st-border. Change one variable; the whole chart follows.
Soft polar geometry — fill via color-mix, stroke as a dual-pass polygon, rings and spokes as gradients. No harsh SVG strokes fighting your theme.
Composable layers — grid, spokes, fill, line, dots stack as plain divs. Multi-series is just more layers with their own accent.
Native inheritance — coordinates are custom properties. Children inherit. Multi-team cards don’t need a state tree; they need scoped hosts.

That combination reads as “product UI,” not “demo from 2014.”

Why st-core stays lightweight

What you don’t ship	What you do ship
Chart.js / D3 / Recharts	A few `@define` mixins
SVG path builders	`clip-path: polygon()`
Canvas + DPR logic	CSS `%` + `sin()` / `cos()` in `calc()`
Hydration for the chart	Optional JS that only sets variables

Geometry is decided at compile time from @arr length. Runtime work is rewriting --st-sxN / --st-syN (or --st-pN for linear charts). Animations can use transition: clip-path on the compositor.

Compiled CSS for a chart class stays on the order of about a kilobyte, not a hundred. The page paints charts with zero chart-library JavaScript.

That’s the st-core bet: visualization as styling, not as an app runtime.

The one rule (same as linear charts)

Points write. Renderers read.

@st-spider-points(array)  →  writes --st-sxN / --st-syN on the host
@st-spider-fill / line / dots  →  only read those variables

Call points on the host that owns the series. Multi-series means one host per series — same pattern as multi-line area charts in v2.

Angle 0° is at the top. Values are 0–100 scores scaled by rmax (default 42% of the box).

What you can build

1. Minimal radar

Six axes, one series, grid + spokes + fill + line + dots.

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

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

@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)

.spider {
  @st-spider-points(skills, 42)
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: var(--st-surface);
}

<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>
  <!-- … through .spider-dot-6 -->
</div>

Dots need real DOM nodes — the mixin only generates the CSS.

2. Team comparison cards

Two hosts, two accents, shared label layout:

@arr teamA[92, 78, 85, 55, 48, 80]
@arr teamB[68, 82, 70, 95, 62, 58]

.spider-wrap.team-a {
  @st-spider-points(teamA, 42)
  --st-accent: #9d7eff;
  --st-spider-fill-opacity: 28%;
}
.spider-wrap.team-b {
  @st-spider-points(teamB, 42)
  --st-accent: #4fffb0;
  --st-spider-fill-opacity: 30%;
}

Axis labels are ordinary absolute spans (Speed, Quality, UX, Scale, Cost, Support,...) around the circle. No special chart API — just layout.

3. Multi-series overlay

One polar grid, five polygons, each series a full-size absolute layer with its own @st-spider-points and --st-accent. Lower --st-spider-fill-opacity keeps overlaps readable.

4. Live updates without a library

function polarVars(values, rmax = 42) {
  const n = values.length;
  return values.map((v, i) => {
    const ang = (i * 360) / n;
    const r = (v / 100) * rmax;
    return (
      `--st-sx${i + 1}: calc(50% + (${r} * 1%) * sin(${ang} * 1deg));` +
      `--st-sy${i + 1}: calc(50% - (${r} * 1%) * cos(${ang} * 1deg));`
    );
  }).join(" ");
}

host.style.cssText = polarVars([80, 65, 90, 55, 70, 85]);

Same length as the compiled polygon; values morph. Optional transition on clip-path for soft motion.

Under the hood (short)

Layer	Technique
Coordinates	`--st-sxN` / `--st-syN` from `sin` / `cos` in `calc()`
Fill	Closed `polygon()` + `color-mix` with `--st-spider-fill-opacity`
Stroke	Dual-pass polygon; inner path scaled by `--st-spider-stroke-scale`
Rings	`radial-gradient` stops at 20 / 40 / 60 / 80%
Spokes	Thin `conic-gradient` bands from `-90deg` + center mask

Everything is documented in the repo: README (API + examples), EXPLAINED (every @define), integration/html (dual-team and multi-series demos).

Install

NPM CLI:

npm install -g fscss
charts.fscss charts.css

Testing via CDN:

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

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

Prefer FSCSS CLI for production CSS with zero runtime preprocessor.

Requires FSCSS v1.2.3+. MIT licensed.

Area and line charts proved that dashboards don’t need a JS chart runtime. Spider charts extend that idea into polar space without changing the contract: arrays in, custom properties out, polygons on screen.

Explore the module, the demos, and the under-the-hood write-up here:

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

Pure CSS. Still lightweight. Now with radar.

FSCSS loops

FSCSS tutorial — Fri, 09 Oct 2026 10:04:58 +0000

FSCSS loops: @arr, %n(), rpt(), and inline()

source: fscss.devtem.org/loop

FSCSS loops expand arrays into properties, selectors, or value fragments. They run at compile time (CLI) or in the browser runtime. The browser only ever sees plain CSS.

This post is a short tour. See The full cheat sheet.

Setup

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

Or compile: npm install -g fscss@1.2.5 → fscss in.fscss out.css.

Rules of thumb

Arrays are 1-indexed.
[] iterates; [n] is a fixed index.
Index lists: count(@arr.name!.length) or count(n, 1).
Put empty{ /* preserve */ } before many loop-driven rules so intermediate tokens are not treated as selectors.
%n → properties · rpt + @arr[] → selectors · inline("@arr[] { }") → fragments inside values.

1. Property loop — `%n()`

Same value on many properties:

@arr sizing[width, height, max-width, max-height]
$sizing: @arr.sizing!;

.box {
  bg: red;
  %4($sizing.list[: 200px;])
}

→ width / height / max-width / max-height: 200px.

Classics: %2(width, height[: 100px;]). Also see 1.2.5 shorthands.

2. Auto-index — `:nth-child`

@arr delays[0.1s, 0.3s, 0.5s, 0.7s]
@arr colors[#ef4444, #f59e0b, #10b981, #3b82f6]
@arr indexes[count(@arr.colors!.length, 1)]

empty{ /* preserve */ }

.loading-dot:nth-child(@arr.indexes[]) {
  $index: @arr.indexes[];
  animation: bounce 1.5s infinite @arr.delays[$index!];
  background: @arr.colors[$index!];
}

One rule per index — staggered delays and colors without copy-paste.

3. Nested selectors — `rpt()`

@arr colors[orange, purple, indigo, blue]
@arr levels[count(@arr.colors!.length)]

empty{ /* preserve */ }

rpt(@arr.levels[], "div ") {
  background: @arr.colors[@arr.levels[]];
  padding: 10px;
  border-radius: 10px;
  color: #fff;
}

→ div, div div, div div div, …

Guide: nested-loop.

4. Value fragments — `inline()`

Loops inside a declaration (custom props, clip-path, chart polygons):

@arr values[10, 20, 30, 40]
@arr idx[count(@arr.values!.length, 1)]

inline("empty{}
@arr.idx[] {
  $i: @arr.idx[];
  --val-@arr.idx[]: @arr.values[$i!]px;
}")

Pair with num() for spacing math

5. `empty{ /* preserve */ }`

Loop machinery can look like selectors. A leading:

empty{ /* preserve */ }

keeps rpt / auto-index / inline blocks from eating the surrounding structure (1.2.1+)

Resource	URL
Loops (canonical)	fscss.devtem.org/loop
Arrays	/arrays
Array methods	/array-methods
num & count	/num
Examples	/examples

npm install fscss

Free visual builder for pure CSS charts — st-core.fscss

FSCSS tutorial — Tue, 06 Oct 2026 11:44:25 +0000

You can design a line or area chart, toggle grid and dots, pick an accent, and leave with FSCSS, HTML, and CSS—without wiring Chart.js or an SVG library.

st-core Visual Chart Builder is free and open-source. It sits on st-core@v2: charts as CSS custom properties and clip-path polygons, driven by FSCSS arrays.

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

Why this matters

Most “chart builders” emit React, canvas, or heavy chart SDKs. This one is aimed at lightweight, pre-designed, modern charts that ship as CSS:

No SVG / canvas requirement for the core series
Any length dataset (@arr), not a fixed 8 points
X spacing from array.length
Y as normalized --st-p1 … --st-pN (100 − value)
Optional JS only when you want to live-update those variables

The builder is a front door: tune data and layers, preview, copy code.

What the builder gives you

Control	Effect
Data list	Comma / space separated values 0–100
Presets	Rising, Decline, Volatile, Flat, Climb, Peaks
Layers	Fill, line, grid, dots
Height / radius	Chart box
Accent	`--st-accent`
Grid rows / cols	Background grid density
Array & class names	Generated selectors

Outputs

FSCSS — @import st-core@v2, @arr, @st-chart-*
HTML — full minimal page with runtime script
CSS — approximate or runtime-expanded rules

Preview uses the FSCSS ESM API with stable version, with a polygon fallback so the chart still paints if compile fails.

The chart model (what you’re designing)

Minimal mental model:

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

@arr myData[56, 67, 70, 43, 67, 80, 55]

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

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

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

@st-chart-fill / @st-chart-line — renderer for a selector (how many points the polygon expects).
@st-chart-points — writes --st-pN on the element (the actual Y values).
Children can inherit points from a parent, or set their own for multi-series.

Runtime / CDN:

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

Live updates (optional JS)

Same variables the builder sets on the preview:

function updatePoints(el, values) {
  el.style.cssText = values
    .map((v, i) => `--st-p${i + 1}: ${100 - v}%;`)
    .join(" ");
}

updatePoints(document.querySelector(".chart"), [40, 60, 20, 80, 50]);

Pair with transition on clip-path for soft redraws—exactly what the generated snippets include.

Who it’s for

Dashboards that should stay CSS-first and cacheable
Design / content people who want a chart without a JS chart stack
dev who need a correct @arr + mixin skeleton before pasting into a larger layout (phone shell, stat cards, multi-series)

v2 is the path for new work: dynamic length, even X spacing, dual-edge line polygons. Details live in the module README and EXPLAINED.md.

Try

Open Visual Chart Builder
Enter points or click a preset
Toggle fill / line / grid / dots
Copy CSS, FSCSS or HTML
Ship with CLI compile when you want:

npm install -g fscss@latest
fscss chart.fscss chart.css

overlapui — avatars, cards, images, and circle menus that stack in pure CSS

FSCSS tutorial — Mon, 05 Oct 2026 01:32:49 +0000

You need a row of faces that sit on top of each other, a pile of notification cards, a tilted photo strip, or a “+” that fans into actions — and you don’t want a JS component library for the open/close motion.

overlapui.fscss is a small FSCSS module for that. Stacks overlap at rest and spread on hover/focus. Styling is driven by --ou-* tokens. No runtime JS for the interaction.

Source: github.com/fscss-ttr/overlapui.fscss

Requires: FSCSS 1.2.3+ (recommended 1.2.5+)

What’s in the box

Component	Behavior
Avatar overlap	Circles pull in; spread on hover/focus; `data-alph` → letter + color
Card overlap	Cards peek under each other; expand on hover/focus
Image overlap	Tilted photos; straighten and gap open
Circle overlap	Center control; satellites fan on a ring (`--n` = count)

Install once:

@import((*) from overlapui)

@overlapui()

Or only what you need:

@import((ou-root, ou-avatar-colors, avatar-overlap, circle-overlap, ou-reduced-motion) from overlapui)

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

CDN prototyping:

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

Tokens, not magic classes

@ou-root() sets defaults like ring color, timing, avatar size, orbit radius. Override on :root or a wrapper:

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

Same module, different product chrome.

Markup (short)

Avatars

<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">5001</li>
</ul>

Circle menu — first child is center; --n is satellite count:

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

tabindex="0" so keyboard :focus-within works like hover.

Why FSCSS here

Avatar letter colors use FSCSS arrays to map data-alph (A–Z / 0–9) to a palette at compile time, and to make it customizable including selectors. Circle and stacks stay plain CSS after expand — fine for CLI output or the runtime. Prefer 1.2.5+ if you also use new features elsewhere in the app.

Real use cases

Members column in a dashboard table (avatar stack + name/role)
Notification pile without a drawer component
FAB / radial actions next to a profile strip
Photo strips on marketing or case-study pages

Full table example, card stack, and image strip: README.

Accessibility

Keep real names in the DOM for avatars (faces can hide the letter with font-size: 0).
Label the circle center and each action (aria-label).
@ou-reduced-motion() turns off the springy transitions when the user prefers reduced motion.

Sources

Repo: fscss-ttr/overlapui.fscss
FSCSS: npm install -g fscss@1.2.5

MIT. stack UI that opens with CSS.

I built a lightweight runtime for FSCSS property shorthands (with a JS API)

FSCSS tutorial — Sat, 03 Oct 2026 11:41:51 +0000

Full FSCSS can compile @define, arrays, pattern(), imports, and more. That’s powerful — and heavier than you need when all you want is size, mx / px, rounded, bg, stack, or inset: ratio-fit(16/9) in the browser.

So I shipped fscss-props: a properties-only runtime. It expands those shorthands at runtime and exposes a small DOM API. It does not parse advanced FSCSS features, so it stays fast even when the DOM is large.

Repo: github.com/Figsh/fscss-props

Shorthand map (same names as 1.2.5): fscss.devtem.org/shorthands

<script src="https://cdn.jsdelivr.net/npm/fscss-props@1.0.0/fscss-props.min.js"></script>

Load it early in <head> (no defer) if the first paint should already see expanded CSS.

What it does

In CSS	In JS
`<style>` blocks rewritten in place	`el.fscssProp.mx = '1rem'`
Inline `style="size: 80px; …"`	`el.fscssProp.size = null` removes owned longhands
`link[data-fscss]` stylesheets	`el.fscssPropText = 'stack: 12px; p: 16px'`

.box {
  mx: auto;
  size: 200px 100px;
  rounded-t: 12px;
  center: true;
}
.vid {
  inset: ratio-fit(16 / 9); /* parent: container-type: size */
}

Not included on purpose: @define, @arr, pattern(), module @import. For those, use the full FSCSS CLI/runtime and ship plain CSS.

Why this matters when you use JS

Utilities in pure CSS are fine until state drives the UI: theme, density, layout mode, open/closed. Then you either:

toggle classes and keep a big CSS file, or
set element.style with longhands and remember every property you touched.

fscss-props sits in between:

Same names as design CSS — px, rounded, stack, not only paddingLeft.
Ownership — setting a shorthand applies longhands; setting it to null clears those longhands, not random inline noise.
Bulk modes — fscssPropText replaces the whole FSCSS-owned set (great for stack vs cols vs hstack without leftover display/gap).
Small surface — no stylesheet AST for the whole language; property table + observers, so it’s aimed at large DOMs and frequent updates.

el.fscssProp.mx = '1rem';
el.fscssProp['ratio-fit'] = '16/9';
el.fscssProp.color = 'red';     // normal CSS works too
el.fscssProp.mx = null;         // remove

console.log(el.fscssPropText);

Example: vanilla store → styles

A tiny subscribe store writes one fscssPropText blob whenever padding, radius, or theme changes:

<script src="https://cdn.jsdelivr.net/npm/fscss-props@1.0.0/fscss-props.min.js"></script>
<style>
  body {
    m: 0;
    min-h: 100vh;
    center: both;
    p: 24px;
    bg: #0b1020;
    color: #e6edf7;
    ff: system-ui, sans-serif;
  }
  .panel {
    w: 100%;
    max-w: 420px;
    stack: 16px;
    p: 24px;
    bg: #121a30;
    border: 1px solid #22304f;
    rounded: 16px;
  }
  .preview {
    min-h: 120px;
    center: both;
    fw: 600;
    trans: all 0.15s ease;
  }
  /* …labels, range inputs, buttons… */
</style>

<div class="panel">
  <div class="preview" id="box">Preview</div>
  <label>Padding <input id="pad" type="range" min="8" max="40" value="16"></label>
  <label>Radius <input id="rad" type="range" min="0" max="32" value="12"></label>
  <div class="bar" id="themes">
    <button type="button" data-bg="#6366f1" aria-pressed="true">Indigo</button>
    <button type="button" data-bg="#0ea5e9">Sky</button>
    <button type="button" data-bg="#10b981">Emerald</button>
  </div>
  <pre id="out"></pre>
</div>

<script>
  function createStore(initial) {
    let state = { ...initial };
    const subs = new Set();
    return {
      get: () => state,
      set(patch) {
        state = { ...state, ...patch };
        subs.forEach((fn) => fn(state));
      },
      subscribe(fn) {
        subs.add(fn);
        fn(state);
        return () => subs.delete(fn);
      },
    };
  }

  const box = document.getElementById('box');
  const out = document.getElementById('out');
  const store = createStore({ pad: 16, radius: 12, bg: '#6366f1' });

  store.subscribe((s) => {
    box.fscssPropText = [
      `p: ${s.pad}px`,
      `rounded: ${s.radius}px`,
      `bg: ${s.bg}`,
      'color: #fff',
      'center: true',
    ].join('; ');
    out.textContent = box.fscssPropText.replace(/; /g, ';\n');
  });

  document.getElementById('pad').oninput = (e) =>
    store.set({ pad: +e.target.value });
  document.getElementById('rad').oninput = (e) =>
    store.set({ radius: +e.target.value });

  document.getElementById('themes').onclick = (e) => {
    const btn = e.target.closest('button');
    if (!btn) return;
    [...e.currentTarget.children].forEach((b) =>
      b.setAttribute('aria-pressed', b === btn));
    store.set({ bg: btn.dataset.bg });
  };
</script>

Full demos (shape lab, ratio-fit, reactive list): examples/ in the repo.

When to use which

Need	Tool
Author modules, arrays, patterns; ship static CSS	FSCSS CLI / full runtime
Live property shorthands + JS control	fscss-props
Max performance in production, no live expand	Compile with CLI; omit the script

FSCSS 1.2.5: size, padding-x, inset-x, and ratio-fit — without the usual CSS gymnastics

FSCSS tutorial — Wed, 30 Sep 2026 23:34:34 +0000

Who else was waiting for CSS that could say size both axes, pad left and right, inset horizontally, or fit a ratio in a box — without stacking four properties or reaching for a utility framework?

FSCSS 1.2.5 ships compile-time property shorthands. You write short names; the CLI/runtime expands them to plain CSS. No runtime polyfill for these names in production if you compile ahead of time.

Release: v1.2.5
Full map: fscss.devtem.org/shorthands
Real UI using them: budget-app budget.fscss

npm install fscss@1.2.5
fscss input.fscss output.css

The pain these replace

Native CSS is powerful but often verbose for pairs:

/* “Make a square icon” */
width: 32px;
height: 32px;

/* “Horizontal padding only” */
padding-left: 16px;
padding-right: 16px;

/* “Pin left and right, leave top/bottom alone” */
left: 45px;
right: 45px;
/* not the same as inset: auto 45px — that sets all four */

People solve this with design systems, Tailwind-style utilities, or copy-paste. FSCSS 1.2.5 puts the same idea in the stylesheet language, then emits standard CSS.

`size` / `max-size` — width and height together

FSCSS:

.icon-btn { size: 32px; }
.panel    { size: 100% 200px; max-size: 480px; }

CSS:

.icon-btn { width: 32px; height: 32px; }
.panel {
  width: 100%;
  height: 200px;
  max-width: 480px;
  max-height: 480px;
}

One value → both axes. Two values → width then height. Same idea for min-size / max-size.

`padding-x` / `px`, `margin-x` / `mx`, `inset-x` / `inset-y`

Horizontal and vertical pairs, without touching the other axis:

FSCSS:

.card {
  px: 16px;   /* or padding-x 16px */
  py: 14px;
  mx: auto;
  max-w: 360px;
}

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

CSS:

.card {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

.overlay-side {
  position: absolute;
  left: 45px;
  right: 45px;
  top: 0;
  height: 4px;
}

That’s the “without invoking the other axis” story: not inset: auto 45px (which sets top/bottom too), but inset-x when you only mean left and right.

Also in the family: gap-x / gap-y, scroll margin/padding axes, safe-area helpers.

`ratio-fit()` — ratio inside a container

Fitting media to a box while keeping aspect ratio usually means absolute positioning, inset: 0, margin: auto, aspect-ratio, and careful width/height caps. ratio-fit() packages that expansion:

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

You get a compile-time expansion aimed at “fill the containing block, keep the ratio.” Details and exact formula: shorthands docs.

In a real template

The dual-phone budget UI (budget.fscss) mixes st-core@v2 charts, icon-mask, and 1.2.5 sugar:

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;
}

Preview / template folder: st-core templates · budget-app ui.

What else ships in the same release

Layout helpers: stack, hstack, center, auto-fit, truncate, line-clamp
Borders: border-x, rounded, corner variants
Background: bg, bg-x / bg-y
Aliases: fs, fw, jc, ai, pos, shadow, …
Side blocks: top| padding: 8px; |

Older value multiplexing (%2, %3) still works; 1.2.5 is about named properties that expand to longhands.

Takeaway

If you’ve been typing the same width/height or padding-left/right pairs for years — or wishing inset could mean only the x axis — FSCSS 1.2.5 is aimed at that. Write the short form, compile once, ship CSS the browser already understands.

Links

Pure CSS budget UI: two phones, one chart with st-core.fscss

FSCSS tutorial — Tue, 29 Sep 2026 11:38:22 +0000

The Figma design in pure CSS

A mobile Home + Budget template for st-core@v2: dual phone frames, card carousel, finance shortcuts, loans, and a spend chart drawn with clip-path + CSS variables.

Live preview: hub.devtem.org/st-core.fscss/templates/budget-app/

Source: templates/budget-app

What’s in it

Layer	Role
st-core@v2	Tokens, phone shell helpers, area/line chart from `@arr budgetData`
icon-mask	Nav, menu, search, finance icons
Compiled CSS	Preview ships plain CSS — no FSCSS runtime required

HTML stays light: two .phone blocks, a chart stack (grid / fill / line / dot), and a transaction list. Data for the series is an FSCSS array

Try it

git clone https://github.com/fscss-ttr/st-core.fscss.git
cd st-core.fscss/templates/budget-app
# open index.html with budget.css linked
# or recompile: fscss budget.fscss budget.css

Same as the admin-dashboard template

FSCSS

Build st-core@v2 from scratch

FSCSS tutorial — Mon, 28 Sep 2026 11:30:36 +0000

A deep dive into st-core@v2.fscss — how a pure-CSS chart module is assembled with FSCSS: tokens, inverted Y, array indexes, inline(), and dual-pass strokes.

Requires: FSCSS ≥ 1.2.3

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

What you’re building

Not a JS chart engine. A set of @define mixins that:

Install design tokens
Map a data array → --st-p1…N (CSS Y positions)
Paint fill and line with clip-path: polygon(...)
Optionally add grid, dots, stat cards, phone shell

Runtime data changes only CSS variables. Geometry is compile-time (or runtime-expanded) CSS.

Step 0 — Mental model

Human values  [42, 58, 65, …]     // “higher = better”
      │
      ▼  num(100 - v)%
--st-p1, --st-p2, …               // CSS top% (0% = top of box)
      │
      ▼  even X: (i-1)/(N-1) * 100%
clip-path polygon points
      │
      ▼
.area fill  +  fake “stroke” line  +  dots

In CSS, y = 0% is the top. A score of 90 should sit near the top → store 10% in --st-p*.

Step 1 — Token root

Everything themable hangs off custom properties.

@define st-root(root:root){`
:@use(root){
  --st-bg: #0e0d14;
  --st-surface: #161422;
  --st-card: #1c1a2e;

  --st-accent: #9d7eff;
  --st-accent-2: #c4a8ff;
  --st-green: #4fffb0;
  --st-red: #ff5e7d;

  --st-text: #e8e3ff;
  --st-muted: #6b6488;
  --st-border: rgba(157,126,255,.15);

  --st-radius-xl: 40px;
  --st-radius-lg: 16px;
  --st-pad: 24px;

  /* default 8-point chart (overwritten by data) */
  --st-p1: 68%; --st-p2: 59%; --st-p3: 70%; --st-p4: 35%;
  --st-p5: 58%; --st-p6: 22%; --st-p7: 42%; --st-p8: 55%;

  --st-chart-line-width: 1.5px;
}
`}

Usage: @st-root() → usually on :root.

Why: Fill/line/dot only read variables — swap brand without touching polygon math.

Step 2 — Fixed 8-point setter (v1-style helper)

Still useful for demos with a fixed series length:

@define st-chart(p1: 88, p2: 59, p3: 70, p4: 35, p5: 58, p6: 22, p7: 42, p8: 55){
  --st-p1: num(100 - @use(p1))%;
  --st-p2: num(100 - @use(p2))%;
  /* … p3–p8 same pattern … */
}

num(100 - x) is the invert-Y core. v2 generalizes this to any N via arrays.

Step 3 — Array → `--st-pN` (`st-chart-points`)

This is the heart of v2: length comes from @arr, not eight parameters.

@define st-chart-points(p){`
inline("
@arr @use(p)-idx[count(@arr.@use(p)!.length, 1)]

empty{ /* preserve */ }
empty-@arr.@use(p)-idx[]{
  $idx: @arr.@use(p)-idx[];
  --st-p$idx: num(100 - @arr.@use(p)[$idx])%;
}")
`}

Piece	Role
`p`	Name of the data array (e.g. `myData`)
`count(@arr.@use(p)!.length, 1)`	Index list `1…N`
`empty{ /* preserve */ }`	Keeps loop output from being eaten as selectors
`--st-p$idx: num(100 - value)%`	One variable per point
`inline("…")`	Emits declarations only so you can call this inside `.chart { }`

Call site:

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

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

After expand: --st-p1…--st-p7 exist. JS can later overwrite them; the polygon still reads the same names.

Step 4 — Area fill (`st-chart-fill`)

Close a polygon: along the series, then bottom-right, bottom-left.

@define st-chart-fill(st:.st-chart-fill, p){`
@use(st){
  position: absolute;
  inset: 0;

  @arr @use(p)-idx[count(@arr.@use(p)!.length, 1)]
  clip-path: polygon(
    inline("{}
      empty-@arr.@use(p)-idx[] {
        $i: @arr.@use(p)-idx[];
        num(<$i - 1> * 100 / <@arr.@use(p)!.length - 1>)% var(--st-p$i),
      }
      100% 100%,
      0% 100%
    ")
  );

  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--st-accent) 35%, transparent),
    transparent
  );
}
`}

X formula

Even spacing for any N ≥ 2.

Y = var(--st-p$i) (already inverted).

inline("{} …") — loop body is rule-shaped (empty-@arr… { }); inline() strips braces so only x% y%, fragments sit inside polygon().

HTML:

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

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

Step 5 — Line as a thin polygon (`st-chart-line`)

CSS has no “stroke this polyline” for arbitrary points. st-core fakes a stroke:

Walk forward along the top edge (the visible line).
Walk back slightly below each point (y + line-width).
Close the strip.

@define st-chart-line(st:.st-chart-line, p){`
@use(st){
  position: absolute;
  inset: 0;

  @arr @use(p)-idx[count(@arr.@use(p)!.length, 1)]
  @arr @use(p)-reversed-idx[@arr.@use(p)-idx!.reverse]

  clip-path: polygon(
    inline("{}
      empty-@arr.@use(p)-idx[] {
        $i: @arr.@use(p)-idx[];
        num(<$i - 1> * 100 / <@arr.@use(p)!.length - 1>)% var(--st-p$i),
      }
    ")
    inline("{}
      empty-@arr.@use(p)-reversed-idx[] reverse {
        $i: @arr.@use(p)-reversed-idx[];
        num(<$i - 1> * 100 / <@arr.@use(p)!.length - 1>)%
          calc(var(--st-p$i) + var(--st-chart-line-width)),
      }
    ")
    -100% calc(var(--st-p1) + var(--st-chart-line-width))
  );

  background: var(--st-accent);
}
`}

Idea	Detail
Derived array	`@arr …-reversed-idx[@arr.…-idx!.reverse]` (1.2.x)
Second pass	Same X, Y shifted by `--st-chart-line-width`
Width helper	`@st-chart-line-width(2.5px)` sets the variable

Fill and line share --st-p*; only the polygon path differs.

Step 6 — Dots (`st-chart-dots` / `st-chart-dot`)

One series of dots — loop selectors:

@define st-chart-dots(st:.st-chart-dot-, p, size: 8px){`
  @arr @use(p)-idx[count(@arr.@use(p)!.length, 1)]
  empty{ /* preserve */ }
  @use(st)@arr.@use(p)-idx[] {
    $i: @arr.@use(p)-idx[];
    position: absolute;
    left: calc(num(<$i - 1> * 100 / <@arr.@use(p)!.length - 1>)% - 6px);
    top: calc(var(--st-p$i) - 6px);
    %2(width, height[: @use(size);])
    border-radius: 50%;
    background: #fff;
    border: 2.5px solid var(--st-accent);
  }
`}

Emits .st-chart-dot-1, .st-chart-dot-2, … positioned on the series.

Single highlight dot — explicit x/y (human y inverted in the mixin):

@define st-chart-dot(st:.st-chart-dot, x:0, y:0, size: 12px){`
@use(st){
  position: absolute;
  left: calc(@use(x)% - 6px);
  top: calc(num(-<@use(y)> + 100)% - 6px);
  %2(width, height[: @use(size);])
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--st-accent);
}
`}

Step 7 — Chrome: grid, axes, stat card, phone

These are ordinary layout mixins on the same tokens:

st-chart-grid(st, rows, cols) — repeating-linear-gradient mesh
st-chart-axis-x / st-chart-axis-y — flex label rows
st-stat-card — label / value / delta (.up / .down)
st-phone / st-container — device frame and page shell

No new math — they make it look like a product, not a codepen fragment.

Step 8 — Minimal page that uses it

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

@st-root()

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

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

.chart {
  @st-chart-points(sales)
  position: relative;
  height: 220px;
  background: var(--st-surface);
  border-radius: var(--st-radius-lg);
}

.fill {
  --st-accent: #22c55e;
  opacity: 0.25;
  transition: clip-path 0.6s ease;
}
.line {
  --st-accent: #22c55e;
  @st-chart-line-width(2.5px)
  transition: clip-path 0.6s ease;
}

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

Live values from JS:

const el = document.querySelector('.chart');
el.style.cssText = values
  .map((v, i) => `--st-p${i + 1}: ${100 - v}%;`)
  .join(' ');

Design rules baked into v2

Points once, draw many times — @st-chart-points owns --st-p*; fill/line/dots only consume.
Index arrays are local — count(length, 1) next to each mixin; don’t hand-write 1,2,3,….
inline() at polygon boundaries — loops need { }; polygon() needs commas, not rules.
empty / empty- preserve — stops the compiler from treating loop output as selectors.
N is fixed at expand time — changing series length in JS needs a compiled template ≥ max N (pad or recompile). Changing values is always fine.

Feature map (source order)

Define	Role
`st-root`	Tokens + default `--st-p*`
`st-chart`	Fixed 8-arg invert helper
`st-chart-points`	Array → `--st-pN`
`st-chart-fill`	Area polygon
`st-chart-line`	Dual-pass stroke polygon
`st-chart-line-width`	Stroke thickness token
`st-chart-dot` / `st-chart-dots`	Markers
`st-chart-grid` / axes	Background mesh + labels
`st-stat-card`	KPI block
`st-phone` / `st-container`	Shell UI
`st-cat-bar-fill`	Horizontal bar

From scratch checklist

@st-root with accent + --st-chart-line-width
Data @arr + @st-chart-points
Fill polygon (series + baseline)
Line polygon (forward + reverse + width)
Optional dots/grid
JS only assigns --st-pN

You’re not implementing a chart library in JavaScript. You’re compiling a CSS renderer and treating data as theme variables.

Source: st-core@v2.fscss · README.md · templates/admin-dashboard

Invert Y. Index the array. inline the points. Let the browser paint.

DEV Community: FSCSS tutorial

Create a simple form and style it with FSCSS

1. Markup first

2. Load FSCSS

3. Style with layout helpers and tokens

4. Optional: reusable button with @define

5. Optional: form.fscss module

6. Optional: semantic styling with pattern() (1.2.4+)

7. Try it in the IDE

Checklist

st-core.fscss now automates setup in the FSCSS IDE

How it’s wired

What enable.xfcmd does

Try it in the IDE

Why this matters

Related

How it’s wired

What enable.xfcmd does

Try it in the IDE

Why this matters

Related

How to Build Dual-Pass Strokes with FSCSS Array Methods

The problem

The full pattern

Piece by piece

1. Index array — count() + @arr

2. Reversed index — .reverse

3. inline("{} … ") — expand loops inside polygon()

4. empty-@arr.…[] — the loop form

5. $i and var(--st-p$i) — dynamic custom properties

6. X spacing — num() and length math

7. Second pass — offset Y by stroke width

8. Closing stop

9. Fill the band

Mental model

Minimal standalone sketch

Polar variant (same idea)

Common pitfalls

Why FSCSS helps

Further reading

FSCSS IDE: write, compile, and preview FSCSS in the browser

What you get

Quick start

Layout (mental map)

Components without leaving the tab

Shortcuts worth muscle memory

Terminal

Export / share

Good to know

Related

Pure CSS Spider / Radar Charts Are Here in st-core.fscss v2

Why this feels modern

Why st-core stays lightweight

The one rule (same as linear charts)

What you can build

1. Minimal radar

2. Team comparison cards

3. Multi-series overlay

4. Live updates without a library

Under the hood (short)

Install

FSCSS loops

Setup

Rules of thumb

1. Property loop — %n()

2. Auto-index — :nth-child

3. Nested selectors — rpt()

4. Value fragments — inline()

5. empty{ /* preserve */ }

next

Free visual builder for pure CSS charts — st-core.fscss

Why this matters

What the builder gives you

The chart model (what you’re designing)

Live updates (optional JS)

Who it’s for

Try

Links

overlapui — avatars, cards, images, and circle menus that stack in pure CSS

What’s in the box

4. Optional: reusable button with `@define`

5. Optional: `form.fscss` module

6. Optional: semantic styling with `pattern()` (1.2.4+)

1. Index array — `count()` + `@arr`

2. Reversed index — `.reverse`

3. `inline("{} … ")` — expand loops inside `polygon()`

4. `empty-@arr.…[]` — the loop form

5. `$i` and `var(--st-p$i)` — dynamic custom properties

6. X spacing — `num()` and length math

1. Property loop — `%n()`

2. Auto-index — `:nth-child`

3. Nested selectors — `rpt()`

4. Value fragments — `inline()`

5. `empty{ /* preserve */ }`

`size` / `max-size` — width and height together

`padding-x` / `px`, `margin-x` / `mx`, `inset-x` / `inset-y`

`ratio-fit()` — ratio inside a container

Step 3 — Array → `--st-pN` (`st-chart-points`)

Step 4 — Area fill (`st-chart-fill`)

Step 5 — Line as a thin polygon (`st-chart-line`)

Step 6 — Dots (`st-chart-dots` / `st-chart-dot`)