DEV Community: FSCSS tutorial

Plain CSS builds for FSCSS modules — when yes, when no, and how

FSCSS tutorial — Fri, 13 Nov 2026 10:01:10 +0000

overlapui ships two products that look related but serve different users:

overlapui.fscss — the real module: @defines, selective @import, token helpers, compose only what you need.
overlapui.css / .min.css — a precompiled drop-in sheet for people who never touch FSCSS: link it, use the utility classes, ship.

That second path raises a fair question: can every other module in the ecosystem do the same?

Short answer: most can ship a plain CSS build; not all should treat it as the primary product. The limit is not “FSCSS can’t compile to CSS” — it always can. The limit is what you lose when you freeze a parameterized module into one fixed stylesheet.

What a “plain CSS version” actually is

It is not a second language implementation. It is:

module.standalone.fscss  →  (fscss CLI / CI)  →  module.css

A standalone entry file typically:

@imports the full module (or a fixed subset)
calls the root / pack helpers with default selectors
sets default tokens on :root

CI or npm run build:css runs the official compiler and publishes module.css + module.min.css next to the .fscss source.

Users who only want CSS:

<link rel="stylesheet" href="…/module.min.css">

Users who want FSCSS keep:

@import((avatar-overlap, ou-root) from overlapui)
@ou-root()
@avatar-overlap(.team)

Same design system, two consumption modes.

When a plain CSS build fits well

Plain CSS shines when the module is already class-and-token shaped:

Pattern	Why CSS export works
Fixed utility classes (`.avatar-overlap`, `.circle-overlap`)	Markup contract is stable
Design tokens on `:root` (`--ou-`, `--ai-`)	Consumers override variables without recompiling
Hover/focus motion in pure CSS	No compile-time loop required at use site
“Drop in and look right” demos	Docs and frameworks that only allow `<link>`

overlapui, large parts of form, icon-mask, circle-progress (default ring classes), and ai-ui (default .ai-shell / .ai-message shells) are in this family. A default compile gives a useful sheet; tokens still allow theming.

When a plain CSS build is weak or misleading

Some modules are generators, not fixed component packs.

st-core@v2 is the clearest case. Charts are driven by:

@arr data of variable length
compile-time loops that emit --st-p1 … --st-pN and clip-path polygons
helpers like @st-chart-line(.line, myData) where the array name and length are part of the compile

A single st-core.css can only encode one frozen default (e.g. eight points with fixed sample values). That is fine as a preview skin or empty chrome. It is not a replacement for “pass my sales array and get the right polygon.” For real data, you still need FSCSS at build time, or you write the CSS variables from JavaScript after a compile-time shell exists.

Similarly:

Situation	Plain CSS limitation
Heavy `@arr` / `rpt` / `count()` expansion	Defaults only; not your dataset
Selector parameters (`@define x(sel:.foo)`)	Standalone must pick one selector set
Selective imports as the main API	Full CSS file is the opposite of tree-shaking
`pattern()` libraries	Matching is compile-time against phrases in your sheet

So: yes, you can always produce a .css artifact. For generator modules, market it as default theme / demo build, not “full module without FSCSS.”

Should all libraries ship one?

Recommended policy for the ecosystem:

Ship .fscss first — source of truth, selective import, parameters.
Ship .css when the default class API is useful alone (overlap, form chrome, icon masks, AI shell defaults).
Document the gap when the CSS build cannot express the main feature (charts, data-driven loops).
Keep CI honest — standalone.fscss → module.css on every release so CSS does not drift from source.

Not every repo needs npm style fields and jsDelivr min files on day one. Prioritize modules people already try to <link> without a preprocessor.

How to add a plain CSS build (any module)

1. Add module.standalone.fscss

@import((*) from "./module.fscss")

@module-root()
@module-pack()   /* or each public helper with default selectors */

Use the same defaults the README teaches for copy-paste HTML.

2. Build in package scripts / GitHub Actions

fscss module.standalone.fscss module.css
# optional minify step → module.min.css

Pin the FSCSS CLI version to the module’s fscss_version / engines field.

3. Publish

files: include .fscss, .standalone.fscss, .css, .min.css
style: point at the main CSS file for tooling that reads package metadata
README: two paths — “With FSCSS” and “CSS only”

4. Tell CSS-only users how to theme

If tokens are on :root, document:

:root {
  --mod-accent: #5eead4;
  --mod-radius: 12px;
}

That recovers a large part of customization without reintroducing the compiler.

Tradeoffs to state clearly

FSCSS module	Plain CSS build
Selective `@import`	Whole default surface (or a chosen subset baked in)
`@define(sel, n, data)`	Fixed selectors / fixed N
One source, many call sites	One compiled snapshot
Ideal for design systems	Ideal for HTML templates, CodePen, no-build sites

Neither path is “more correct.” overlapui.css exists so non-FSCSS pages still get the overlap behavior. overlapui.fscss exists so serious apps only emit the rules they call.

Practical answer

Can all modules have a plain CSS version?

Technically yes — compile a standalone entry that invokes defaults.
Should all modules present that as equivalent to the FSCSS module?

No. Class/token UI packs ≈ strong CSS builds. Data- and loop-driven modules ≈ CSS demos + FSCSS (or JS-written variables) for the real feature.
What should authors or anyone do?

For example: form, icon-mask, circle-progress defaults, ai-ui shells, customizable page chrome: still good to follow the overlapui pattern (standalone file, CI, min.css, dual README). For st-core and similar: ship an optional default CSS for docs, and keep the array/compile path as the real API.

Plain CSS is a distribution channel, not a different product philosophy. FSCSS remains the authoring layer; .css is the frozen export for people who only need the defaults.

FSCSS @define: mixins that compile to boring, good CSS

FSCSS — Sat, 07 Nov 2026 11:42:54 +0000

In FSCSS (Figured Shorthand CSS), reusable blocks and micro-helpers are built with @define. A definition is a compile-time blueprint: parameters go in, @use(...) substitutes them, and the compiler emits normal CSS. You can keep that blueprint in a helpers file, import it into a page stylesheet, rename it, and call it like a local shorthand.

That pipeline is easy to mock: “All that ceremony for a box-shadow and some padding?” Fair question. Below is the minimal protocol, then why it exists when the output stays simple on purpose.

Step 1 — Define a micro

In something like helpers.fscss:

@define elevate(space: 12px) {
  box-shadow: 0 @use(space) 20px rgba(0, 0, 0, 0.1);
  padding: @use(space);
}

Default space is 12px. Call sites can override it.

For blocks that emit a selector wrapper, use a backticked body and put the selector in a parameter:

@define center-box(elem){`
  @use(elem) {
    display: flex;
    justify-content: center;
    align-items: center;
  }
`}

@center-box(.hero) expands into a real rule for .hero, not a property list dumped into the wrong place.

Step 2 — Import (and optionally rename)

In main.fscss:

@import((elevate as shadow) from "./helpers.fscss")

Named import pulls only what you need. as is a local rename: in this file the helper is @shadow, not @elevate. The original name is not available here after the alias. That is deliberate — it avoids collisions when two modules both ship something called card or root.

Same idea works for registry modules and remote paths; the contract is the same: register defines, then call them.

Step 3 — Call it

.card {
  @shadow(16px);
}

Compile once. Output is ordinary CSS:

.card {
  box-shadow: 0 16px 20px rgba(0, 0, 0, 0.1);
  padding: 16px;
}

No runtime mixin engine. No framework component. The browser only ever sees the expanded sheet.

“Why all that protocol for such simple CSS?”

For one card on one page, the protocol is overkill. Write the two properties by hand and move on. FSCSS does not require @define for every rule.

The layers start to earn their keep when the project grows.

1. Change it once

Forty surfaces share the same elevation: cards, modals, menus, chips. Design tightens the blur or the offset.

Plain copy-paste CSS: you hunt every occurrence, miss two, ship inconsistency.
One @define: edit the blueprint, recompile, every call site updates.

The output is still “simple CSS.” The win is where the source of truth lives.

2. One argument, several properties

In elevate, a single space drives both shadow offset and padding:

@define elevate(space: 12px) {
  box-shadow: 0 @use(space) 20px rgba(0, 0, 0, 0.1);
  padding: @use(space);
}

Call @shadow(16px) and both sides stay in proportion. Native custom properties are excellent for values, but they do not replace a compile-time template that stitches the same token into different property positions without repeating the call site. Mixins are for structure + substitution; variables are for runtime-tunable values. Use both when each fits.

3. Design-system guardrails

Teams drift toward magic numbers: box-shadow: 0 3px 14px … next to 0 8px 24px … with no shared scale. Approved micros — @elevate(sm)-style patterns, or a small set of named helpers — push people toward the same vocabulary. Consistency becomes the default path, not a style-guide PDF nobody opens.

Modules in the wider ecosystem (charts, forms, AI chrome, overlap stacks) are the same idea at library scale: publish @defines, import what you need, compile to CSS the browser already understands.

Mental model

Piece	Role
`@define`	Publish a parameterized blueprint
`@use(name)`	Insert the argument at compile time
`@import((…))`	Bring defines into this file
`as`	Local rename; original name unused here
`@name(…)`	Run substitution → CSS

@import does not “run” the module. It exposes registered defines. Communication finishes when you invoke the mixin.

When to skip it

One-off layout
Prototype you will throw away
A value that truly appears once

Write standard CSS (or FSCSS shorthands on a single rule) and do not invent a helper “just because.”

When the same multi-property pattern shows up the third time, extract an @define. When another file needs it, import. When two libraries collide on a name, alias with as.

Closing

The protocol looks heavy only if you judge it by a single compiled rule. Judge it by how many times that rule would have been duplicated, and by whether one parameter keeps related properties in sync.

FSCSS @define is not trying to make CSS clever at runtime. It is trying to make your source maintainable, then emit the boring CSS you would have written by hand — once, correctly, everywhere it is needed.

ai-ui.fscss: shell, messages, prompt, and stream — without a UI kit runtime

FSCSS tutorial — Fri, 06 Nov 2026 11:48:33 +0000

ai-ui.fscss is a presentation layer for AI product surfaces in the FSCSS ecosystem: tokens, layout, and chrome only. No models, no streaming clients, no backend.

Your app still owns data, events, and model I/O. This module owns how the shell, messages, prompt bar, and related pieces look and sit on the page — and it compiles to plain CSS.

What it covers

Surface	Role
Shell	App grid: sidebar + main + room for the prompt
Messages	User / assistant rows, bubbles, avatars
Prompt	Textarea + send control
Stream	Caret on partial assistant text
Thinking	Processing dots
Citations	Source chips under answers
Artifacts	Code / JSON / doc cards
Workflow	Step nodes and edges
Usage	Token and metric cards

Same contract as other FSCSS modules: import registers @define helpers, you call them with host selectors, markup uses those class names, design tokens flow through CSS variables.

Install mindset

You need FSCSS 1.2.6+ (CLI, browser runtime, IDE, or the Python wrapper - same language).

Registry-style import:

@import((*) from ai-ui)

Or selective, when you only want part of the surface:

@import((
  ai-root,
  ai-theme-research,
  ai-shell,
  ai-messages,
  ai-message,
  ai-message-assistant,
  ai-bubble,
  ai-citations,
  ai-citation,
  ai-stream
) from ai-ui)

In the browser IDE, package automation can scaffold demos with something like libon ai-ui / libck ai-ui to enable the pack in your workspace.

Tokens and themes

Start from a root once:

@ai-root()                 /* :root */
/* or @ai-root(root.my-scope) for a scoped tree */

Themes override token values on that root:

Helper	Character
`@ai-theme-minimal()`	Quiet, near-monochrome
`@ai-theme-copilot()`	Blues / greens, product-chat feel
`@ai-theme-research()`	Slate + cyan, citation-heavy
`@ai-theme-support()`	Calm support-desk green
`@ai-theme-dashboard()`	Stronger accent for ops / agent boards

Composition presets apply root + theme in one call:

@ai-compose-copilot()
/* same idea as @ai-root() + @ai-theme-copilot() */

Also available: @ai-compose-minimal(), @ai-compose-research(), @ai-compose-support(), @ai-compose-dashboard().

You still call shell / message / prompt helpers for structure. Presets only set the token layer.

Typical tokens you will override locally:

Surfaces: --ai-bg, --ai-surface, --ai-card
Brand: --ai-accent, --ai-accent-2
Roles: --ai-user, --ai-assistant
Type: --ai-text, --ai-text-muted
Layout: --ai-sidebar-w, --ai-prompt-h, --ai-msg-max

.ai-shell {
  --ai-accent: #a78bfa;
  --ai-sidebar-w: 240px;
}

Minimal copilot shell

Structure helpers take the host selector:

@import((*) from ai-ui)

@ai-compose-copilot()

@ai-shell(.ai-shell)
@ai-sidebar(.ai-sidebar)
@ai-main(.ai-main)
@ai-messages(.ai-messages)
@ai-message(.ai-message)
@ai-message-user(.ai-message-user)
@ai-message-assistant(.ai-message-assistant)
@ai-bubble(.ai-bubble)
@ai-avatar(.ai-avatar)
@ai-prompt(.ai-prompt)
@ai-prompt-box(.ai-prompt-box)
@ai-prompt-send(.ai-prompt-send)

Markup shape:

<div class="ai-shell">
  <aside class="ai-sidebar">/* threads, nav */</aside>
  <main class="ai-main">
    <div class="ai-messages">
      <div class="ai-message ai-message-user">
        <div class="ai-avatar">U</div>
        <div class="ai-bubble">Track order 12389</div>
      </div>
      <div class="ai-message ai-message-assistant">
        <div class="ai-avatar">AI</div>
        <div class="ai-bubble">Out for delivery…</div>
      </div>
    </div>
    <form class="ai-prompt" onsubmit="return false">
      <textarea class="ai-prompt-box" placeholder="Ask…" rows="1"></textarea>
      <button class="ai-prompt-send" type="submit" aria-label="Send">↑</button>
    </form>
  </main>
</div>

User rows align one way; assistant rows the other. Bubbles and avatars are separate pieces so you can swap markup without fighting the layout grid.

Stream, thinking, citations, artifacts

When the answer is still arriving:

@ai-stream(.ai-stream)
@ai-thinking(.ai-thinking)

<div class="ai-bubble ai-stream">Partial answer…</div>
<div class="ai-thinking">
  <span class="ai-dot"></span>
  <span class="ai-dot"></span>
  <span class="ai-dot"></span>
  Thinking…
</div>

Citations under an answer:

@ai-citations(.ai-citations)
@ai-citation(.ai-citation)

<div class="ai-citations">
  <a class="ai-citation" href="#"><span class="ai-cite-num">1</span> source.api</a>
</div>

Artifact card (code / JSON / doc):

@ai-artifacts(.ai-artifacts)
@ai-artifact-header(.ai-artifact-header)
@ai-artifact-body(.ai-artifact-body)

<div class="ai-artifacts">
  <div class="ai-artifact-header">
    <span>status.json</span>
    <span>JSON</span>
  </div>
  <div class="ai-artifact-body">{ /* … */ }</div>
</div>

Workflow strip for agent steps:

@ai-workflow(.ai-workflow)
@ai-node(.ai-node)
@ai-edge(.ai-edge)

Usage / stats for an ops board:

@ai-usage(.ai-usage)
@ai-stat(.ai-stat)

<div class="ai-usage">
  <div class="ai-stat">
    <span class="ai-stat-label">Tokens today</span>
    <span class="ai-stat-value">48.2k</span>
    <span class="ai-stat-delta up">+12%</span>
  </div>
</div>

Tool chips (search / generate / etc.):

@ai-tools(.ai-tools)
@ai-tool-chip(.ai-tool-chip)

Utilities when you need a plain card or divider in the same token system: @ai-card, @ai-divider, @ai-scroll-fade.

Compose with others

ai-ui does not draw charts. For an ops dashboard you combine modules:

ai-ui — shell, message column, prompt, workflow, usage chrome
st-core@v2 — pure CSS charts from arrays and custom properties
circle-progress — rings for quotas or completion
overlapui — avatar stacks in a sidebar or header

Import both (or all) and keep selectors in their own namespaces. Example depth pattern:

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

@ai-compose-dashboard()
@st-root()
/* chart fill / line helpers on a card inside .ai-main */

That is the same idea as a product screen: one token story for the AI chrome, another for the chart series, no shared class collisions by design.

What this is not

Not a chat backend
Not a streaming protocol
Not a replacement for accessibility work in your markup (labels, live regions, focus order stay your job)

It is the CSS layer so you are not rewriting the same shell for every AI experiment.

Mental model

Register — @import from ai-ui
Theme — @ai-compose-* or @ai-root + @ai-theme-*
Structure — @ai-shell, @ai-messages, @ai-prompt, … with your selectors
Markup — class names that match those selectors
Ship — compile with CLI / IDE / Python wrapper, or prototype with the browser runtime

Selective imports keep the emitted CSS small when you only need research citations or a dashboard strip.

If you are building copilots, research assistants, support bots, or agent ops boards and you already like FSCSS modules, ai-ui.fscss is the matching piece for the conversation chrome: detailed enough to look intentional, light enough that the framework and the model stay outside the stylesheet.

Source and full helper list live in the ai-ui.fscss repo
try a compose preset first, then add stream, citations, and artifacts only where the product actually needs them.

st-core.fscss Charts: Dynamic Updates in Modern Frameworks

FSCSS tutorial — Mon, 02 Nov 2026 00:08:38 +0000

st-core.fscss draws area, line, and spider/radar charts with pure CSS — clip-path: polygon() and custom properties, no SVG path builders, no canvas, no chart runtime on the critical path.

That design has a practical consequence for apps: updating a chart is rewriting CSS variables. Reactive frameworks already do that well. You do not need a JS chart instance, a virtual DOM subtree for every point, or a third-party wrapper’s internal state.

This article covers:

How data maps to CSS variables
Smooth transitions when values stream in
Patterns for Svelte, React, Vue, and plain JS

Requires FSCSS ≥ 1.2.3 and st-core@v2.

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

How dynamic updates work

Linear charts

@st-chart-points(array) writes inverted Y positions on the host:

--st-p1, --st-p2, … --st-pN

Fill, line, and dots only read those variables. Change the variables → the polygon and markers move.

Spider / radar charts

@st-spider-points(array, rmax) writes polar coordinates:

--st-sx1 / --st-sy1 … --st-sxN / --st-syN

Same rule: points write, renderers read. Multi-series means one host per series so variables do not collide.

What you update at runtime

Chart	Variables to set
Linear	`--st-p1` … `--st-pN` as percentages (top = 0%)
Spider	`--st-sxN` / `--st-syN` via `calc()` + `sin` / `cos`

Geometry length (number of vertices) is fixed when FSCSS expands the mixins. Streaming updates should keep the same point count as the compiled polygon, or recompile with a new array length.

Smooth transitions

Because the visible shape is clip-path (and dots use top / left), the browser can interpolate on the compositor:

.chart-fill,
.chart-line {
  transition: clip-path 0.3s ease;
}

.chart-dot-1,
.chart-dot-2,
.chart-dot-3,
.chart-dot-4,
.chart-dot-5,
.chart-dot-6,
.chart-dot-7,
.chart-dot-8 {
  transition: top 0.3s ease, left 0.3s ease;
}

/* Spider markers */
.spider-dot-1,
.spider-dot-2,
.spider-dot-3,
.spider-dot-4,
.spider-dot-5,
.spider-dot-6 {
  transition: top 0.3s ease, left 0.3s ease;
}

Note: Add transition: clip-path 0.3s ease, top 0.3s ease; (and left where needed) on the selectors that own the geometry. When new data points stream in, motion stays native and typically hits 60fps without a JS animation loop.

Optional:

.chart-fill,
.chart-line {
  transition: clip-path 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

Helper: write variables from JS

Linear (0–100 scores → CSS %)

/** @param {number[]} values scores 0–100 */
export function linearVars(values) {
  return values
    .map((v, i) => `--st-p${i + 1}: ${100 - v}%`)
    .join(";");
}

// host.style.cssText = linearVars([40, 55, 30, 70, 60]);
// or: host.setAttribute("style", linearVars(values));

Spider / radar

/** @param {number[]} values scores 0–100 @param {number} rmax radius % of box */
export 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("");
}

Call these when props/store data change. No chart library, no requestAnimationFrame required for the interpolation itself.

Dynamic updates in modern frameworks

Because st-core operates on standard CSS variables, reactive frameworks can pass dataset values straight into the host’s style (or a style binding) without re-mounting chart components or syncing third-party chart state.

Svelte

Compile FSCSS once (CLI or runtime). In the component, bind variables when data changes:

<script>
  export let data = [40, 55, 30, 70, 60, 45, 80, 50];

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

  $: chartStyle = linearVars(data);
</script>

<div class="chart" style={chartStyle}>
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
  {#each data as _, i}
    <div class="chart-dot-{i + 1}"></div>
  {/each}
</div>

<style>
  .chart-fill,
  .chart-line {
    transition: clip-path 0.3s ease;
  }
  :global([class^="chart-dot-"]) {
    transition: top 0.3s ease, left 0.3s ease;
  }
</style>

Stream updates:

data = await fetchLiveSeries(); // same length → smooth morph

Spider host:

<div class="spider" style={polarVars(skills, 42)}>
  <div class="spider-grid"></div>
  <div class="spider-spokes"></div>
  <div class="spider-fill"></div>
  <div class="spider-line"></div>
  {#each skills as _, i}
    <div class="spider-dot-{i + 1}"></div>
  {/each}
</div>

React

import { useMemo } from "react";

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

export function AreaChart({ data }) {
  const style = useMemo(() => linearVars(data), [data]);

  return (
    <div className="chart" style={parseCssText(style)}>
      <div className="chart-fill" />
      <div className="chart-line" />
      {data.map((_, i) => (
        <div key={i} className={`chart-dot-${i + 1}`} />
      ))}
    </div>
  );
}

/** cssText → React style object for custom properties */
function parseCssText(cssText) {
  return Object.fromEntries(
    cssText
      .split(";")
      .filter(Boolean)
      .map((pair) => {
        const [k, v] = pair.split(":");
        return [k.trim(), (v ?? "").trim()];
      })
  );
}

Or set the host with a ref (avoids parsing):

import { useEffect, useRef } from "react";

export function AreaChart({ data }) {
  const ref = useRef(null);

  useEffect(() => {
    if (!ref.current) return;
    ref.current.style.cssText = linearVars(data);
  }, [data]);

  return (
    <div className="chart" ref={ref}>
      <div className="chart-fill" />
      <div className="chart-line" />
      {data.map((_, i) => (
        <div key={i} className={`chart-dot-${i + 1}`} />
      ))}
    </div>
  );
}

Keep transition rules in your global or CSS-module sheet imported once with the st-core output.

Vue 3

<script setup>
import { computed } from "vue";

const props = defineProps({
  data: { type: Array, required: true },
});

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

const chartStyle = computed(() => linearVars(props.data));
</script>

<template>
  <div class="chart" :style="chartStyle">
    <div class="chart-fill" />
    <div class="chart-line" />
    <div
      v-for="(_, i) in data"
      :key="i"
      :class="'chart-dot-' + (i + 1)"
    />
  </div>
</template>

<style scoped>
.chart-fill,
.chart-line {
  transition: clip-path 0.3s ease;
}
</style>

Vue accepts a CSS text string on :style for custom properties in modern builds; if your toolchain expects an object, split the same way as the React parseCssText helper.

Plain JS / live metrics

const host = document.querySelector(".chart");

async function tick() {
  const series = await api.latestWindow(); // length N
  host.style.cssText = linearVars(series);
}

setInterval(tick, 2000);

With the transition CSS above, each tick morphs the area/line without tearing down nodes.

Multi-series

Each series needs its own host (same rule as static st-core):

<div class="series-a" style="/* --st-p* for A */">
  <div class="fill-a"></div>
  <div class="line-a"></div>
</div>
<div class="series-b" style="/* --st-p* for B */">
  <div class="fill-b"></div>
  <div class="line-b"></div>
</div>

elA.style.cssText = linearVars(seriesA);
elB.style.cssText = linearVars(seriesB);

Spider multi-series: one polarVars(...) per host, distinct --st-accent / opacity tokens as needed.

Checklist

Compile st-core mixins for a fixed N (array length).
Render host + fill/line/dots (dots need real DOM nodes).
Add transition: clip-path (and top / left for dots).
On data change, set --st-p* or --st-sx* / --st-sy* only.
Keep N stable while streaming for smooth morphs.

Why this stays lightweight

Typical chart lib	st-core + framework
Chart instance + diff	CSS variables on a host
Re-render path / SVG	Same DOM, new custom properties
Animation tween in JS	Optional CSS `transition`
Heavy dependency	FSCSS output + your existing UI framework

Reactive frameworks already schedule updates when props or stores change. st-core simply consumes those updates as style, which is why dynamic dashboards stay small and predictable.

Compile FSCSS from Python — CLI, API, Flask & Django

FSCSS tutorial — Sat, 31 Oct 2026 08:59:53 +0000

FSCSS (Figured Shorthand CSS) usually shows up next to npm, a browser IDE, or a CDN runtime. If your stack is Python-first, you still shouldn’t have to maintain a separate Node app just to turn .fscss into CSS.

The fscss package on PyPI is a thin Python layer around the official compiler. It vendors xfscss (currently 1.2.6) and runs it with Node. Same language as the IDE and npm install fscss — not a second, partial implementation.

Repo: github.com/Omonire/fscss-py
Hub guide: hub.devtem.org/python-compiler
Language docs: fscss.devtem.org

What you get

Surface	Use
`compile_file` / `compile_string` / `compile_dir`	Build scripts & tools
CLI `fscss in.fscss out.css`	Local / CI
`--watch`	Simple recompile loop
`init_flask` / `init_django`	Static assets on app start

Requirements: Python 3.7+ (tested 3.8–3.12) and Node.js 20+ on PATH. Node is not bundled.

.fscss  →  Python API / CLI  →  node (vendored xfscss)  →  .css

Install

pip install fscss
node --version   # v20+

Minimal example

style.fscss

$accent: #8f6bff;

@define card(sel:.card){`
  @use(sel) {
    px: 16px;
    py: 14px;
    rounded: 12px;
    stack: 12px;
  }
`}

body {
  bg: #0b0a13;
  color: $accent!;
  ff: sans-serif;
}

@card(.panel)

Python

import fscss

fscss.compile_file("style.fscss", "style.css")

CLI

fscss style.fscss style.css
fscss style.fscss --watch

Shorthands like px, rounded, and stack need FSCSS 1.2.5+ in the engine (this package vendors 1.2.6).

API snapshot

import fscss

# In-memory
css = fscss.compile_string("$c: red;\nbody{ color: $c!; }")

# Whole tree → sibling .css files
for src, out in fscss.compile_dir("static"):
    print(f"{src} -> {out}")

Function	Notes
`compile_file(in, out)`	Returns compiler stdout/stderr (warnings included). Raises `RuntimeError` on hard failure.
`compile_string(source)`	Returns CSS when no `output_path` (warnings not included).
`compile_dir(dir)`	Every `.fscss` → matching `.css`
`watch_dir(dir)`	Daemon thread, poll interval

Flask & Django

Flask — compile static folder; watch when debug is on:

from flask import Flask
import fscss

app = Flask(__name__)
fscss.init_flask(app)

Django — e.g. from AppConfig.ready():

import fscss

fscss.init_django()
# or: fscss.init_django("path/to/static")

Ship the compiled .css in production if you want zero Node on the server; use the helper in dev for convenience.

When to use this vs other FSCSS tools

Tool	Fit
This package	Python apps, pipelines, Flask/Django static
npm `fscss`	Node/CI already in the repo
Browser IDE	Learning, multi-file, xfcmds, `libck`, `libon`, modules
`runtime.min.js` / `esm.min.js`	Prototypes in the browser

One language, several front doors — production output is still plain CSS.

Caveats (short)

One Node process per compile — fine for builds, not a substitute for a long-lived daemon.
Warnings often still exit 0; check return text from compile_file.
$variables are order-sensitive; declare them before rules.
Engine bugs → Figsh/xfscss; wrapper bugs → fscss-py issues.

Try it

pip install fscss
fscss --version

Compile a real .fscss file and compare with the IDE or npx fscss if you have Node tooling already.

Links

PyPI: https://pypi.org/project/fscss/
GitHub: https://github.com/Omonire/fscss-py
Hub: https://hub.devtem.org/python-compiler
FSCSS docs: https://fscss.devtem.org
Modules: https://github.com/fscss-ttr

Early package (0.1.x) — reports with minimal input/output and node --version help a lot.

Yes, pure CSS can do radar charts — and st-core.fscss still stays lightweight

FSCSS — Thu, 29 Oct 2026 18:35:23 +0000

The short answer to “there are no pure CSS chart libraries that can generate radar/spider charts” is: there is one now. And it did not get heavy to do it.

st-core.fscss v2 draws area, line, and spider/radar charts with the same idea:

FSCSS @arr for data
CSS custom properties for coordinates
clip-path: polygon() for shapes
Gradients for grid / spokes

No SVG. No canvas. No Chart.js / D3 / Recharts on the critical path.

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

Requires FSCSS ≥ 1.2.3 (spider helpers ship in v2).

The claim this answers

For a long time the pragmatic take was:

Pure CSS can fake a bar or a simple line. Radar needs polar math, multiple series, spokes, labels — so you need SVG or a library.

That was fair when “CSS charts” meant hand-written polygons or one-off hacks.

st-core@v2 treats radar the same way it treats linear charts: data in → variables out → polygons on screen. Polar is just a different coordinate writer.

Is it still lightweight?

Yes.

st-core is not a monolithic stylesheet you dump on every page.

Design rule	What it means
What you call is what is invoked	Helpers only emit CSS when you call them (`@st-spider-fill`, `@st-spider-line`, …). Unused chart families stay out of the output.
No third-party chart runtime	No vendor JS, no unused Chart.js themes, no SVG path builder.
Selective import	Import only the helpers you need, or compile once with the CLI and ship plain CSS.
Tokens, not frameworks	Color, fill opacity, stroke scale are CSS variables (`--st-accent`, `--st-spider-fill-opacity`, …).

In FSCSS terms: @import registers @define helpers. Nothing paints until you call them with a selector. Call spider only → you do not pay for a linear-only dashboard you never used. Call fill + line only → dots and grid stay out.

Compile path (production):

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

Ship chart.css. No client preprocessor. No chart library bundle.

Minimal radar (one series)

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.6/runtime.min.js" async></script>
<style>
@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);
}
</style>

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

Six axes, fill, dual-pass stroke, dots, rings, spokes — still only the helpers you named.

How polar stays pure CSS

One rule (same as linear charts):

Points write. Renderers read.

Helper	Role
`@st-spider-points(array, rmax)`	On the host: writes `--st-sxN` / `--st-syN` via `sin` / `cos` in `calc()`
`@st-spider-fill` / `@st-spider-line` / `@st-spider-dots`	Read those variables; emit `clip-path` / positioned dots
`@st-spider-grid`	Concentric rings (radial gradient)
`@st-spider-spokes` / `@st-spider-spokes-n`	Radial axes

Angle 0° is at the top. Radius is a % of the box (rmax, often 42).

/* conceptual output per vertex */
--st-sx1: calc(50% + (r * 1%) * sin(0deg));
--st-sy1: calc(50% - (r * 1%) * cos(0deg));

Polygon vertex count is fixed at compile time from @arr length. Changing values at runtime is free (set the variables). Changing length needs a matching compiled shape (same constraint as linear series).

Multi-series without coordinate clashes

Each series gets its own host and its own @st-spider-points scope:

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

@st-spider-fill(.fill-a, teamA)
@st-spider-line(.line-a, teamA)
@st-spider-fill(.fill-b, teamB)
@st-spider-line(.line-b, teamB)

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

Shared grid/spokes once; series only differ by tokens and points. Still no chart library.

Live updates (optional JS)

You do not need JS to paint the chart. You only need it if values change after load:

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(' ');
}

document.querySelector('.spider').style.cssText =
  polarVars([80, 65, 90, 55, 70, 85]);

That is a few lines of state — not a charting framework.

Why “lightweight” holds after radar

Radar did not force a second architecture:

Before (linear)	After (spider)
`@arr` + `--st-pN`	`@arr` + `--st-sxN` / `--st-syN`
`clip-path` fill / line	Same, polar vertices
Call only the helpers you need	Same
Compile to plain CSS	Same

You did not import “st-core full product suite.” You invoked spider helpers. Unused linear-only pages never see those rules if you selective-import or compile a dedicated sheet.

No unused third-party stylesheets. No hidden JS chart theme. No hydration tax for a static skills matrix.

When pure CSS radar is the right tool

Good fit

Skills matrices, multi-axis scores, team comparison cards
Dashboards that already avoid heavy front-end frameworks
SEO / first paint: real DOM, no canvas blank frame
Design-system tokens already driving the rest of the UI

Less ideal

Thousands of points with continuous streaming redraw (canvas wins)
Interaction-heavy brushing/zoom (libraries still win)
Dynamic axis count every second (compile-time polygon length)

st-core is honest about that boundary: visualization as styling, not as a full analytics runtime.

Try it

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

# production
npm i -g fscss
fscss radar.fscss radar.css

Resources/examples : st-core.fscss README — Spider / Radar

Visual builder: hub.devtem.org/st-core.fscss/visual-builder

Radar is no longer proof that pure CSS charts “can’t.” With st-core@v2 it is the same lightweight contract as area and line — what you call is what is invoked, tokens instead of a library, compile when you want zero runtime. MIT · fscss-ttr.

Build an AI Ops Dashboard with FSCSS (ai-ui, st-core, circle-progress, overlapui)

FSCSS tutorial — Wed, 28 Oct 2026 11:24:16 +0000

If you have ever built an AI product UI, you know the pattern. A sidebar, a chat column, a metrics panel, a streaming caret, some usage cards. It is a lot of CSS before you write a single line of product logic.

In this tutorial we build an AI Ops Console using four FSCSS modules, compile everything to one plain CSS file, and wire it up with a small vanilla JavaScript layer. No frameworks. No runtime preprocessor in the browser.

CodePen preview

What we are building

An AI Ops Console with a desktop layout (sidebar, chat, metrics panel) and a mobile layout (hamburger sidebar drawer, bottom sheet metrics panel at 960px and below).

Surface	Module
App shell, sidebar, messages, prompt, stream caret, thinking dots, usage cards, workflow nodes, tool chips, citations	ai-ui.fscss
Token burn area and line chart (clip-path, no SVG or canvas)	st-core@v2
GPU, Queue and Quota rings	circle-progress
Team avatar stack	overlapui
Mock agent replies, live chart nudges, mobile drawers	dashboard.js

The project is split into four files:

ai-dashboard/
├── dashboard.html      # markup only
├── dashboard.fscss     # all FSCSS + layout
├── dashboard.css       # compiled output (generated)
└── dashboard.js        # chat, drawers, chart updates

You compile once and ship plain CSS.

Prerequisites

Node.js 18 or newer (for the FSCSS CLI)
A modern browser
Optional: VS Code with the FSCSS Support extension

Install the compiler globally:

npm install -g fscss@1.2.6

You need FSCSS 1.2.6 or newer. ai-ui requires it, and st-core needs 1.2.3 or newer.

1. Project setup

mkdir ai-dashboard && cd ai-dashboard
touch dashboard.html dashboard.fscss dashboard.js

dashboard.css will be generated by the CLI in step 3.

2. dashboard.fscss: the styles source

This file imports the four modules, calls their helpers against your own class names, defines the chart series, and holds all layout and responsive rules.

/* dashboard.fscss
   AI Ops Dashboard: FSCSS source
   Compile:  fscss dashboard.fscss dashboard.css
*/

/* Modules (registry names; CLI + runtime resolve these) */
@import((*) from ai-ui)
@import((*) from st-core@v2)
@import((*) from circle-progress)
@import((*) from overlapui)

/* Theme + design tokens */
@ai-compose-dashboard()   /* ai-ui tokens + dashboard theme */
@st-root()                /* st-core chart tokens */
@progress-root()          /* circle-progress tokens */
@ou-root()                /* overlapui tokens */

/* ai-ui structure helpers */
@ai-shell(.ai-shell)
@ai-sidebar(.ai-sidebar)
@ai-main(.ai-main)
@ai-messages(.ai-messages)
@ai-message(.ai-message)
@ai-message-user(.ai-message-user)
@ai-message-assistant(.ai-message-assistant)
@ai-bubble(.ai-bubble)
@ai-avatar(.ai-avatar)
@ai-prompt(.ai-prompt)
@ai-prompt-box(.ai-prompt-box)
@ai-prompt-send(.ai-prompt-send)
@ai-stream(.ai-stream)
@ai-thinking(.ai-thinking)
@ai-usage(.ai-usage)
@ai-stat(.ai-stat)
@ai-workflow(.ai-workflow)
@ai-node(.ai-node)
@ai-edge(.ai-edge)
@ai-tools(.ai-tools)
@ai-tool-chip(.ai-tool-chip)
@ai-card(.ai-card)
@ai-divider(.ai-divider)
@ai-citations(.ai-citations)
@ai-citation(.ai-citation)

/* st-core linear chart */
@arr tokenSeries[32, 48, 55, 42, 68, 75, 61, 88, 72, 91, 84, 96]

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

.token-chart {
  @st-chart-points(tokenSeries)
  position: relative;
  height: 160px;
  width: 100%;
  background: var(--st-surface, #161422);
  border-radius: 12px;
  overflow: hidden;
}

/* circle-progress */
@circle-progress(.cp)
.cp-72 { @progress-range(72) }
.cp-48 { @progress-range(48) }
.cp-91 { @progress-range(91) }

.cp {
  --progress-size: 110px;
  --progress-stroke: 10px;
  --progress-color-bg: transparent;
  --progress-color-track: rgba(255, 255, 255, 0.08);
  --progress-color-arc: var(--ai-accent, #e879f9);
  --progress-color-glow: color-mix(in srgb, var(--ai-accent, #e879f9) 40%, transparent);
  --progress-color-value: var(--ai-text, #f5f3ff);
  --progress-color-label: var(--ai-text-muted, #a78bfa);
  font-size: 0.95rem;
  font-weight: 600;
}

/* overlapui avatars */
@avatar-overlap(.team-faces)
.team-faces {
  --ou-avatar-size: 36px;
  --ou-overlap: -12px;
  margin-block: 8px;
}

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

html, body {
  height: 100%;
  font-family: var(--ai-font, system-ui, -apple-system, sans-serif);
  background: var(--ai-bg, #0c0a12);
  color: var(--ai-text, #f5f3ff);
  -webkit-text-size-adjust: 100%;
}

.ai-shell {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  display: grid;
  grid-template-columns: var(--ai-sidebar-w, 240px) 1fr;
}

.ai-sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 16px;
  overflow-y: auto;
  border-right: 1px solid var(--ai-border, rgba(255, 255, 255, 0.08));
  background: var(--ai-bg, #0c0a12);
  z-index: 40;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.02em;
}
.brand-mark {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--ai-accent, #e879f9), #818cf8);
  display: grid;
  place-items: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: #0c0a12;
  flex-shrink: 0;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--ai-text-muted, #a78bfa);
  text-decoration: none;
  font-size: 0.875rem;
  transition: background 0.15s, color 0.15s;
}
.nav a:hover,
.nav a.active {
  background: color-mix(in srgb, var(--ai-accent, #e879f9) 12%, transparent);
  color: var(--ai-text, #f5f3ff);
}

.side-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.side-section h3 {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ai-text-muted, #a78bfa);
  font-weight: 600;
}

.cp-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}
.cp-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--ai-text-muted, #a78bfa);
}

.ai-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ai-border, rgba(255, 255, 255, 0.08));
  gap: 10px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.topbar h1 {
  font-size: 1rem;
  font-weight: 600;
}
.topbar-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.chip {
  font-size: 0.75rem;
  padding: 4px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ai-accent, #e879f9) 15%, transparent);
  color: var(--ai-accent, #e879f9);
  border: 1px solid color-mix(in srgb, var(--ai-accent, #e879f9) 30%, transparent);
  white-space: nowrap;
}

.workspace {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  min-height: 0;
  overflow: hidden;
}

.chat-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  border-right: 1px solid var(--ai-border, rgba(255, 255, 255, 0.06));
}

.ai-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  -webkit-overflow-scrolling: touch;
}

.ai-prompt {
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--ai-border, rgba(255, 255, 255, 0.06));
  flex-shrink: 0;
}

.right-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--ai-surface, #12101a) 80%, transparent);
  -webkit-overflow-scrolling: touch;
}

.panel-card {
  background: var(--ai-card, #1a1625);
  border: 1px solid var(--ai-border, rgba(255, 255, 255, 0.08));
  border-radius: 12px;
  padding: 14px;
}
.panel-card h3 {
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--ai-text-muted, #a78bfa);
}

.ai-workflow {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-size: 0.75rem;
}
.ai-node {
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--ai-surface, #161422);
  border: 1px solid var(--ai-border, rgba(255, 255, 255, 0.1));
}
.ai-node.is-active {
  border-color: var(--ai-accent, #e879f9);
  color: var(--ai-accent, #e879f9);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ai-accent, #e879f9) 40%, transparent);
}
.ai-edge {
  width: 16px;
  height: 2px;
  background: var(--ai-border, rgba(255, 255, 255, 0.2));
}

.ai-usage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ai-stat {
  background: var(--ai-surface, #161422);
  border-radius: 10px;
  padding: 10px 12px;
}
.ai-stat-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ai-text-muted, #a78bfa);
  margin-bottom: 4px;
}
.ai-stat-value {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ai-stat-delta {
  font-size: 0.7rem;
  margin-left: 6px;
}
.ai-stat-delta.up { color: #4fffb0; }
.ai-stat-delta.down { color: #ff5e7d; }

.ai-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ai-tool-chip {
  font-size: 0.7rem;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ai-surface, #161422);
  border: 1px solid var(--ai-border, rgba(255, 255, 255, 0.1));
}
.ai-tool-chip.is-done { border-color: #4fffb0; color: #4fffb0; }
.ai-tool-chip.is-running { border-color: var(--ai-accent, #e879f9); color: var(--ai-accent, #e879f9); }

.muted {
  color: var(--ai-text-muted, #a78bfa);
  font-size: 0.8rem;
}

/* Mobile controls (hidden on desktop) */
.menu-btn,
.panel-btn,
.sidebar-backdrop {
  display: none;
}

/* TABLET <= 960px */
@media (max-width: 960px) {
  .ai-shell {
    grid-template-columns: 1fr;
  }

  .ai-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(280px, 86vw);
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    box-shadow: none;
    border-right: 1px solid var(--ai-border, rgba(255, 255, 255, 0.08));
  }
  body.sidebar-open .ai-sidebar {
    transform: translateX(0);
    box-shadow: 8px 0 32px rgba(0, 0, 0, 0.45);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 35;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.sidebar-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .menu-btn,
  .panel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid var(--ai-border, rgba(255, 255, 255, 0.12));
    background: var(--ai-surface, #161422);
    color: var(--ai-text, #f5f3ff);
    cursor: pointer;
    font-size: 1.1rem;
    flex-shrink: 0;
    line-height: 1;
  }

  .topbar {
    padding: 10px 12px;
    gap: 8px;
  }
  .topbar h1 {
    font-size: 0.95rem;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .topbar-actions { gap: 6px; }
  .chip {
    font-size: 0.7rem;
    padding: 3px 8px;
  }
  #model-chip { display: none; }

  .workspace {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    position: relative;
  }
  .chat-col {
    border-right: none;
    min-height: 0;
  }

  .right-panel {
    position: fixed;
    inset: auto 0 0 0;
    max-height: min(72vh, 560px);
    border-radius: 16px 16px 0 0;
    border-top: 1px solid var(--ai-border, rgba(255, 255, 255, 0.1));
    transform: translateY(110%);
    transition: transform 0.28s ease;
    z-index: 30;
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.4);
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }
  body.panel-open .right-panel {
    transform: translateY(0);
  }
  .right-panel::before {
    content: "";
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    margin: 0 auto 10px;
  }

  .token-chart { height: 140px; }
  .cp {
    --progress-size: 88px;
    --progress-stroke: 8px;
    font-size: 0.85rem;
  }
}

/* PHONE <= 600px */
@media (max-width: 600px) {
  .ai-messages {
    padding: 12px;
    gap: 12px;
  }
  .ai-prompt {
    padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .ai-usage {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .ai-stat { padding: 8px 10px; }
  .ai-stat-value { font-size: 1rem; }

  .cp-row {
    justify-content: center;
    gap: 12px;
  }
  .cp {
    --progress-size: 76px;
    --progress-stroke: 7px;
    font-size: 0.8rem;
  }

  .panel-card { padding: 12px; }
  .ai-workflow { gap: 4px; }
  .ai-node {
    padding: 5px 8px;
    font-size: 0.7rem;
  }
  .ai-edge { width: 10px; }

  .team-faces {
    --ou-avatar-size: 32px;
    --ou-overlap: -10px;
  }
  .ai-bubble { font-size: 0.9rem; }
}

/* VERY NARROW <= 380px */
@media (max-width: 380px) {
  .ai-usage { grid-template-columns: 1fr; }
  .chip#btn-refresh {
    padding: 3px 6px;
    font-size: 0.65rem;
  }
}

Why this structure works

Import only registers @define helpers. Nothing paints until you call them.
Compose and root helpers write design tokens on :root (or a scope).
Selector-parameterized helpers such as @ai-shell(.ai-shell) and @st-chart-fill(.chart-fill, tokenSeries) attach rules to your own class names.
Plain CSS after that is normal layout, overrides and media queries.

Can also use remote URLs:

@import((*) from "https://cdn.jsdelivr.net/gh/fscss-ttr/ai-ui.fscss@main/ai-ui.fscss")
@import((*) from "https://cdn.jsdelivr.net/gh/fscss-ttr/st-core.fscss@main/st-core@v2.fscss")
@import((*) from "https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/circle-progress.fscss")
@import((*) from "https://cdn.jsdelivr.net/gh/fscss-ttr/FSCSS@main/xf/styles/overlapui.fscss")

3. Compile FSCSS to CSS

# one-shot
fscss dashboard.fscss dashboard.css

# watch (recompile on save), if your fscss build supports it
# fscss dashboard.fscss dashboard.css --watch

The compiler:

Expands every @import, @define and @arr into standard CSS
Emits custom properties (--st-p1 to --st-p12, --ai-*, --progress-* and so on)
Emits clip-path: polygon(...) for the chart fill and line
Leaves your media queries and plain CSS intact

Ship only dashboard.css to production. No runtime.min.js is needed on this path.

4. dashboard.html: the markup

Link the compiled stylesheet. There is no FSCSS runtime script.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
  <title>AI Ops Dashboard · ai-ui + st-core@v2</title>
  <link rel="stylesheet" href="dashboard.css" />
</head>
<body>
  <div class="sidebar-backdrop" id="sidebar-backdrop" aria-hidden="true"></div>

  <div class="ai-shell">
    <!-- Sidebar -->
    <aside class="ai-sidebar" id="sidebar" aria-label="Sidebar">
      <div class="brand">
        <span class="brand-mark">AI</span>
        <span>Ops Console</span>
      </div>

      <nav class="nav">
        <a href="#" class="active">Dashboard</a>
        <a href="#">Agents</a>
        <a href="#">Workflows</a>
        <a href="#">Usage</a>
        <a href="#">Settings</a>
      </nav>

      <div class="side-section">
        <h3>Team online</h3>
        <div class="team-faces avatar-overlap">
          <div class="ou-avatar" data-alph="F" style="--ou-c: #e879f9"></div>
          <div class="ou-avatar" data-alph="S" style="--ou-c: #818cf8"></div>
          <div class="ou-avatar" data-alph="A" style="--ou-c: #4fffb0"></div>
          <div class="ou-avatar" data-alph="+" style="--ou-c: #fbbf24"></div>
        </div>
        <p class="muted">4 agents · 2 human</p>
      </div>

      <div class="side-section">
        <h3>Capacity</h3>
        <div class="cp-row">
          <div class="cp-item">
            <div class="cp cp-72">72%</div>
            <span>GPU</span>
          </div>
          <div class="cp-item">
            <div class="cp cp-48">48%</div>
            <span>Queue</span>
          </div>
          <div class="cp-item">
            <div class="cp cp-91">91%</div>
            <span>Quota</span>
          </div>
        </div>
      </div>

      <div class="side-section" style="margin-top: auto;">
        <h3>Session</h3>
        <p class="muted" id="session-info">Compiled · FSCSS 1.2.6</p>
      </div>
    </aside>

    <!-- Main -->
    <main class="ai-main">
      <header class="topbar">
        <button type="button" class="menu-btn" id="menu-btn" aria-label="Open menu" aria-expanded="false">☰</button>
        <h1>Agent workspace</h1>
        <div class="topbar-actions">
          <span class="chip" id="model-chip">model: gpt-ops · live</span>
          <button type="button" class="chip" id="btn-refresh" style="cursor:pointer;border:none;">↻ refresh</button>
          <button type="button" class="panel-btn" id="panel-btn" aria-label="Open metrics panel" aria-expanded="false">▣</button>
        </div>
      </header>

      <div class="workspace">
        <div class="chat-col">
          <div class="ai-messages" id="messages">
            <div class="ai-message ai-message-assistant">
              <div class="ai-avatar">AI</div>
              <div class="ai-bubble">
                Ops console ready. Token burn and queue depth are within targets.
                Ask for a status summary or kick off a workflow.
              </div>
            </div>
            <div class="ai-message ai-message-user">
              <div class="ai-avatar">U</div>
              <div class="ai-bubble">Show token trend and current agent pipeline.</div>
            </div>
            <div class="ai-message ai-message-assistant">
              <div class="ai-avatar">AI</div>
              <div class="ai-bubble">
                <div class="ai-tools" style="margin-bottom:8px">
                  <span class="ai-tool-chip is-done">✓ metrics.read</span>
                  <span class="ai-tool-chip is-done">✓ workflow.snapshot</span>
                </div>
                Token series is up ~12% vs yesterday. Pipeline is on step <strong>Generate</strong>.
                Chart and workflow updated in the side panel.
                <div class="ai-citations" style="margin-top:8px">
                  <a class="ai-citation" href="#"><span class="ai-cite-num">1</span> metrics.api</a>
                  <a class="ai-citation" href="#"><span class="ai-cite-num">2</span> agent.graph</a>
                </div>
              </div>
            </div>
          </div>

          <form class="ai-prompt" id="prompt-form">
            <textarea class="ai-prompt-box" id="prompt-input" rows="1" placeholder="Ask the ops agent…" aria-label="Prompt"></textarea>
            <button class="ai-prompt-send" type="submit" aria-label="Send">↑</button>
          </form>
        </div>

        <aside class="right-panel" id="right-panel" aria-label="Metrics panel">
          <div class="panel-card">
            <h3>Token burn (12 pts)</h3>
            <div class="token-chart" id="token-chart">
              <div class="chart-fill"></div>
              <div class="chart-line"></div>
            </div>
          </div>

          <div class="panel-card">
            <h3>Agent pipeline</h3>
            <div class="ai-workflow" id="workflow">
              <div class="ai-node">Ingest</div>
              <div class="ai-edge"></div>
              <div class="ai-node">Parse</div>
              <div class="ai-edge"></div>
              <div class="ai-node is-active">Generate</div>
              <div class="ai-edge"></div>
              <div class="ai-node">Review</div>
            </div>
          </div>

          <div class="panel-card">
            <h3>Usage today</h3>
            <div class="ai-usage">
              <div class="ai-stat">
                <span class="ai-stat-label">Tokens</span>
                <span class="ai-stat-value" id="stat-tokens">48.2k</span>
                <span class="ai-stat-delta up">+12%</span>
              </div>
              <div class="ai-stat">
                <span class="ai-stat-label">Requests</span>
                <span class="ai-stat-value" id="stat-req">1,284</span>
                <span class="ai-stat-delta up">+4%</span>
              </div>
              <div class="ai-stat">
                <span class="ai-stat-label">Latency p95</span>
                <span class="ai-stat-value" id="stat-lat">312ms</span>
                <span class="ai-stat-delta down">−8%</span>
              </div>
              <div class="ai-stat">
                <span class="ai-stat-label">Errors</span>
                <span class="ai-stat-value" id="stat-err">0.4%</span>
                <span class="ai-stat-delta down">−0.1</span>
              </div>
            </div>
          </div>

          <div class="panel-card">
            <h3>Active tools</h3>
            <div class="ai-tools" id="tools">
              <span class="ai-tool-chip is-done">✓ Search</span>
              <span class="ai-tool-chip is-running">● Stream</span>
              <span class="ai-tool-chip">Code exec</span>
              <span class="ai-tool-chip">RAG</span>
            </div>
          </div>
        </aside>
      </div>
    </main>
  </div>

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

The class names match the selectors you passed into the FSCSS helpers: @ai-shell(.ai-shell), @circle-progress(.cp) and so on.

5. dashboard.js: behavior

// dashboard.js
// Chat mock, mobile drawers, st-core live chart updates

const $ = (s, r = document) => r.querySelector(s);
const $$ = (s, r = document) => [...r.querySelectorAll(s)];

/* st-core: update linear chart via CSS variables.
   Higher data value gives a lower --st-pN % and a higher visual position.
*/
function updateTokenChart(values) {
  const el = $('#token-chart');
  if (!el) return;
  el.style.cssText = values
    .map((v, i) => `--st-p${i + 1}: ${100 - v}%`)
    .join('; ');
}

let series = [32, 48, 55, 42, 68, 75, 61, 88, 72, 91, 84, 96];

function nudgeSeries() {
  series = series.map((v) => {
    const d = (Math.random() - 0.45) * 12;
    return Math.max(8, Math.min(98, Math.round(v + d)));
  });
  updateTokenChart(series);
  const sum = series.reduce((a, b) => a + b, 0);
  const tokensEl = $('#stat-tokens');
  if (tokensEl) tokensEl.textContent = (sum * 0.42).toFixed(1) + 'k';
}

/* Mobile drawers */
const menuBtn = $('#menu-btn');
const panelBtn = $('#panel-btn');
const backdrop = $('#sidebar-backdrop');

function closeSidebar() {
  document.body.classList.remove('sidebar-open');
  menuBtn?.setAttribute('aria-expanded', 'false');
}
function openSidebar() {
  document.body.classList.add('sidebar-open');
  document.body.classList.remove('panel-open');
  menuBtn?.setAttribute('aria-expanded', 'true');
  panelBtn?.setAttribute('aria-expanded', 'false');
}
function closePanel() {
  document.body.classList.remove('panel-open');
  panelBtn?.setAttribute('aria-expanded', 'false');
}
function openPanel() {
  document.body.classList.add('panel-open');
  document.body.classList.remove('sidebar-open');
  panelBtn?.setAttribute('aria-expanded', 'true');
  menuBtn?.setAttribute('aria-expanded', 'false');
}

menuBtn?.addEventListener('click', () => {
  document.body.classList.contains('sidebar-open') ? closeSidebar() : openSidebar();
});
panelBtn?.addEventListener('click', () => {
  document.body.classList.contains('panel-open') ? closePanel() : openPanel();
});
backdrop?.addEventListener('click', () => {
  closeSidebar();
  closePanel();
});

const mq = window.matchMedia('(min-width: 961px)');
mq.addEventListener?.('change', (e) => {
  if (e.matches) {
    closeSidebar();
    closePanel();
  }
});

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeSidebar();
    closePanel();
  }
});

/* Chat / prompt */
const messages = $('#messages');
const form = $('#prompt-form');
const input = $('#prompt-input');

function appendMessage(role, html, streaming = false) {
  const row = document.createElement('div');
  row.className = `ai-message ai-message-${role}`;
  row.innerHTML = `
    <div class="ai-avatar">${role === 'user' ? 'U' : 'AI'}</div>
    <div class="ai-bubble${streaming ? ' ai-stream' : ''}">${html}</div>
  `;
  messages.appendChild(row);
  messages.scrollTop = messages.scrollHeight;
  return row;
}

function thinking() {
  const t = document.createElement('div');
  t.className = 'ai-message ai-message-assistant';
  t.id = 'thinking-row';
  t.innerHTML = `
    <div class="ai-avatar">AI</div>
    <div class="ai-bubble">
      <div class="ai-thinking">
        <span class="ai-dot"></span>
        <span class="ai-dot"></span>
        <span class="ai-dot"></span>
        Thinking…
      </div>
    </div>
  `;
  messages.appendChild(t);
  messages.scrollTop = messages.scrollHeight;
}

function clearThinking() {
  $('#thinking-row')?.remove();
}

const replies = [
  {
    tools: true,
    text: 'Pipeline advanced. Generate step is now complete; Review is active. Token chart refreshed.',
    advance: true,
  },
  {
    tools: false,
    text: 'Queue depth is healthy. GPU at ~72%. No action required unless you want to scale workers.',
    advance: false,
  },
  {
    tools: true,
    text: 'Pulled latest metrics. p95 latency improved. I can open a usage breakdown if you need it.',
    advance: false,
  },
];
let replyIdx = 0;

form?.addEventListener('submit', (e) => {
  e.preventDefault();
  const text = input.value.trim();
  if (!text) return;
  appendMessage('user', text);
  input.value = '';
  input.style.height = 'auto';

  thinking();
  setTimeout(() => {
    clearThinking();
    const r = replies[replyIdx % replies.length];
    replyIdx++;
    let body = '';
    if (r.tools) {
      body += `<div class="ai-tools" style="margin-bottom:8px">
        <span class="ai-tool-chip is-done">✓ metrics.read</span>
        <span class="ai-tool-chip is-running">● workflow.tick</span>
      </div>`;
    }
    body += r.text;
    const row = appendMessage('assistant', body, true);
    setTimeout(() => row.querySelector('.ai-bubble')?.classList.remove('ai-stream'), 1800);

    if (r.advance) {
      const nodes = $$('#workflow .ai-node');
      const active = nodes.findIndex((n) => n.classList.contains('is-active'));
      if (active >= 0 && active < nodes.length - 1) {
        nodes[active].classList.remove('is-active');
        nodes[active + 1].classList.add('is-active');
      }
    }
    nudgeSeries();
  }, 900 + Math.random() * 600);
});

input?.addEventListener('input', () => {
  input.style.height = 'auto';
  input.style.height = Math.min(input.scrollHeight, 120) + 'px';
});

$('#btn-refresh')?.addEventListener('click', () => {
  nudgeSeries();
  const btn = $('#btn-refresh');
  btn.textContent = '↻ updated';
  setTimeout(() => {
    btn.textContent = '↻ refresh';
  }, 1200);
});

updateTokenChart(series);
setInterval(nudgeSeries, 14000);

The chart control layer

st-core paints with CSS only. For live data, you set custom properties on the chart host:

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

The polygon length is fixed at compile time by the length of @arr tokenSeries[...], which is 12 points here. Do not change the number of points at runtime without a matching compiled sheet. Only change the values.

6. Run it

# compile
fscss dashboard.fscss dashboard.css

# serve (any static server)
npx serve .
# or: python -m http.server 8080

Open http://localhost:3000/dashboard.html (or whichever port your server uses).

Quick checklist:

[ ] Sidebar, brand and nav render
[ ] Circle progress rings show
[ ] Overlapping avatars show
[ ] Token chart is visible
[ ] Prompt sends, then thinking, then a reply
[ ] The refresh button updates chart numbers
[ ] At 960px and below, ☰ opens the sidebar and ▣ opens the bottom sheet

7. How the modules fit together

┌─────────────────────────────────────────────────────────┐
│  ai-ui.fscss                                            │
│  Shell · Messages · Prompt · Stream · Thinking · Usage  │
│  Workflow · Tools · Citations                           │
├──────────────────────┬──────────────────────────────────┤
│  st-core@v2          │  circle-progress                 │
│  Area / line chart   │  GPU · Queue · Quota rings       │
│  --st-pN variables   │  --progress-* variables          │
├──────────────────────┴──────────────────────────────────┤
│  overlapui                                              │
│  .team-faces avatar stack                               │
├─────────────────────────────────────────────────────────┤
│  dashboard.js                                           │
│  Drawers · chat mock · updateTokenChart(series)         │
└─────────────────────────────────────────────────────────┘

ai-ui and st-core intentionally avoid selector collisions, so you can compose them freely.

8. Optional: npm scripts and CI

{
  "name": "ai-ops-dashboard",
  "private": true,
  "scripts": {
    "build:css": "fscss dashboard.fscss dashboard.css",
    "build": "npm run build:css",
    "start": "npx serve ."
  },
  "devDependencies": {
    "fscss": "1.2.6"
  }
}

npm install
npm run build
npm start

Pin fscss@1.2.6 so local and CI builds match.

9. Prototype vs production

Mode	When	How
Runtime (CDN)	Quick demos, the FSCSS IDE, single HTML file	`<script src="…/runtime.min.js">` plus `@import` inside `<style>`
CLI compile	Real apps, static hosting, zero client preprocessor	`fscss in.fscss out.css` plus `<link rel="stylesheet" href="out.css">`

This tutorial uses the CLI path. Keep the single file runtime version for playgrounds only.

10. Where to go next

Swap @ai-compose-dashboard() for @ai-compose-copilot() or @ai-compose-research()
Add a second @arr series and another fill and line for multi-line charts
Replace the mock replies with a real agent or streaming API
Drive circle progress from JS by setting --progress-* or swapping the .cp-72 classes
Add a spider chart from st-core (@st-spider-points, @st-spider-fill and friends) in a new panel card

References

ai-ui.fscss: AI chrome (shell, messages, prompt, usage, workflow)
st-core.fscss: pure CSS area, line and spider charts
circle-progress: conic-gradient rings
overlapui: stacked avatars and cards
FSCSS modules: the import system
fscss on npm: CLI and runtime

All those modules are MIT licensed.

st-core.fscss — A library for creating pure CSS charts without JavaScript, compatible with any tech stack

FSCSS — Sun, 25 Oct 2026 23:02:20 +0000

st-core.fscss is a pure-CSS statistical dashboard system built on FSCSS.

No SVG.

No canvas.

No Chart.js / D3 / Recharts.

Just clip-path: polygon(), CSS custom properties, and FSCSS arrays.

What’s new in v2

Dynamic datasets — any length (not locked to 8 points)
Automatic even X-spacing from array length
Native 0–100 value normalization
Spider / radar charts (polar coordinates, multi-series, spokes, axis labels)
Dual-pass line strokes + fill
Stat cards, grids, dots, category bars, phone frames
Design tokens for easy theming

30-second example (HTML + runtime)

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.6/runtime.min.js" async></script>
<style>
  @import((*) from st-core@v2)
  @st-root()

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

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

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

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

Live data? Just update the --st-pN (or polar --st-sxN / --st-syN) variables. CSS does the rest.

Production workflow

Write the FSCSS
Compile once: npx fscss chart.fscss chart.css
Import the CSS
Bind data via CSS variables (Svelte, React, Vue, plain JS — all work the same)

Try it

GitHub: github.com/fscss-ttr/st-core.fscss (MIT)
Full docs + spider chart reference + Svelte/React/HTML integrations in the repo

If you’re building dashboards, admin panels, or any UI where every kilobyte of JS matters, this is for you.

Feedback, PRs, and weird chart ideas welcome.

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.

DEV Community: FSCSS tutorial

Plain CSS builds for FSCSS modules — when yes, when no, and how

What a “plain CSS version” actually is

When a plain CSS build fits well

When a plain CSS build is weak or misleading

Should all libraries ship one?

How to add a plain CSS build (any module)

Tradeoffs to state clearly

Practical answer

FSCSS @define: mixins that compile to boring, good CSS

Step 1 — Define a micro

Step 2 — Import (and optionally rename)

Step 3 — Call it

“Why all that protocol for such simple CSS?”

1. Change it once

2. One argument, several properties

3. Design-system guardrails

Mental model

When to skip it

Closing

ai-ui.fscss: shell, messages, prompt, and stream — without a UI kit runtime

What it covers

Install mindset

Tokens and themes

Minimal copilot shell

Stream, thinking, citations, artifacts

Compose with others

What this is not

Mental model

st-core.fscss Charts: Dynamic Updates in Modern Frameworks

How dynamic updates work

Linear charts

Spider / radar charts

What you update at runtime

Smooth transitions

Helper: write variables from JS

Linear (0–100 scores → CSS %)

Spider / radar

Dynamic updates in modern frameworks

Svelte

React

Vue 3

Plain JS / live metrics

Multi-series

Checklist

Why this stays lightweight

Further reading

Compile FSCSS from Python — CLI, API, Flask & Django

What you get

Install

Minimal example

API snapshot

Flask & Django

When to use this vs other FSCSS tools

Caveats (short)

Try it

Yes, pure CSS can do radar charts — and st-core.fscss still stays lightweight

The claim this answers

Is it still lightweight?

Minimal radar (one series)

How polar stays pure CSS

Multi-series without coordinate clashes

Live updates (optional JS)

Why “lightweight” holds after radar

When pure CSS radar is the right tool

Try it

Build an AI Ops Dashboard with FSCSS (ai-ui, st-core, circle-progress, overlapui)

What we are building

Prerequisites

1. Project setup

2. dashboard.fscss: the styles source

Why this structure works

3. Compile FSCSS to CSS

4. dashboard.html: the markup

5. dashboard.js: behavior

The chart control layer

6. Run it

7. How the modules fit together

8. Optional: npm scripts and CI

9. Prototype vs production

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`