DEV Community: FSCSS tutorial

devtemDesign 0.1.0: one config object paints a whole landing page

FSCSS tutorial — Sun, 25 Oct 2026 10:46:01 +0000

Every landing page I built started the same way: nav, hero, feature cards, pricing, FAQ, footer, then a day of making it responsive. So I wrote an engine that does that part for me.

devtemDesign takes one config object and renders the whole page. No framework, no build step, no dependencies. Two tags and one function call.

This post is both an introduction and a reference for v0.1.0.

Try it in 30 seconds

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/style.min.css">
<script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.1.0/script.min.js"></script>

<div id="app-root"></div>
<script>
  devtemDesign("app-root", {
    template: "cyber",
    logoName: "MYAPP",
    heroTitleLine1: "Declarative UI,",
    heroTitleLine2: "Zero-Config Motion",
    heroSubtitle: "One config object. Complete animated landing.",
    primaryBtnText: "Get started",
    primaryBtnHref: "/docs"
  });
</script>

That gives you a sticky glass navbar, an animated hero, ambient background orbs, reveal-on-scroll, a mobile drawer and a footer. Every section except the hero is optional, and a section only renders when its config key is present.

If you want to skip the code entirely, the builder generates a config from a description and lets you edit it live.

What's in 0.1.0

7 templates: figsh, cyber, aurora, monochrome, sunset, ocean, and paper (light).
Live theming: switch at runtime, add a built-in theme button, or override any design token.
New sections: stats with count-up numbers, FAQ accordion, closing CTA, and pricing with a Monthly/Yearly toggle.
Interactions: scroll progress bar, active nav link, card spotlight, seamless brand marquee, back-to-top button.
A real lifecycle: devtemDesign() returns { setTemplate, destroy }.
Accessibility: skip link, focus rings, aria-expanded on the menu, native <details> for FAQ, full prefers-reduced-motion support.

A fuller example

const page = devtemDesign("app-root", {
  template: "ocean",
  themeSwitcher: true,
  logoName: "ORBIT",
  navLinks: [
    { label: "Features", href: "#features" },
    { label: "Pricing", href: "#pricing" },
    { label: "FAQ", href: "#faq" }
  ],
  ctaText: "Start free",
  ctaHref: "#pricing",

  heroBadge: "New: team workspaces",
  heroTitleLine1: "Ship analytics,",
  heroTitleLine2: "not dashboards",
  heroSubtitle: "Turn raw events into answers your whole team can read.",
  primaryBtnText: "Start free",
  primaryBtnHref: "#pricing",

  stats: [
    { value: "12k+", label: "Teams" },
    { value: "99.9%", label: "Uptime" }
  ],

  features: [
    { title: "Live metrics", desc: "Streams update in under a second.", icon: "⚡" },
    { title: "Shared boards", desc: "One link for the whole team.", icon: "📊" }
  ],

  yearlyBadge: "Save 20%",
  pricing: [
    { tier: "Starter", amount: "$0", features: ["3 boards"], cta: "Start free", href: "#" },
    { tier: "Team", amount: "$19", period: "/mo",
      yearly: { amount: "$182", period: "/yr" },
      featured: true, badge: "Most popular",
      features: ["Unlimited boards", "Priority support"], cta: "Go Team", href: "#" }
  ],

  faq: [{ q: "Is there a free plan?", a: "Yes. Starter is free forever." }],
  cta: { title: "See your data differently", text: "Create account", href: "#" },
  footer: { tagline: "Built with devtemDesign.", copy: "© 2026 Orbit" }
});

You can see this running, with a template picker and a mobile preview, on the examples page.

Templates

Template	Vibe	Accents
`figsh`	Futuristic glass	Cyan, purple, pink
`cyber`	Neon cyberpunk	Cyan, magenta, red
`aurora`	Organic nature	Emerald, violet, blue
`monochrome`	Minimal grayscale	White, silver
`sunset`	Warm dusk	Orange, rose, gold
`ocean`	Cool depth	Sky, teal, indigo
`paper`	Light mode	Indigo, pink, cyan

Every color in the stylesheet comes from a token, which is why the light template works without a separate stylesheet.

Runtime control

const page = devtemDesign("app-root", config);

page.setTemplate("sunset");   // switch theme, no re-render
page.destroy();               // remove listeners, observers and markup

devtemDesign.version;         // "0.1.0"
devtemDesign.templates;       // ["figsh", "cyber", "aurora", ...]

Calling devtemDesign() again on the same container destroys the previous instance first, so there are no leaked listeners.

Theme tokens

Override any token with the theme option:

theme: { accent: "#ff4d6d", accent2: "#ffb703", "bg-deep": "#0b0710" }

Token	Purpose
`--accent`, `--accent2`, `--accent3`	Brand colors and gradients
`--text`, `--muted`	Primary and secondary text
`--bg-deep`	Page background, and text on filled buttons
`--glass-bg`, `--glass-border`, `--glass-blur`	Card surfaces
`--surface`, `--line`	Subtle fills and dividers
`--orb`	Ambient orb opacity

Config reference

All text fields accept HTML, so icons and inline markup work. Only pass content you trust.

Core and navigation

Option	Type	Default	Description
`template`	string	`"figsh"`	One of the 7 templates
`theme`	object	`{}`	Token overrides
`themeSwitcher`	boolean or string[]	`false`	Navbar theme button. An array limits the cycle. Choice is saved in `localStorage`
`cursor`	boolean	`true`	Custom cursor on or off
`logo`, `logoName`, `logoHref`	string	fscss logo, `"CORE"`, `"/"`	Brand image, name and link
`navLinks`	(string or `{ label, href }`)[]	Features, How it works, Pricing	Navbar and drawer links
`ctaText`, `ctaHref`	string	`"Get started"`, `"#"`	Navbar button

Hero

Option	Description
`heroBadge`	Pill above the title
`heroTitleLine1`, `heroTitleLine2`	H1 lines. The second has an animated gradient
`heroSubtitle`	Paragraph under the H1
`primaryBtnText`, `primaryBtnHref`	Main button
`secondaryBtnText`, `secondaryBtnHref`	Ghost button, rendered only when text is set
`brands`, `brandsSubtitle`	Hero chips and a seamless marquee that pauses on hover

Sections

Section	Keys	Anchor
Stats	`stats: [{ value, label }]`	`#stats`
Features	`featuresLabel`, `featuresTitle`, `featuresSub`, `features: [{ title, desc, icon }]`	`#features`
Steps	`stepsLabel`, `stepsTitle`, `stepsSub`, `steps: [{ title, desc }]`	`#how`
Panels	`panelsLabel`, `panelsTitle`, `panelsSub`, `panels: [{ tag, title, desc }]`	none
Pricing	`pricingLabel`, `pricingTitle`, `pricingSub`, `yearlyBadge`, `pricing: [...]`	`#pricing`
FAQ	`faqLabel`, `faqTitle`, `faqSub`, `faq: [{ q, a }]`	`#faq`
CTA	`cta: { title, sub, text, href }`	none

Stat values keep their prefix, suffix, commas and decimals, so "$1,200", "99.9%" and "12k+" all count up correctly.

A pricing plan looks like this. A Monthly/Yearly toggle appears automatically when any plan has yearly:

{
  tier: "Pro", amount: "$12", period: "/mo", desc: "For product landings.",
  features: ["Everything in Free", "Priority support"],
  cta: "Go Pro", href: "/signup",
  featured: true, badge: "Most popular",
  yearly: { amount: "$115", period: "/yr" }
}

Footer

footer: {
  tagline: "Declarative UI engine for the modern web.",
  copy: "© 2026 devtem-dev",
  columns: [{ heading: "Product", links: [{ label: "Docs", href: "/docs" }] }],
  social:  [{ icon: "fab fa-github", href: "https://github.com/devtem-dev", label: "GitHub" }],
  legal:   [{ label: "Privacy", href: "/privacy" }]
}

The full schema, with types and defaults, lives at design.devtem.org/api.

Upgrading from 0.0.2

Three option names changed to match what the code actually reads:

0.0.2 docs	Use now
`heroTag`	`heroBadge`
`featuresSectionLabel`	`featuresLabel`
`featuresSectionTitle`	`featuresTitle`

Good to know

Font Awesome is optional. It is only needed for icon fields and footer social icons. The hamburger, checkmarks and accordions are pure CSS.
Theming uses color-mix(), so you need Chrome 111+, Safari 16.2+ or Firefox 113+. Older browsers still render the page but lose some tinted surfaces.
Rendering replaces the container's contents. Give the engine its own wrapper element.

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.

FSCSS layout helpers: stack, hstack, center, size, rounded, ratio-fit, and friends

FSCSS — Wed, 21 Oct 2026 09:14:55 +0000

FSCSS layout helpers: stack, hstack, center, size, rounded, ratio-fit(), and friends

From version 1.2.5 FSCSS added a set of property shorthands aimed at everyday layout and chrome—spacing axes, flex stacks, sizing, and aspect boxes—without inventing a new component system. They compile to ordinary CSS. Use them in .fscss (CLI, runtime, or IDE); production can ship the compiled sheet only.

Full list and expansions: fscss.devtem.org/shorthands · language: fscss@1.2.5 - 1.2.6+

Why these exist

A lot of UI CSS is the same four ideas:

Space along one axis (padding/margin x or y)
Stack children (column or row + gap)
Center content in a box
Size a box (square, both axes, or fit a ratio)

Native CSS can do all of that, but the typing is noisy (display: flex; flex-direction: column; gap: … every time). These helpers expand at compile time so the mental model stays short.

Spacing axes

Shorthand	Idea	Typical expansion
`mx` / `my`	margin on x / y	`margin-left` + `margin-right` / top + bottom
`px` / `py`	padding on x / y	same pattern for padding
`inset-x` / `inset-y`	positioned inset on one axis	without forcing the other axis to `0`

.card {
  px: 20px;
  py: 16px;
  mx: auto;
  max-w: 420px;
}

Use these when you only care about one axis. Prefer full margin / padding when all four sides share one value.

`stack` and `hstack`

Vertical and horizontal flex stacks with gap:

.panel {
  stack: 12px;   /* column + gap */
}

.toolbar {
  hstack: 8px;   /* row + gap */
  fwrap: wrap;   /* if you also use wrap helpers */
}

Roughly: display: flex, direction column or row, and gap from the value. Ideal for forms, toolbars, and card bodies where “children in a line with space between them” is the whole layout story.

`center`

Center children in the box (axis or both, depending on the form your build supports—commonly flex centering):

.hero {
  min-h: 40vh;
  center: both; /* or center: true — see docs */
}

Handy for empty states, icon wells, and hero blocks without repeating align-items / justify-content every time.

`size` and friends

Helper	Role
`size`	width and height (one value → square, or two values)
`max-size` / `min-size`	both axes’ max/min
`insert: ratio-fit();`	size a box to a ratio inside a container

.avatar {
  size: 48px;
  rounded: 999px;
}

.thumb {
  size: 100% 180px;
}

.media {
  inset: ratio-fit(16 / 9);
}

ratio-fit is for the common “keep 16:9 (or any ratio) without a padding-hack essay.” Exact expansion is in the shorthands reference—treat it as the declarative cousin of aspect-ratio + constrained width/height patterns.

`rounded` and surface chrome

.card {
  rounded: 16px;
  bg: #121a30;
  shadow: 0 10px 30px #0003;
}

rounded maps to border-radius. Together with color/spacing shorthands (bg, p, m, …) you can sketch a card shell in a few lines and still compile to standard properties.

Small composed example

.page {
  min-h: 100vh;
  p: 24px;
  bg: #0b1020;
  color: #e6edf7;
  ff: system-ui, sans-serif;
}

.wrap {
  max-w: 960px;
  mx: auto;
  stack: 20px;
}

.row {
  hstack: 16px;
  fwrap: wrap;
}

.card {
  flex: 1;
  min-w: 240px;
  p: 20px;
  rounded: 16px;
  bg: #121a30;
  border: 1px solid #22304f;
  stack: 12px;
}

.icon {
  size: 40px;
  rounded: 12px;
  center: true;
  bg: #1b2745;
}

Read it top to bottom: page padding → centered column → horizontal row of cards → each card is a vertical stack. No design-system runtime—only CSS the browser already understands after compile.

Runtime note: `fscss-props`

If you only need property shorthands in the browser (not full @arr / @define / pattern()), fscss-props expands a similar surface at runtime and exposes JS APIs (element.fscssProp, fscssPropText) for live updates. Full language features still go through the FSCSS compiler (CLI, runtime.js / esm.js, or the IDE).

When to use what

Goal	Prefer
One-off page / prototype	Shorthands in `.fscss` + CDN runtime or IDE
Design tokens + charts + modules	`@import` packs (`st-core@v2`, etc.) and shorthands for local layout
Production	Compile with CLI; ship the CSS file
JS-driven tweaks of padding/size only	`fscss-props` or set CSS variables / longhands from JS

Shorthands do not replace modules. They remove friction between modules—nav bars, card grids, toolbars—where flex + gap + radius is enough.

Try it

npm install fscss@latest

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

Or open the FSCSS IDE, paste a .card { stack: 12px; rounded: 16px; p: 20px; } block, and hit compile.

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.

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

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.

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.

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

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

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

DEV Community: FSCSS tutorial

devtemDesign 0.1.0: one config object paints a whole landing page

Try it in 30 seconds

What's in 0.1.0

A fuller example

Templates

Runtime control

Theme tokens

Config reference

Core and navigation

Hero

Sections

Footer

Upgrading from 0.0.2

Good to know

Links

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

FSCSS layout helpers: stack, hstack, center, size, rounded, ratio-fit, and friends

Why these exist

Spacing axes

stack and hstack

center

size and friends

rounded and surface chrome

Small composed example

Runtime note: fscss-props

When to use what

Try it

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

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

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

4. Optional: reusable button with `@define`

5. Optional: `form.fscss` module

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

`stack` and `hstack`

`center`

`size` and friends

`rounded` and surface chrome

Runtime note: `fscss-props`

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

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

1. Property loop — `%n()`

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

3. Nested selectors — `rpt()`

4. Value fragments — `inline()`

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