DEV Community: FSCSS tutorial

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

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

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

Template: templates/live-shift

JS: dashboard.js

Why this is low-overhead

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

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

How the template is split

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

Initial geometry and series length are declared in FSCSS:

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

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

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

The update path

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

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

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

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

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

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

Allocation bars in the same demo use another token:

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

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

Wiring a real stream

Replace the random walk with your feed:

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

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

When to use this

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

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

Try it

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

Source

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

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

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

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

Repo: github.com/Figsh/fscss-props

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

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

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

What it does

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

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

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

Why this matters when you use JS

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

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

fscss-props sits in between:

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

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

console.log(el.fscssPropText);

Example: vanilla store → styles

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

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

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

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

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

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

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

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

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

When to use which

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

FSCSS Shorthands: the full reference (1.2.5+)

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

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

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

npm install fscss@1.2.5

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

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

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

Processing order

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

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

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

Quick example

FSCSS:

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

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

Compiles to:

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

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

Axis & spacing

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

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

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

Size

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

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

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

Property aliases

Single-property renames, not axis pairs:

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

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

Layout helpers

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

Place, origin, object

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

Side-scoped blocks

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

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

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

Border & radius

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

Background

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

`ratio-fit()`

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

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

Seen in a real file

Template

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

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

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

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

Notes

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

Tooling

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

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

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

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

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

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

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

The pain these replace

Native CSS is powerful but often verbose for pairs:

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

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

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

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

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

FSCSS:

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

CSS:

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

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

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

Horizontal and vertical pairs, without touching the other axis:

FSCSS:

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

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

CSS:

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

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

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

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

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

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

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

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

In a real template

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

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

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

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

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

What else ships in the same release

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

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

Takeaway

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

Links

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

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

The Figma design in pure CSS

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

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

Source: templates/budget-app

What’s in it

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

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

Try it

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

Same as the admin-dashboard template

FSCSS

Build st-core@v2 from scratch

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

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

Requires: FSCSS ≥ 1.2.3

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

What you’re building

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

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

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

Step 0 — Mental model

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

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

Step 1 — Token root

Everything themable hangs off custom properties.

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

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

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

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

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

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

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

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

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

Still useful for demos with a fixed series length:

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

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

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

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

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

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

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

Call site:

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

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

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

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

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

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

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

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

X formula

Even spacing for any N ≥ 2.

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

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

HTML:

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

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

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

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

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

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

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

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

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

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

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

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

One series of dots — loop selectors:

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

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

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

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

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

These are ordinary layout mixins on the same tokens:

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

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

Step 8 — Minimal page that uses it

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

@st-root()

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

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

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

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

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

Live values from JS:

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

Design rules baked into v2

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

Feature map (source order)

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

From scratch checklist

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

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

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

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

FSCSS inline() overview

FSCSS tutorial — Sat, 26 Sep 2026 23:22:28 +0000

inline() is a low-level utility: take a block (often generated), strip outer curly braces / selector wrapper noise, and emit declaration or fragment lines you can drop inside another construct.

Docs line: Remove curly brackets, selectors and format lines.

Not a core architecture piece like @arr or @define — but important for advanced mixins (charts, clip-path, nested loops).

What it does

Input	Rough output
`inline(":root{ --a: 1; --b: 2; }")`	`--a: 1;` `--b: 2;`
`inline(".sel{ color: red; }")`	`color: red;`

You get inner CSS, not a full rule set.

Why it exists

FSCSS array loops expand into rule-shaped chunks:

@arr.idx[] {
  /* … */
}

That needs { } for the loop. If you are already inside:

clip-path: polygon( … )
a single .chart { … } block
a comma-separated value list

those extra braces break the outer syntax. inline() unwraps the generated block so only the useful tokens (e.g. 10% var(--st-p1),) remain.

st-core-style use

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

Flow:

Loop runs in a normal block form (braces allowed).
inline() strips the brace/selector shell.
Result is a list of polygon points inside polygon().

Same idea for custom properties inside one rule:

.something {
  inline("{}
    @arr.some[] {
      --some-@arr.some[]: …;
    }
  ")
  color: var(--some-1);
}

Mental model

[ generated block with { } for the compiler ]
              │
              ▼ inline()
[ flat fragments: decls, points, commas ]
              │
              ▼
[ parent: polygon(), :root merge, one selector, … ]

Compared to other tools

Feature	Role
`@arr`	Lists + auto-index loops
`@define`	Parameterized reusable blocks
`@fun`	Named token maps
`str()`	Store multi-line strings
`inline()`	Peel braces/selectors so fragments compose

When to use it

Building clip-path / path() / multi-value lists from @arr
Emitting many --vars inside one selector without nested rule noise
Large mixins that assemble CSS text from loops

When not to: normal rules and mixins — plain @define / selectors are enough.

In short

inline() = “paste the inside of this block, not the wrapper.”

Uncommon in day-to-day stylesheets; essential for heavy generation (e.g. st-core chart polygons). Advanced, but the right tool when braces fight the parent syntax.

FSCSS auto-loop: percentage keyframes from an array

FSCSS tutorial — Fri, 25 Sep 2026 23:25:39 +0000

This snippet builds a stepped “processing 0% → 99% → done” animation by looping an array into @keyframes percentages — not a JS timer.

Setup

npm install -g fscss@latest
VS Code: FSCSS language support (FSCSS Support)
File: my-first-fscss.fscss → compile or runtime-load

Source (your idea, tightened)

h2::after {
  content: "...";
  animation: count 10s steps(100) forwards;
}

/* 1, 2, … 99  (auto list for keyframe stops) */
@arr numlist[count(99)]

@define counter(start:ing..., process:ing..., end:ed){`
  0% {
    content: "@use(start)0%";
  }
  @arr.numlist[]% {
    content: "@use(process)@arr.numlist[]%";
  }
  100% {
    content: "@use(end)";
  }
`}

@keyframes count {
  @counter(Processing..., Processing..., Processed)
}

What “auto-loop” is here

Piece	Role
`count(99)`	Builds a numeric list used as 1–99 (engine: `count(n)` / `count(n, 1)` → index list).
`@arr numlist[…]`	Stores that list.
`@arr.numlist[]`	Auto-index: expand once per item.
`@arr.numlist[]%`	Each item becomes a keyframe selector: `1%`, `2%`, … `99%`.
`@define counter(…)`	Template for the keyframe body; `@use(start
{% raw %}`@counter(…)` inside `@keyframes`	Injects the whole ladder into `count`.

So the loop is compile-time expansion, not for in the browser.

Breakdown

1. Target

h2::after {
  content: "...";
  animation: count 10s steps(100) forwards;
}

Animates content on the pseudo-element.
steps(100) ≈ one visual step per percent over 10s.
forwards keeps the final Processed text.

2. Index array

@arr numlist[count(99)]

Same family as modules indexes: a list long enough to drive stops. Here each value is also the percentage number in the output.

3. Reusable keyframe block

@define counter(start:…, process:…, end:…){` … `}

0% — intro label + 0%.
@arr.numlist[]% — for each n in numlist, emit:
- selector: n%
- content: "<process>n%"
100% — final label only (e.g. Processed).

4. Wire into a named animation

@keyframes count {
  @counter(Processing..., Processing..., Processed)
}

Expands to a long @keyframes count { … } with ~100 content stops.

Shape of compiled CSS (illustrative)

Exact quoting depends on the compiler; structure is:

h2::after {
  content: "...";
  animation: count 10s steps(100) forwards;
}

@keyframes count {
  0% {
    content: "Processing...0%";
  }
  1% {
    content: "Processing...1%";
  }
  2% {
    content: "Processing...2%";
  }
  /* … */
  99% {
    content: "Processing...99%";
  }
  100% {
    content: "Processed";
  }
}

That is the auto-loop: one array walk → many keyframe rules.

Example HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>FSCSS auto-loop counter</title>
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.2.4/runtime.min.js" async></script>
  <link type="text/fscss" href="my-first-fscss.fscss">
  <!-- or: <link rel="stylesheet" href="my-first-fscss.css"> after CLI -->
  <style>
    body {
      font-family: system-ui, sans-serif;
      padding: 2rem;
      background: #0f172a;
      color: #e2e8f0;
    }
    h2 {
      font-size: 1.25rem;
      font-weight: 600;
    }
    h2::after {
      margin-left: 0.35em;
      color: #38bdf8;
    }
  </style>
</head>
<body>
  <h2>Status</h2>
  <!-- ::after shows Processing...0% → … → Processed -->
</body>
</html>

Compile

fscss my-first-fscss.fscss my-first-fscss.css

Mental model

count(99)  →  list of stops
@arr.x[]%  →  “for each item, emit item% { … }”
@define    →  reuse labels (start / process / end)
@keyframes →  holds the expanded ladder

Auto-loop = array auto-index used as keyframe percentages (or selectors elsewhere), so one definition drives N rules.

Variants

Progress label only: change @use(process) strings.
Fewer steps: count(20) + shorter animation / steps(20).
Same pattern for staggered selectors: .item-@arr.idx[] { animation-delay: … } (as in arrays docs).

Loop the array at compile time; the browser only plays the keyframes.

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

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

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

You will use

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

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

Architecture

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

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

1. Project files

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

mkdir admin-dashboard && cd admin-dashboard

2. FSCSS — modules, tokens, chart

Create dashboard.fscss.

Imports and roots

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

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

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

Theme overrides

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

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

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

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

Minimal reset + shell

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

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

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

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

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

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

Revenue chart (st-core@v2)

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

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

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

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

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

What this does

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

Markup for the chart:

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

Traffic pie (circle-progress)

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

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

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

Icons (icon-mask)

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

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

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

Responsive sidebar

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

JS toggles .open on the sidebar and backdrop.

3. HTML — structure only

Skeleton of index.html:

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

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

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

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

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

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

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

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

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

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

4. JavaScript — behavior + data → variables

dashboard.js does three jobs.

Mobile drawer

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

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

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

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

Chart ranges → `--st-pN`

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

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

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

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

updateChart('7d');

Why 100 - v?

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

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

Profile dropdown

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

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

5. Compile for production

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

In index.html:

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

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

6. Mental model

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

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

7. Next steps

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

Template & preview


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

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

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

Pure CSS analytics UI: st-core admin dashboard template

FSCSS tutorial — Thu, 24 Sep 2026 18:43:21 +0000

Build an analytics shell without a chart library — st-core@v2 for the revenue line, circle-progress for traffic, icon-mask for nav icons. Markup stays plain HTML; styles are CSS (compiled FSCSS); a small script only updates CSS variables.

Live preview: hub.devtem.org/st-core.fscss/templates/admin-dashboard/

Source: github.com/fscss-ttr/st-core.fscss → templates/admin-dashboard/

What’s in the box

Piece	Job
st-core@v2	Tokens, area/line chart via `clip-path` + `--st-pN`
circle-progress	Multi-slice traffic pie
icon-mask	Sidebar / toolbar icons
dashboard.js	Mobile drawer, profile menu, range tabs → variables

Layout: sticky sidebar, stat cards, revenue chart (7d / 30d / 90d), goals, messages, activity, sales table — responsive under 1100px (off-canvas nav + swipe).

File split

templates/admin-dashboard/
├── index.html
├── dashboard.fscss   # source
├── dashboard.css     # CLI output (CI can compile this)
├── dashboard.js
└── README.md

Production path: compile FSCSS once, ship CSS + HTML + JS. No chart runtime in the browser.

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

Then link dashboard.css

Chart idea in one line

FSCSS builds polygon geometry from an [Array](https://fscss.devtem.org/arrays). JS only writes:

--st-p1: 58%;  /* 100 - humanValue */

Same pattern as the Svelte integration: framework or vanilla owns data; CSS paints.

CI

.github/workflows/compile-templates.yml installs FSCSS, compiles dashboard.fscss, and can commit dashboard.css on main so the hub preview stays on static CSS.

Try it

Open the preview.
Clone st-core.fscss, open templates/admin-dashboard/.
Swap data in dashboard.js or restyle tokens in dashboard.fscss.

React/Next variants can reuse the same compile step and only map props > --st-pN.

patterns.fscss: Write CSS in Plain English

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

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

FSCSS version 1.2.4+

The idea

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

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

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

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

Feature overview

1. Role-based descriptions

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

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

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

2. `@match` — parameters in the phrase

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

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

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

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

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

3. Cascade fallbacks (no empty custom properties)

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

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

This library uses the cascade instead:

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

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

4. Shared threshold

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

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

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

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

5. Design tokens in one place

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

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

6. Namespaced motion

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

What’s in the library

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

Usage

Install

npm install fscss@1.2.4

Local import

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

@pattern-root()
@patterns(0.4)

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

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

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

Compile (CLI or CI)

fscss demo.fscss demo.css

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

Browser runtime (playgrounds)

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

Design choices worth knowing

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

Contribute

PRs welcome. Prefer:

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

See CONTRIBUTING.md.

Links

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

FSCSS 1.2.4: pattern() that listens when you want it to

FSCSS tutorial — Tue, 22 Sep 2026 23:47:55 +0000

Ship intent, not only exact API calls.

FSCSS 1.2.4 hardens semantic pattern(): natural-language lines in a stylesheet can expand into real CSS (or FSCSS) when they score high enough against a registered description — optionally pulling values out of the phrase with @match.

Docs: fscss.devtem.org/pattern
Install: npm install fscss@1.2.4
Runtime: https://cdn.jsdelivr.net/npm/fscss@1.2.4/runtime.min.js
Editor: VS Code · Figsh.fscss

The idea

_patterns.fscss     →  register descriptions + templates
main.fscss          →  @import patterns, write human phrases
compiler            →  score → inject → @match → CSS

You are not replacing selectors. You add a listener layer: some lines are prose; if they match a pattern, they become declarations or whole blocks at compile time.

That works cleanest when definitions live in a deferred file or module, and the app stylesheet only imports and speaks.

Install

npm install fscss@1.2.4

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

CLI for production:

fscss main.fscss main.css

Anatomy of a pattern

pattern(threshold: "plain language description", `
  /* CSS or FSCSS template */
`)

Piece	Role
threshold	Minimum similarity `0–1`. Omit → default 1 (strict).
description	Words used for scoring against call lines.
template	What gets injected; backticks allow quotes inside CSS.

Calling: a line that isn’t “hard” CSS structure is treated as a phrase — often inside a rule (property pattern) or alone (block pattern).

pattern(0.5: "Hello World card", `
  border-radius: 12px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
`)

.card {
  hello world card
}

Defer definitions: module → main

_patterns.fscss (library — no page-specific selectors required):

pattern(0.75: "glass panel elevated", `
  background: color-mix(in srgb, #fff 12%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
`)

pattern(0.6: "rounded primary button with color: white, bg: red", `
  background: @match(background:?\s([#\w\d-_]+)) @match(bg:?\s([#\w\d-_]+));
  color: @match(color:?\s([#\w\d-_]+)) @match(text:?\s([#\w\d-_]+));
  border-radius: 25px;
  padding: 10px 20px;
  font-weight: 700;
  border: 2px solid;
`)

main.fscss (product code):

@import((*) from "./_patterns.fscss")
/* or registry / URL form your setup uses */

.hero-card {
  glass panel elevated
}

.cta {
  rounded primary button with color: #0BCEAE, background: midnightblue
}

Why this split helps:

Patterns are versioned and shared like design modules.
Main files stay readable: intent lines, not giant mixins.
Thresholds and @match regexes are tuned once in the library.
Teams can contribute patterns without touching every page.

Same idea as @define libraries — different trigger (phrase vs exact name).

Sensitivity: when it “listens”

Similarity is word-oriented and case-insensitive. A phrase must clear the pattern’s threshold and beat other candidates.

Threshold	Feel	Good for
`1` (default)	Almost exact	Short, generic labels
`0.8–0.9`	Strict listener	Named components
`0.5–0.7`	Forgiving	Longer descriptions
`≤ 0.35`	Very open	Risky; keep wording unique

Sensitive pattern (harder to trigger by accident):

pattern(0.9: "primary cta button solid indigo", `
  background: #4f46e5;
  color: #fff;
  border-radius: 8px;
  padding: 10px 20px;
`)

Open pattern (more paraphrases work):

pattern(0.5: "Beautiful card", `
  background: #0066ff;
  border-radius: 12px;
`)

If two descriptions share the same nouns at low thresholds, the wrong template can win. Prefer distinct verbs: create … array vs render … chart.

`@match`: parameters without a formal signature

@match(regex) runs on the caller’s phrase, not the description. First capturing group wins; else the full match. Nested parentheses in the regex are handled with balanced parsing.

pattern(0.6: "rounded primary button with color: white, bg: red", `
  background: @match(background:?\s([#\w\d-_]+)) @match(bg:?\s([#\w\d-_]+));
  color: @match(color:?\s([#\w\d-_]+)) @match(text:?\s([#\w\d-_]+));
  border-radius: 25px;
  padding: 10px 20px;
`)

.primary {
  rounded primary button with color: #0BCEAE, background: midnightblue
}

Authors get “arguments” by writing them in prose; the library harvests them. Offer aliases (bg / background, color / text) so one pattern tolerates different wording.

Safety (1.2.4): hostile nested quantifiers and invalid sources are rejected before RegExp runs. Keep captures simple.

Beyond plain CSS: FSCSS in the template

Patterns can emit @arr, module hooks, etc. Example sketch with st-core@v2:

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

pattern(0.35: "create sales array value: 0,", `
@arr @match(create\s([\w-_]+))[
@match(value:?\s([\d\, \s]+))@match(data:?\s([\d\, \s]+))
]
`)

pattern(0.50: "render sales chart with st-core ", `
@st-chart-fill(.fill, @match(render\s([\w-_]+))@match(st-core\s([\w-_]+)))
@st-chart-line(.line, @match(render\s([\w-_]+))@match(st-core\s([\w-_]+)))
.chart {
  @st-chart-points(@match(render\s([\w-_]+))@match(st-core\s([\w-_]+)))
}
`)

create sample array value: 77, 7, 66, 78, 16
render sample chart with st-core

.chart {
  width: 300px;
  height: 200px;
  position: relative;
}

Flow: human lines → array + chart binds → normal st-core geometry. Tune thresholds so “create” and “render” don’t steal each other’s hits.

Property vs block calls

Property: phrase inside .btn { … } → declarations join that rule.
Block: phrase alone → @keyframes, top-level FSCSS, large structures.

pattern(0.7: "animated keyframe for spin", `
@keyframes spin {
  to { transform: rotate(360deg); }
}
`)

an Animated keyframes for spin

`pattern()` vs `@define`

	`@define`	`pattern()`
Trigger	Exact `@name(args)`	Fuzzy phrase
Inputs	`@use(param)`	`@match` on free text
Best for	Stable module APIs	Authoring UX, demos, shared intent libraries

Use both: defines for precise systems (st-core, design tokens); patterns for how people describe common UI.

Workflow that scales

Collect patterns in _patterns.fscss or a published module.
@import into app sheets.
Write natural lines in components/pages.
Compile with CLI for production; use runtime for playgrounds.
Highlight and edit with FSCSS Support in VS Code.

Quick checklist

Distinct descriptions; high thresholds for short phrases.
Backtick templates; small, safe @match groups.
Defer pattern libraries; keep main stylesheets intent-heavy.
Prefer 1.2.4+ for matching/@match behavior described here.

Listen on purpose: register what you care about, import it, and speak in the stylesheet. FSCSS turns the hits into CSS — at compile time, under your thresholds.

Source: fscss.devtem.org/pattern

DEV Community: FSCSS tutorial

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

Why this is low-overhead

How the template is split

The update path

Wiring a real stream

When to use this

Try it

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

What it does

Why this matters when you use JS

Example: vanilla store → styles

When to use which

Links

FSCSS Shorthands: the full reference (1.2.5+)

Processing order

Quick example

Axis & spacing

Size

Property aliases

Layout helpers

Place, origin, object

Side-scoped blocks

Border & radius

Background

ratio-fit()

Seen in a real file

Notes

Tooling

Links

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

The pain these replace

size / max-size — width and height together

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

ratio-fit() — ratio inside a container

In a real template

What else ships in the same release

Takeaway

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

What’s in it

Try it

Build st-core@v2 from scratch

What you’re building

Step 0 — Mental model

Step 1 — Token root

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

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

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

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

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

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

Step 8 — Minimal page that uses it

Design rules baked into v2

Feature map (source order)

From scratch checklist

FSCSS inline() overview

What it does

Why it exists

st-core-style use

Mental model

Compared to other tools

When to use it

In short

FSCSS auto-loop: percentage keyframes from an array

Setup

Source (your idea, tightened)

What “auto-loop” is here

Breakdown

1. Target

2. Index array

3. Reusable keyframe block

4. Wire into a named animation

Shape of compiled CSS (illustrative)

Example HTML

Compile

Mental model

Variants

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

Architecture

1. Project files

`ratio-fit()`

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

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

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

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

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

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

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

Chart ranges → `--st-pN`

2. `@match` — parameters in the phrase

`@match`: parameters without a formal signature

`pattern()` vs `@define`