DEV Community: FSCSS tutorial

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.

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.

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.

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

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

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

Repo: fscss-ttr/st-core.fscss

Enable script: xfcmds/enable.xfcmd

Package config: package.json

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

How it’s wired

In package.json:

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

Plus the usual module metadata:

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

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

What enable.xfcmd does

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

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

Try it in the IDE

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

Expect:

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

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

Selective import still works the usual way:

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

Why this matters

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

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

How it’s wired

In package.json:

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

Plus the usual module metadata:

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

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

What enable.xfcmd does

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

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

Try it in the IDE

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

Expect:

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

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

Selective import still works the usual way:

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

Why this matters

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

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

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

How to Build Dual-Pass Strokes with FSCSS Array Methods

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

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

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

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

The problem

You have points as CSS variables:

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

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

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

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

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

The full pattern

.line {
  position: absolute;
  inset: 0;

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

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

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

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

Assume you already have:

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

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

Piece by piece

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

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

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

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

2. Reversed index — `.reverse`

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

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

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

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

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

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

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

Rough compile for 5 points:

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

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

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

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

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

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

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

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

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

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

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

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

7. Second pass — offset Y by stroke width

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

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

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

8. Closing stop

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

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

9. Fill the band

background: var(--st-accent);

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

Mental model

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

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

Close → fill

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

Minimal standalone sketch

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

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

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

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

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

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

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

Polar variant (same idea)

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

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

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

Common pitfalls

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

Why FSCSS helps

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

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

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

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

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

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

Try it: fscss.devtem.org/ide

Guide: fscss.devtem.org/ide-guide

What you get

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

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

Quick start

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

On Mac, use Cmd instead of Ctrl.

$accent: #9d7eff;

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

Layout (mental map)

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

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

Components without leaving the tab

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

@import((*) from overlapui)

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

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

Shortcuts worth muscle memory

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

Full table: ide-guide.

Terminal

Focus with Ctrl+`. Handy commands:

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

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

Export / share

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

Good to know

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

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

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

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

No SVG. No canvas. No JS charting library.

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

The module Source:

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

Why this feels modern

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

Spider charts in st-core lean on:

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

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

Why st-core stays lightweight

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

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

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

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

The one rule (same as linear charts)

Points write. Renderers read.

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

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

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

What you can build

1. Minimal radar

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

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

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

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

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

<div class="spider">
  <div class="spider-grid"></div>
  <div class="spider-spokes"></div>
  <div class="spider-fill"></div>
  <div class="spider-line"></div>
  <div class="spider-dot-1"></div>
  <!-- … through .spider-dot-6 -->
</div>

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

2. Team comparison cards

Two hosts, two accents, shared label layout:

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

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

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

3. Multi-series overlay

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

4. Live updates without a library

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

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

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

Under the hood (short)

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

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

Install

NPM CLI:

npm install -g fscss
charts.fscss charts.css

Testing via CDN:

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

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

Prefer FSCSS CLI for production CSS with zero runtime preprocessor.

Requires FSCSS v1.2.3+. MIT licensed.

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

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

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

Pure CSS. Still lightweight. Now with radar.

FSCSS loops

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

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

source: fscss.devtem.org/loop

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

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

Setup

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

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

Rules of thumb

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

1. Property loop — `%n()`

Same value on many properties:

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

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

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

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

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

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

empty{ /* preserve */ }

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

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

3. Nested selectors — `rpt()`

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

empty{ /* preserve */ }

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

→ div, div div, div div div, …

Guide: nested-loop.

4. Value fragments — `inline()`

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

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

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

Pair with num() for spacing math

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

Loop machinery can look like selectors. A leading:

empty{ /* preserve */ }

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

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

npm install fscss

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

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

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

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

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

Why this matters

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

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

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

What the builder gives you

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

Outputs

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

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

The chart model (what you’re designing)

Minimal mental model:

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

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

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

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

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

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

Runtime / CDN:

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

Live updates (optional JS)

Same variables the builder sets on the preview:

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

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

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

Who it’s for

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

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

Try

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

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

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

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

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

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

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

Requires: FSCSS 1.2.3+ (recommended 1.2.5+)

What’s in the box

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

Install once:

@import((*) from overlapui)

@overlapui()

Or only what you need:

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

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

CDN prototyping:

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

Tokens, not magic classes

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

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

Same module, different product chrome.

Markup (short)

Avatars

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

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

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

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

Why FSCSS here

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

Real use cases

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

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

Accessibility

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

Sources

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

MIT. stack UI that opens with CSS.

DEV Community: FSCSS tutorial

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

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

10. Where to go next

References

devtemDesign 0.1.0: one config object paints a whole landing page

Try it in 30 seconds

What's in 0.1.0

A fuller example

Templates

Runtime control

Theme tokens

Config reference

Core and navigation

Hero

Sections

Footer

Upgrading from 0.0.2

Good to know

Links

Create a simple form and style it with FSCSS

1. Markup first

2. Load FSCSS

3. Style with layout helpers and tokens

4. Optional: reusable button with @define

5. Optional: form.fscss module

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

7. Try it in the IDE

Checklist

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

How it’s wired

What enable.xfcmd does

Try it in the IDE

Why this matters

Related

How it’s wired

What enable.xfcmd does

Try it in the IDE

Why this matters

Related

How to Build Dual-Pass Strokes with FSCSS Array Methods

4. Optional: reusable button with `@define`

5. Optional: `form.fscss` module

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

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

2. Reversed index — `.reverse`

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

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

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

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

1. Property loop — `%n()`

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

3. Nested selectors — `rpt()`

4. Value fragments — `inline()`

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