Coder Legion - Recent posts tagged fscss

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

Wed, 28 Oct 2026 15:40:56 +0000

A step by step tutorial for building a responsive AI dashboard with compiled FSCSS, pure CSS charts, progress rings, stacked avatars, and plain JavaScript. No framework, no build tool beyond the FSCSS CLI.

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%40v2.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.

See complete tutorial here: https://dev.to/fscss/build-an-ai-ops-dashboard-with-fscss-ai-ui-st-core-circle-progress-overlapui-59m5

devtemDesign: one config object paints a whole landing page

Sun, 25 Oct 2026 10:50:19 +0000

A zero-dependency page engine in plain HTML, CSS and JS. 7 templates, live theming, pricing, FAQ, stats and a mobile drawer from a single config. Full reference included

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.

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: {
  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.

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

Wed, 21 Oct 2026 09:20:38 +0000

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

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

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

Why these exist

A lot of UI CSS is the same four ideas:

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

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

Spacing axes

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

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

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

`stack` and `hstack`

Vertical and horizontal flex stacks with gap:

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

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

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

`center`

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

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

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

`size` and friends

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

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

.thumb {
  size: 100% 180px;
}

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

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

`rounded` and surface chrome

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

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

Small composed example

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

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

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

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

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

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

Runtime note: `fscss-props`

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

When to use what

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

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

Try it

npm install fscss@latest

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

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

Shipped: the FSCSS Browser IDE

Tue, 20 Oct 2026 11:57:23 +0000

Multi-file FSCSS in the browser — compile, preview, enable packages, export plain CSS.

No install required. Open fscss.devtem.org/ide and work.

What it is

The FSCSS IDE is a single-page workspace for Figured Shorthand CSS: write .fscss, compile to standard CSS, preview HTML, and pull community modules without leaving the tab.

It targets the same language as the CLI and CDN runtime (fscss@1.2.6+). Prototypes stay in the browser; production still ships compiled CSS.

Layout (quick map)

Area	Role
Top bar	Run, Preview, Auto-compile, Export, Import, theme, settings
Left	Files, Components, Snippets, Tools
Center	Monaco editor + file tabs
Right	Compiled CSS / live Preview
Bottom	Terminal + Problems
Status	Compiler version, errors, cursor

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

Quick start

Open or create main.fscss.
Ctrl+Enter — compile (CSS on the right).
Ctrl+Shift+Enter — compile and open preview.
Export — CSS, minified CSS, HTML, ZIP, or JSON backup.

Autosave uses localStorage (keys under fside:). Export a backup if the browser blocks storage.

Multi-file and `@import`

The workspace is a virtual file system. Local imports resolve against the importing file:

@import((widget-root, widget-card) from "./widgets.fscss")
@import((*) from st-core@v2)
@import((mirror, stagger) from fscss:micros)

Selective names, aliases (as), wildcards, and registry-style names work the same way as in the CLI. Remote URLs need quotes; listed library names usually do not.

Packages: `libck` / `libon` / xfcmd

Open the terminal (Ctrl+`):

libck st-core
yes

Or a full repo:

libck https://github.com/fscss-ttr/overlapui.fscss
yes

The IDE loads package.json, checks fscss_version, downloads file.modules, verifies @define helpers, then runs the pack’s enable script when you confirm. Typical enable flow:

snippets for public helpers
a small demo folder
compile + preview

liboff st-core
xfcmd list

Disable removes snippets; demo files stay unless you delete them. Authoring side: xfcmds guide · modules guide.

What else is built in

Monaco — FSCSS highlighting, folding, snippets
Component search — registry helpers, one-click import
Compiler version — load another fscss@x.y.z from jsDelivr
Auto-compile while typing (toggle)
PWA-style install chrome on supported browsers
Console — window.xfscss for ad-hoc API checks

Docs: IDE guide.

Example: three lines → many classes

@arr classes[ count(1000, 1) ]
*Emails are not allowed*ses[] {
  margin: @arr.classes[]px;
}

Compile in the IDE and scroll the CSS pane — or open a prefilled buffer:

Open in IDE

Example: enable a pack

libck st-core
yes

Then in a new .fscss file (or the generated demo):

@import((*) from st-core@v2)
@st-root()
@arr data[42, 58, 65, 60, 78, 70, 92]
@st-chart-fill(.fill, data)
@st-chart-line(.line, data)
.chart {
  @st-chart-points(data)
  position: relative;
  height: 220px;
}

HTML: a .chart with .fill and .line children. Preview updates after compile. Same contract as the st-core templates: JS only patches --st-pN when data changes.

Ship path

Stage	Tool
Learn / combine modules	IDE + runtime CDN
Real multi-file project	IDE export ZIP or clone + CLI
Production	`fscss in.fscss out.css` — no browser compiler on the live site

npm install -g fscss@1.2.6
fscss src/site.fscss dist/site.css

The IDE is meant to lower the cost of trying FSCSS: multi-file imports, package enable in one terminal prompt, and a clear export to plain CSS. It does not replace the CLI for production builds—it shortens the path until you need one.

Open it, hit Ctrl+Enter, and if a pack has an enable script, libon is enough to see a demo.

Build a Pure CSS Radar Chart — Lightweight, Max Performance

Sun, 11 Oct 2026 20:07:46 +0000

Most radar charts pull in SVG path math or a JavaScript charting library. You can skip both.

With st-core.fscss, a spider (radar) chart is:

an FSCSS array of scores (0–100)
polar coordinates stored as CSS variables (--st-sxN, --st-syN)
shapes drawn with clip-path: polygon()
rings and spokes from gradients

No canvas. No SVG. No chart runtime on the critical path.

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

Here’s how it works

1. Data is an array

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

Length can be 5, 6, 8 — whatever you need. Geometry (number of polygon vertices) is fixed when FSCSS expands the mixins.

2. One mixin writes coordinates

.spider {
  @st-spider-points(skills, 42)  /* array, max radius % of the box */
  position: relative;
  width: 280px;
  height: 280px;
  border-radius: 50%;
}

For each index i:

angle = (i - 1) × 360° / N (0° at the top)
radius = (value / 100) × rmax
CSS gets:

--st-sxN: calc(50% + (r * 1%) * sin(θ));
--st-syN: calc(50% - (r * 1%) * cos(θ));

Trig stays in the browser’s calc(). Updating values later is rewriting those variables.

3. Renderers only read variables

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

Layer	Role
fill	Closed polygon through every `--st-sx/sy` pair
line	Dual-pass polygon (outer path + path scaled toward center) so the stroke has real thickness
dots	Absolutely positioned markers at each vertex
grid	Concentric rings (`radial-gradient`)
spokes	Thin radial axes (`conic-gradient`)

Rule: call @st-spider-points on the host. Children inherit. Same model as linear @st-chart-points / fill / line in st-core.

4. Markup is plain HTML

<div class="spider">
  <div class="spider-grid"></div>
  <div class="spider-spokes"></div>
  <div class="spider-fill"></div>
  <div class="spider-line"></div>
  <div class="spider-dot-1"></div>
  <div class="spider-dot-2"></div>
  <div class="spider-dot-3"></div>
  <div class="spider-dot-4"></div>
  <div class="spider-dot-5"></div>
  <div class="spider-dot-6"></div>
</div>

Dots need real nodes — the mixin emits .spider-dot-1 … .spider-dot-N rules; it does not invent elements.

Here’s how values can be displayed on the dot nodes

Markers are normal DOM nodes, so you can show the score next to (or inside) each dot without a chart API.

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

<div class="spider-dot-1" data-value="80"></div>
<div class="spider-dot-2" data-value="65"></div>
<!-- … -->

.spider-dot-1,
.spider-dot-2,
.spider-dot-3,
.spider-dot-4,
.spider-dot-5,
.spider-dot-6 {
  /* st-core already sets left/top from --st-sx / --st-sy */
}

[data-value]::after {
  content: attr(data-value);
  position: absolute;
  left: 50%;
  top: -1.4em;
  transform: translateX(-50%);
  font-size: 0.65rem;
  font-variant-numeric: tabular-nums;
  color: var(--st-text);
  white-space: nowrap;
  pointer-events: none;
}

Push labels slightly outward per axis if they collide with the polygon (different top / left offsets per index).

Option B — nested label element

<div class="spider-dot-1">
  <span class="dot-label">80</span>
</div>

.dot-label {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 4px);
  transform: translateX(-50%);
  font-size: 0.65rem;
  color: var(--st-muted);
}

Option C — update labels from JS with the series

function setSeries(host, values, rmax = 42) {
  const n = values.length;
  let css = "";
  values.forEach((v, i) => {
    const ang = (i * 360) / n;
    const r = (v / 100) * rmax;
    css += `--st-sx${i + 1}: calc(50% + (${r} * 1%) * sin(${ang} * 1deg));`;
    css += `--st-sy${i + 1}: calc(50% - (${r} * 1%) * cos(${ang} * 1deg));`;
    const dot = host.querySelector(`.spider-dot-${i + 1}`);
    if (dot) {
      dot.dataset.value = v;
      // or: dot.querySelector(".dot-label").textContent = v;
    }
  });
  host.style.cssText = css;
}

Geometry and labels stay in sync because both come from the same array pass.

Axis names (Speed, Quality, …) stay outside the dots — absolute labels around the circle — so vertices stay readable at small sizes.

Here’s why it’s lighter

Traditional radar	st-core radar
Chart.js / D3 / Recharts bundle	Mixins → CSS
SVG path string updates	Custom properties + `clip-path`
Layout + paint on every redraw	Often compositor-only if you transition `clip-path`
Library hydration before first paint	CSS paints as soon as the stylesheet applies

Compile time: FSCSS expands loops into concrete polygon() stops and selectors. Array length is fixed in the stylesheet.

Runtime: Changing scores is assigning --st-sxN / --st-syN (and optional label text). No path serializer, no virtual DOM for the shape.

Size: A compiled spider block is on the order of ~1 kb of CSS for the chart rules — not a 50–200 kb chart dependency.

Performance profile:

First paint: no JS required for a static series
Updates: style recalc + composite; avoid layout thrash if size is fixed
Multi-series: extra layers are extra divs + inherited variables, not extra chart instances

That’s “max performance” in the practical sense: minimum work per frame and minimum bytes on the wire.

Here are some use cases of spider (radar) charts

Skills / competency matrices — Speed, Quality, UX, Scale, Cost, Support for a team or candidate.
Product scorecards — Compare features across dimensions (performance, price, ecosystem, docs, support).
Sprint or OKR health — Delivery, quality, collaboration, predictability on one glanceable shape.
Security / compliance posture — Control families as axes; one polygon per system or vendor.
Player or character stats — Games and education UIs where polar layout is the expected metaphor.
Brand or perception studies — Trust, value, innovation, service — survey averages as radii.

Anywhere humans already think in “balanced vs spiky” profiles, a radar chart communicates faster than six separate bars.

Here’s how to do multi-series radar charts with still pure CSS

Each series is a separate host with its own @st-spider-points. Shared grid and spokes sit underneath.

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

@arr seriesA[70, 55, 40, 85, 90]
@arr seriesB[45, 75, 60, 50, 55]
@arr seriesC[85, 40, 70, 35, 65]

@st-spider-fill(.fill-a, seriesA)
@st-spider-line(.line-a, seriesA)
@st-spider-dots(.dot-a-, seriesA, 8px)

@st-spider-fill(.fill-b, seriesB)
@st-spider-line(.line-b, seriesB)
@st-spider-dots(.dot-b-, seriesB, 8px)

@st-spider-fill(.fill-c, seriesC)
@st-spider-line(.line-c, seriesC)
@st-spider-dots(.dot-c-, seriesC, 8px)

@st-spider-grid(.spider-grid)
@st-spider-spokes-n(.multi-spokes, 5)

.multi-spider {
  position: relative;
  width: 320px;
  height: 320px;
  border-radius: 50%;
  background: var(--st-surface);
}

.series-a {
  @st-spider-points(seriesA, 42)
  position: absolute;
  inset: 0;
  --st-accent: #ff9f43;
  --st-spider-fill-opacity: 20%;
}
.series-b {
  @st-spider-points(seriesB, 42)
  position: absolute;
  inset: 0;
  --st-accent: #54a0ff;
  --st-spider-fill-opacity: 16%;
}
.series-c {
  @st-spider-points(seriesC, 42)
  position: absolute;
  inset: 0;
  --st-accent: #ff6b9d;
  --st-spider-fill-opacity: 18%;
}

<div class="multi-spider">
  <div class="spider-grid"></div>
  <div class="multi-spokes"></div>

  <div class="series-a">
    <div class="fill-a"></div>
    <div class="line-a"></div>
    <div class="dot-a-1"></div>
    <div class="dot-a-2"></div>
    <div class="dot-a-3"></div>
    <div class="dot-a-4"></div>
    <div class="dot-a-5"></div>
  </div>

  <div class="series-b">
    <div class="fill-b"></div>
    <div class="line-b"></div>
    <div class="dot-b-1"></div>
    <!-- … -->
  </div>

  <div class="series-c">
    <div class="fill-c"></div>
    <div class="line-c"></div>
    <div class="dot-c-1"></div>
    <!-- … -->
  </div>
</div>

Why this stays pure CSS:

No JS chart instance per series
Isolation is DOM + custom properties, not a scene graph
Opacity and accent are tokens (--st-spider-fill-opacity, --st-accent)
Spoke count can match the axis count via @st-spider-spokes-n(..., 5) without tying spokes to one series’ array

If two series shared one host and only one @st-spider-points call, the last write would win and every series would draw the same shape. Separate hosts fix that — the same multi-series rule as linear st-core charts.

Quick start

FSCSS CLI, Vscode extention, or prototyping via its cdn

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

Full API in the repo: github.com/fscss-ttr/st-core.fscss

Pure CSS radar charts are not a compromise. With st-core they’re a styling problem: arrays in, variables out, polygons on screen — lightweight by construction, fast by default.

Designing overlapped / cascaded UI with overlapui

Tue, 06 Oct 2026 09:44:22 +0000

Build avatar stacks, notification piles, image strips, and radial menus with a token-driven CSS architecture—rest vs open states, no JavaScript for the interaction—using the overlapui FSCSS module.

Reference: overlapui.fscss

Stacked faces in a members column, cards that peek under each other, photos that share one edge, or a center control that fans into actions: that look is usually a pile of one-off rules. overlapui treats it as a small architecture—shared --ou-* tokens, four cascade patterns, hover and focus-within open states—and compiles to plain CSS.

This article is description- and code-based: how the layers fit, with copy-paste examples. The only project reference is the module itself.

What “cascaded UI” means here

A cascade has two densities:

Rest — children share space (negative margin, peek, or stacked under a hub).
Open — :hover or :focus-within restores gap, full card height, or a radial orbit.

Tokens describe density and chrome. Mixins encode the rest/open contract. Markup stays light lists, card roots, or a center-plus-satellites control.

Pattern	Rest	Open
Avatar	horizontal pull-in	sibling gap
Card	vertical peek	expanded margins
Image	overlap + tilt	align + gap
Circle	satellites hidden under center	polar fan-out

Setup

Use FSCSS 1.2.3+ (1.2.5+ recommended). Load the runtime with defer or async when prototyping.

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

@import((*) from overlapui)

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

One-shot install (default class names):

@import((*) from overlapui)
@overlapui()

Selective import:

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

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

Layer 1 — tokens (`--ou-*`)

Theme the product by overriding tokens after @ou-root(), not by forking mixin internals.

@ou-root()

:root {
  --ou-ring: #0f172a;
  --ou-time: 0.35s;
  --ou-ease: cubic-bezier(0.3, 1.3, 0.5, 1);
  --ou-center-bg: #6366f1;

  @ou-avatar-size(44px, -14px)
  @ou-card-size(34px, 76px)
  @ou-img-size(96px, -52px)
  @ou-circle-size(48px, 80px)
}

Token area	Variables (examples)
Motion / chrome	`--ou-time`, `--ou-ease`, `--ou-ring`, `--ou-ring-width`
Avatar	`--ou-size`, `--ou-overlap`, `--ou-gap`, `--ou-c`, `--ou-letter`
Card	`--ou-peek`, `--ou-card-h`, `--ou-card-gap`, `--ou-card-bg`, `--ou-card-title`
Image	`--ou-img`, `--ou-img-overlap`, `--ou-img-gap`, `--ou-img-tilt`
Circle	`--ou-item`, `--ou-r`, `--ou-center-bg`, `--n`

Dense UI (tables, toolbars): smaller size, stronger overlap.

:root {
  @ou-avatar-size(28px, -10px)
}

Layer 2 — avatar cascade

Role: presence clusters—members, assignees, “also on this thread.”

<ul class="avatar-overlap" tabindex="0">
  <li data-alph="g">Gina Park</li>
  <li data-alph="h">
    <img src="https://i.pravatar.cc/80?img=12" alt="">
    Hank Lee
  </li>
  <li data-alph="5">5001</li>
</ul>

@ou-root()
@avatar-overlap(.avatar-overlap)

Behavior encoded by the module:

Rest: each face after the first uses margin-left: var(--ou-overlap).
Open: li + li uses var(--ou-gap).
Letter from data-alph via ::before; font-size: 0 on the face keeps names in the DOM for assistive tech.
Optional img covers the letter; letter remains fallback.
A–Z / 0–9 map to a palette through FSCSS arrays at compile time.

Custom selector:

@avatar-overlap(.members)

<ul class="members" tabindex="0">
  <li data-alph="a">Ada</li>
  <li data-alph="n">Nia</li>
</ul>

Layer 3 — card cascade

Role: notification piles, activity stacks, ticket previews without a drawer component.

<div class="card-overlap" tabindex="0">
  <div>
    <img src="https://picsum.photos/96?random=1" alt="">
    <h3>Invoice paid</h3>
    Acme Corp · $2,400
  </div>
  <div>
    <img src="https://picsum.photos/96?random=2" alt="">
    <h3>Seat added</h3>
    workspace update
  </div>
  <div>
    <img src="https://picsum.photos/96?random=3" alt="">
    <h3>Comment</h3>
    “Ship the cascade”
  </div>
</div>

@card-overlap(.card-overlap)

:root {
  --ou-peek: 34px;
  --ou-card-h: 76px;
  --ou-card-gap: 10px;
  --ou-card-bg: #1f2a48;
  --ou-card-title: #fff;
}

Rest uses a negative top margin derived from peek and card height so only a band of each card shows. Open restores var(--ou-card-gap) between siblings. Prefer animating margin/transform over toggling display.

Layer 4 — image cascade

Role: editorial strips, gallery teasers, “recent media.”

<div class="img-overlap" tabindex="0">
  <img src="https://picsum.photos/120?random=4" alt="">
  <img src="https://picsum.photos/120?random=5" alt="">
  <img src="https://picsum.photos/120?random=6" alt="">
</div>

@img-overlap(.img-overlap)

:root {
  @ou-img-size(96px, -48px)
  --ou-img-tilt: -5deg;
  --ou-img-tilt-even: 4deg;
}

Rest: overlap plus alternating tilt. Open: rotate(0) and gap between images.

Layer 5 — circle cascade

Role: settings hub, FAB-style actions, compact toolbars.

<div class="circle-overlap" style="--n:5" tabindex="0">
  <button type="button" aria-label="Settings menu">+</button>
  <a href="#profile" aria-label="Profile">P</a>
  <a href="#billing" aria-label="Billing">B</a>
  <a href="#team" aria-label="Team">T</a>
  <a href="#api" aria-label="API keys">K</a>
  <a href="#logout" aria-label="Sign out">×</a>
</div>

@circle-overlap(.circle-overlap)

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

Rules of the pattern:

First child is the center control (background --ou-center-bg).
--n is the number of satellites (exclude the center).
Satellites sit under the center at rest (opacity: 0, scaled down), then fan with angle 360deg / var(--n) * var(--i).
Built-in --i / --c defaults apply per :nth-child; override --c when needed.

Topbar-friendly footprint:

.settings-wrap {
  position: relative;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.settings-orbit {
  --n: 5;
  --ou-item: 40px;
  --ou-r: 70px;
  margin: 0;
  width: var(--ou-item);
  height: var(--ou-item);
}

<div class="settings-wrap">
  <div class="settings-orbit circle-overlap" style="--n:5" tabindex="0">
    <button type="button" aria-label="Settings">+</button>
    <a href="#profile" aria-label="Profile">P</a>
    <a href="#billing" aria-label="Billing">B</a>
    <a href="#team" aria-label="Team">T</a>
    <a href="#api" aria-label="API">K</a>
    <a href="#out" aria-label="Sign out">×</a>
  </div>
</div>

Minimal full page (all four patterns)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>overlapui cascades</title>
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.2.5/runtime.min.js" defer></script>
  <style>
    @import((*) from overlapui)

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

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

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      gap: 48px;
      place-content: center;
      padding: 32px 16px;
      background: #0b1220;
      font-family: system-ui, sans-serif;
      color: #e2e8f0;
    }
  </style>
</head>
<body>
  <ul class="avatar-overlap" tabindex="0">
    <li data-alph="g">G</li>
    <li data-alph="h">H</li>
    <li data-alph="i">I</li>
    <li data-alph="j">J</li>
  </ul>

  <div class="card-overlap" tabindex="0">
    <div>
      <img src="https://picsum.photos/96?random=1" alt="">
      <h3>Title</h3>
      subtitle
    </div>
    <div>
      <img src="https://picsum.photos/96?random=2" alt="">
      <h3>Title</h3>
      subtitle
    </div>
  </div>

  <div class="img-overlap" tabindex="0">
    <img src="https://picsum.photos/96?random=4" alt="">
    <img src="https://picsum.photos/96?random=5" alt="">
    <img src="https://picsum.photos/96?random=6" alt="">
  </div>

  <div class="circle-overlap" style="--n:4" tabindex="0">
    <button type="button" aria-label="Menu">+</button>
    <a href="#a" aria-label="A">A</a>
    <a href="#b" aria-label="B">B</a>
    <a href="#c" aria-label="C">C</a>
    <a href="#d" aria-label="D">D</a>
  </div>
</body>
</html>

Responsive behavior (tokens, not new markup)

Scale density at breakpoints:

@media (max-width: 520px) {
  :root {
    @ou-avatar-size(36px, -11px)
    @ou-img-size(72px, -36px)
    @ou-circle-size(40px, 64px)
  }
}

Keep horizontal stacks from breaking the page:

body { overflow-x: hidden; }

.center-block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 100%;
}

Accessibility (part of the contract)

Keep real labels or names in the DOM for avatars; faces may hide the decorative letter with font-size: 0.
Put aria-label on the circle center and on each satellite control.
Add tabindex="0" on stack roots so :focus-within matches hover.
Call @ou-reduced-motion() so transitions drop out when the user prefers reduced motion.

How the pieces fit (checklist)

Choose a cascade: avatar, card, image, or circle.
Set density with --ou-* / size helpers.
Mark the stack root for keyboard open when needed.
Theme only through tokens.
Compile with FSCSS or use the runtime; the browser runs CSS.

Overlapped UI is a rest/open contract plus a token layer. overlapui is that contract as an FSCSS module.

Reference

overlapui.fscss — module source, mixins, and tokens

FSCSS 1.2.5 ships property shorthands: size, px, inset-x, ratio-fit()

Wed, 30 Sep 2026 23:48:53 +0000

A new FSCSS release. This one's aimed at the pairs everyone keeps typing out by hand:

/* before */
width: 32px;
height: 32px;

/* after */
size: 32px;

Same deal for the other repeat offenders:

.card {
  px: 16px;      /* padding-left + padding-right */
  py: 14px;      /* padding-top + padding-bottom */
  mx: auto;      /* margin-left + margin-right */
  max-w: 360px;
}

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

The inset-x one is the one I actually wanted to exist. inset: auto 45px sets all four sides, there's no native way to say "just left and right" without writing left and right separately. Now there is.

There's also ratio-fit() for the fill-container-keep-aspect-ratio pattern:

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

Compiles ahead of time, no runtime polyfill needed for any of it if you're already compiling with the CLI.

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

Also ships stack, hstack, center, auto-fit, truncate, line-clamp, border/background shorthands, and the usual aliases (fs, fw, jc, ai, pos, shadow...). Full map's linked below. There's a real UI using a chunk of these together, a dual-phone budget app template combining this with modules like st-core@v2 charts, if you want to see it in context rather than isolated snippets.

Release: https://github.com/Figsh/xfscss/releases/tag/v1.2.5
Shorthands reference: https://fscss.devtem.org/shorthands
Budget app template: https://github.com/fscss-ttr/st-core.fscss/tree/main/templates/budget-app

Anyone using size/px/inset-x already hit any edge cases worth flagging?

FSCSS auto-loop: percentage keyframes

Sat, 26 Sep 2026 07:18:17 +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\|process\|end)` fills labels.
`@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: *Emails are not allowed*[] { animation-delay: … } (as in arrays docs).

How to Use st-core.fscss with Svelte

Mon, 21 Sep 2026 12:45:40 +0000

st-core.fscss draws charts with pure CSS, clip-path polygons plus custom properties, no JS chart library, no SVG, no canvas. Svelte doesn't need to draw anything for it. It just needs to own the data and reactively set --st-p1, --st-p2, and so on whenever your series changes. Wanted to write up the actual integration because getting the responsibilities split correctly took me a minute the first time through.

Why compiled mode, not the runtime CDN

Svelte already has a build pipeline. Shipping the FSCSS runtime to a Svelte app just to expand a few chart mixins into static CSS is unnecessary work for the browser to do on every load. The runtime CDN script is fine for a CodePen or a quick static HTML demo, but for an actual Svelte or SvelteKit app you compile once at build time and import plain CSS.

Three layers, each with one job:

Layer	Job
FSCSS CLI	Expand `@st-chart-fill` / `@st-chart-line` into static CSS
Svelte	Reactive `data[]` → `--st-pN`
Browser CSS	Paint, plus optional `clip-path` transitions

Svelte state  →  style="--st-p1: 30%; --st-p2: 45%; …"
                      ↓
              compiled st-core.css
                      ↓
                 chart on screen

1. Write the FSCSS entry file

src/styles/st-core.fscss:

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

@st-root()

/* Length at compile time = number of polygon stops */
@arr chartData[0, 0, 0, 0, 0, 0, 0]

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

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

.chart-fill,
.chart-line {
  transition: clip-path 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

The zeros are placeholders, they only matter for their count. Svelte overwrites the real Y values through CSS variables at runtime. What you can't change without recompiling is the array's length — match it to your series (7 days of data → 7 entries).

2. Compile it as part of your build

npm install -D fscss@latest
npx fscss src/styles/st-core.fscss src/styles/st-core.css

Wire it into package.json so it runs automatically before every build:

{
  "scripts": {
    "build:st-core": "fscss src/styles/st-core.fscss src/styles/st-core.css",
    "prebuild": "npm run build:st-core"
  }
}

Then import the compiled CSS once, wherever makes sense for your app (root layout, app.css, or the chart's parent component):

import '../styles/st-core.css';

3. Map your data to `--st-pN`

Chart geometry in st-core is top-down, the same way CSS itself is. A high value needs to sit near 0%, not 100%. So every point gets inverted:

--st-pᵢ = (100 - humanValue) %

A score of 90 ends up 10% from the top, which is exactly where you'd expect it visually.

Here's a reusable Chart.svelte that does that mapping reactively, Svelte 4 style:

<script>
  /** @type {number[]} 0–100, higher = taller */
  export let data = [];
  export let height = '200px';
  export let color = '#9d7eff';

  $: cssVars = [
    ...data.map((value, index) => `--st-p${index + 1}: ${100 - value}%`),
    `--st-accent: ${color}`,
    `height: ${height}`
  ].join('; ');
</script>

<div class="chart" style={cssVars}>
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
</div>

And the Svelte 5 version, using $props / $derived instead of the old export-let / reactive-statement pattern:

<script>
  let { data = [], height = '200px', color = '#9d7eff' } = $props();

  let cssVars = $derived(
    [
      ...data.map((value, index) => `--st-p${index + 1}: ${100 - value}%`),
      `--st-accent: ${color}`,
      `height: ${height}`
    ].join('; ')
  );
</script>

<div class="chart" style={cssVars}>
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
</div>

Both do the exact same job, just with whichever reactivity API your Svelte version uses.

4. Use it like any other component

<script>
  import './styles/st-core.css';
  import Chart from './lib/Chart.svelte';

  let weekly = [45, 70, 30, 90, 60, 80, 50];

  function randomize() {
    weekly = Array.from({ length: 7 }, () => Math.floor(Math.random() * 80) + 10);
  }
</script>

<Chart data={weekly} color="#4fffb0" height="250px" >

<!-- Svelte 4 -->
<button type="button" on:click={randomize}>Randomize</button>

<!-- Svelte 5 -->
<!-- <button type="button" onclick={randomize}>Randomize</button> -->

Reassigning weekly recomputes cssVars, the browser applies the new custom properties, and the compiled CSS's clip-path transition animates the shape change. No chart library re-rendering, no SVG path recalculation, no manual DOM diffing on your end.

Fixed length vs changing length

Because geometry is baked in at compile time, the array length is the one thing you can't change on the fly:

Situation	What to do
Always exactly N points	Compile `@arr chartData` with N zeros, always pass exactly N values from Svelte
Length varies, up to a max of M	Compile M zeros, then `data.slice(0, M)` and pad shorter series with `0`

If you compile a template expecting 5 points and hand it 8 values from Svelte, the extra --st-p6, --st-p7, --st-p8 have nowhere to go, there's no polygon stop for them until you recompile with a longer array.

What not to do in production

<!-- Fine for a demo, avoid as your only path in a real Svelte app -->
<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.3/runtime.min.js"></script>

Runtime mode is for CodePen and quick static HTML, not for a build pipeline that already exists. See the plain HTML integration sample if that's what you actually want.

The mental model, condensed

@st-chart-points, fill, and line define the structure and only ever read --st-p*.
Svelte's only job is to replace those variables when the data changes.
transition: clip-path gives you motion for free, no animation library needed.

Nothing here is Svelte-specific past step 3, the same pattern maps directly to Vue, React, or vanilla JS, only the reactivity layer changes. Contributions for other frameworks welcome under integration/.

Repo: github.com/fscss-ttr/st-core.fscss
Svelte sample: integration/svelte

Finally Shipped st-core.fscss v2 — CSS Charts Without the 8-Point Ceiling

Sat, 19 Sep 2026 01:08:17 +0000

For a while, st-core.fscss charts had one annoying limit: every line, fill, and dot was locked to exactly 8 data points. --st-p1 through --st-p8, hardcoded. Want to plot 12 weeks of revenue? Tough. Want 5 points for a quick demo? You'd pad the array with zeros and hope nobody noticed.

v2 gets rid of that.

The core change: Array (`@arr`)

Instead of passing 8 raw numbers into @st-chart-points, you now declare a named array of any length:

@arr myData[50, 10, 97, 35, 66, 50, 80, 54, 70, 60]

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

st-core reads the array length at compile time, works out even X-spacing across the chart width, and builds the clip-path: polygon() shape from however many points you gave it. 5 points, 12 points, 50 points, doesn't matter. No more counting to 8.

The gotcha that took me a minute to internalize

Here's the part that actually tripped me up while building the multi-series examples: @st-chart-line(selector, array) and @st-chart-fill(selector, array) aren't what set the data on an element. They declare the renderer for that selector, the array argument just tells it how many points to expect.

The thing that actually writes --st-p1…--st-p{n} onto an element is @st-chart-points(array).

That distinction matters the moment you have more than one series on a chart. In a multi-line setup, if .line-b doesn't call @st-chart-points(seriesB) itself, it silently inherits whatever the parent container set, meaning it renders the wrong dataset. Looks fine at a glance, wrong shape in practice. Caught it while building a 3-series dashboard card where two lines were quietly drawing the same data.

.fill-b {
  @st-chart-points(seriesB)   /* required, not optional */
  opacity: 0.3;
  --st-accent: #4fffb0;
}

Once that clicked, the mental model got simple: renderer declarations are structural (once per selector), point data is per-element (as many times as you have distinct series).

How it feels to ship

Pure CSS charting was already a fun constraint to design inside of, no JS runtime, no SVG, no canvas. Making the dataset size flexible removes the last thing that made it feel like a toy rather than something you'd reach for on a real dashboard. Compiled output is still under a kilobyte. Still zero hydration.

Docs and full examples are up in the repo, including the legacy v1 reference for anyone still on fixed 8-point charts.

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

Open-source

with ♥️

The source code is totally math notebook 😅

Have been writing and debugging from morning till night, and finally released it. The usage is now as simple as CSS.

😊

Building Circular UI with circle-progress.fscss (No JavaScript)

Sun, 13 Sep 2026 23:02:30 +0000

Circular progress, pie charts, and step rings usually mean SVG path math or a chart library.
circle-progress.fscss does it with pure CSS — conic-gradient, masks, and FSCSS @define helpers.

Repo: Figsh/Circle-progress.fscss

What you get

Component	Define
Progress ring	`@circle-progress`
Solid pie	`@circle-pie`
Multi-slice pie	`@circle-pie-multi`
Steps ring	`@circle-steps`
Nested rings	Compose by nesting elements

All driven by CSS variables. Change --progress-value and the arc follows.

Setup

Option A — runtime (quick / prototyping)

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

Option B — CLI compile (production)
It works well with FSCSS vscode extention

npm install -g fscss
fscss styles.fscss styles.css

Import the module:

@import((*) from circle-progress)

@progress-root()
@circle-progress(.progress-circle)

Full sample page:
samples/example.html

1. Progress ring

<div class="progress-circle p72">72%</div>

.p72 { @progress-range(72) }

Under the hood: a conic-gradient draws the arc, a radial mask cuts the hole, and a small tip marker rotates with the value.

2. Color override

.p41 {
  @progress-range(41)
  --progress-color-arc: #4d9fff;
  --progress-color-glow: rgba(77, 159, 255, 0.45);
}

Same component — only tokens change.

.p88 {
  @progress-range(88)
  --progress-color-arc: #ffb830;
  --progress-color-glow: rgba(255, 184, 48, 0.4);
}

3. Pie slice

<div class="circle-pie p30">30%</div>

@circle-pie(.circle-pie)
.p30 { @progress-range(30) --progress-color-arc: #ff5070; }

No mask — the conic fill is the whole disk.

4. Multi pie

<div class="circle-pie-multi pie-a"></div>

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

.pie-a {
  --pie-a: 30;
  --pie-b: 25;
  --pie-c: 20;
  --pie-d: 15;
}

Four slices from four percentage tokens.

5. Steps ring

<div class="circle-steps steps-5">5/8</div>

@circle-steps(.circle-steps)
.steps-5 { @steps-done(5) @steps-total(8) }

.steps-3 {
  @steps-done(3)
  @steps-total(6)
  --progress-color-arc: #9d7eff;
}

6. Nested rings

<div class="progress-circle p72" style="--progress-size:200px">
  <div class="progress-circle p41"
       style="--progress-size:120px;--progress-stroke:10px">
    41
  </div>
</div>

Same define, different size/stroke on the child — composition without new APIs.

Mental model

Tokens — @progress-root() sets size, stroke, colors, value.
Shape — one @define per pattern (ring, pie, steps).
Value — @progress-range(n) or --progress-value.
Theme — override --progress-color-arc / --progress-color-glow.

No SVG paths. No chart library. Change a variable, the circle updates.

When to use runtime vs CLI

Use case	Prefer
Demos, CodePen, quick tests	CDN runtime
Production, static deploy	CLI compile to plain CSS

Runtime keeps FSCSS syntax in the page. CLI ships zero-runtime CSS.

Try it

Clone or copy from the repo and open the sample:

github.com/Figsh/Circle-progress.fscss
Sample: samples/example.html

Swap values, nest rings, add a pie — same module, different tokens.

Built with FSCSS @define · pure CSS circular UI

FSCSS v1.2.0 is out: two clean entry points, full backward compatibility, and inline

Sat, 05 Sep 2026 08:26:35 +0000

FSCSS is open source, built in the open, and free for anyone to use, extend, or pick apart. That's the whole point of it. Every release is meant to make it easier for other developers to build with, not harder. v1.2.0 is the clearest example of that yet.

What shipped

Previous versions of FSCSS scattered their browser-facing files across the package: /e/exec.js, /exec.js, /xfscss.js, /xfscss.min.js, and more. Depending on what you needed, you'd end up guessing which file was the right one to load.

v1.2.0 consolidates all of that into two public entry points:

<!-- Auto-run, for plain HTML pages -->
<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.0/runtime.min.js" async></script>

// Manual control, for tooling and modules
import xfscss from "https://cdn.jsdelivr.net/npm/fscss@1.2.0/esm.js";

runtime.js auto-scans the page and compiles everything on load, <style> blocks, <link type="fscss"> sources, and now inline style attributes too. esm.js never auto-runs and never touches page loading, since it's meant for using FSCSS as a tool: an FSCSS-to-CSS converter, a build step, or any pipeline where you decide what gets processed and when.

Use one or the other. Never both.

Nothing breaks

This is the part worth repeating: the npm package and CLI are completely unchanged, and every method that worked in the 1.1.x line still works exactly the same way in 1.2.0. @define, @fun, @event, @arr, pattern(), all of it. The consolidation only touches the browser entry-point files. If you're compiling ahead of time with the CLI, this release changes nothing for you.

Inline styles now go through the full pipeline

This is the headline feature. From v1.2.0, style="..." attributes are compiled on boot the same way <style> blocks are:

<style>
  @define btn-style(bg: #636EE7){
    padding: 10px 20px;
    color: color-mix(#dddddd, @use(bg));
    background: @use(bg);
    border: 2px solid;
    border-radius: 25px;
    font-weight: 700;
  }
</style>

<button style="@btn-style(#1a2a4f)">Search</button>
<button style="@btn-style(#f00f00)">Search</button>

Combined with xfscss.process(), that means an inline mixin call can be recompiled at runtime and swapped straight back into the element, no rewritten CSS, no framework state:

const update = async (btn) => {
  const newStyle = await xfscss.process("@btn-style(@arr.colors!.randint)");
  btn.setAttribute("style", newStyle);
};

The full walkthrough of this: including a detail (method declared inline stay resolvable even after their declaration is cleaned out of the attribute), if you want to go deeper: FSCSS v1.2.0 lets you write mixins directly in style="...".

Why this matters for an open-source tool

None of this is about adding complexity for its own sake. FSCSS exists to cut down on repetitive CSS and give developers capabilities plain CSS doesn't have natively, and every release should make that easier to reach for, not harder to keep up with. Two entry points instead of a pile of internal files. Full compatibility instead of a migration guide. A feature that makes the JS API and the language work together instead of sitting side by side.

Open source only stays useful if the people using it can trust an upgrade won't cost them a rewrite. That's the bar this release was held to.

try it

npm install fscss@latest

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

Bug reports, feature requests, and pull requests are all welcome on GitHub

Why Readable CSS Matters More as AI Writes More of It

Tue, 25 Aug 2026 22:13:05 +0000

Most CSS tooling is built around one assumption: the person writing the stylesheet remembers the exact name of the thing they want. A mixin, a utility class, a function signature. Get the name slightly wrong and nothing happens, or worse, something wrong happens silently.

That assumption breaks down in two places at once right now: beginners, and AI-generated CSS. Neither is good at remembering exact names. Both are good at describing what they want.

The exact-name problem

Say you want a rounded button with a purple background. In most systems you need to already know the answer is .btn-primary, or mixin button-primary(), or whatever your team decided six months ago. If you don't know it, you either guess, search the codebase, or write it from scratch again, adding one more near-duplicate button style to the pile.

A beginner doesn't have that memorized name yet. An AI model generating CSS doesn't reliably have it either, it will confidently produce a plausible-looking class name that doesn't exist in your project, because plausible-looking is exactly what language models are good at, and existing in your specific codebase is not something they can check without help.

Both groups are, in a real sense, working from intent rather than from an exact API surface. The tooling just hasn't caught up to that.

Matching by description instead of by name

FSCSS's pattern() method takes the opposite approach. Instead of calling a style by its exact name, you describe it:

pattern(0.6: "rounded primary button", `
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background: #764ba2;
  color: white;
  font-weight: 600;
`)

and later, anywhere in the stylesheet:

.btn {
  rounded primary button
}

The phrase doesn't need to match the description exactly. It needs to be close enough, measured by a similarity score against a threshold you set. Someone who writes rounded purple button instead of rounded primary button still gets the right result, because the words overlap enough to clear the bar.

This is a small syntax change with a real consequence: the thing being memorized shifts from an exact identifier to a rough description. Rough descriptions are the thing beginners already know how to produce, and the thing AI models are already extremely good at producing.

Why this helps beginners specifically

A new developer doesn't need to browse a component library, search for card, panel, surface, and box to guess which one your project picked, and read the source to confirm what it actually does. They write what they want in the words they'd use to ask a coworker for it. If a close-enough pattern exists, it resolves. If it doesn't, they get to write real CSS instead, which they were going to have to learn eventually anyway.

This doesn't remove the need to learn CSS. It removes the need to memorize your project's specific naming conventions before you can be productive in it.

Why this helps AI-generated CSS specifically

When a model generates @my-exact-mixin-name(), it is guessing at a name it has no way to verify against your actual codebase. When it generates soft elevated card with subtle shadow inside a selector, it is describing an outcome, and the matching happens against patterns that actually exist in your project. A wrong guess at an exact name fails silently or breaks the build. A wrong guess at a description either matches something close enough to be useful, or matches nothing and falls through as literal, harmless text, which is a far safer failure mode.

This is also why the earlier comment on the pattern() announcement post, about this being especially useful for AI-generated CSS, is worth taking seriously. Fuzzy matching by description is closer to how models actually operate than exact-name lookup ever was.

The tradeoff you have to manage

None of this is free. A pattern library is only as reliable as the distinctness of its descriptions. If two patterns describe closely related things in overlapping words, for example white button with purple label next to solid purple primary button with white label, a given phrase can score close on both, and the result depends on small wording differences rather than clear intent. This came up directly while building patterns.fscss: an early draft had two button patterns worded closely enough that matching between them was genuinely ambiguous.

The fix isn't a smarter matching algorithm. It's writing descriptions the way you'd want a beginner, or a model, to actually phrase the request, and keeping related-but-different patterns lexically distinct from each other. That discipline matters more as a pattern library grows, not less.

Where to start

If you want to see this in practice, patterns.fscss is a small demo module of cards, buttons, hover effects, and animations, all callable by description. Fork it, read how the descriptions are worded, and use it as a template for your own project's pattern.

Pattern Feature: fscss.devtem.org/pattern

NPM: npmjs.com/package/fscss

Visual studio code extention: FSCSS support

Understanding exec() in FSCSS — Two Completely Different Jobs

Sat, 22 Aug 2026 22:45:11 +0000

Understanding `exec()` in FSCSS

In FSCSS, exec() serves two completely different purposes depending on where you write it:

Inside your stylesheet: as a utility / debugging function
In JavaScript / HTML: to load and compile the styles

Let’s break both down clearly.

1. Inside Stylesheets: Debugging & Logging

When used inside an @event block or after processing an array, exec() lets you run small JavaScript helpers directly from your CSS.
Its main job here is printing debug information to the browser console so you can check if your logic is working.

Console Logging

You can pass flags like _log, _warn, _info, or _error:

@event scaleSize(e) {
  if e >= 8 {
    return| num(8*2)em exec(_log, "Scaling to 16em for optimal readability")
  }
}

Checking Array Data

You can also inspect the current values inside an FSCSS array:

@arr fruits[ apple, orange, banana ]

/* Prints: apple orange banana straight to your browser console */
exec(_log, "@arr.fruits")

This is extremely useful while building complex logic with @event, @arr, or calculated values.

2. In JavaScript & Imports: Compilation Engine

Outside the stylesheet, exec is the core engine that compiles and runs FSCSS source code.

CDN Initialization (HTML)

The compiler file loaded via CDN is named exec.min.js:

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

<style>
  /* Tells the engine to execute the initialization for a module */
  @import(exec(_init circle-progress))
</style>

Programmatic JavaScript Usage

You can also import and control the compiler directly from JavaScript:

import { exec } from "https://cdn.jsdelivr.net/npm/fscss@1.1.25/e/xfscss.min.js";

new exec({
  type: "URL",
  content: "styles.fscss",
  onSuccess: "Styles loaded successfully!",
  onError: "Oops, style compilation failed!"
});

This gives you full control over loading, success messages, and error handling.

Quick Summary

Location	Purpose	Common Use Case
Inside `.fscss`	Debugging & console logging	Check `@event` logic or array values
In HTML / JavaScript	Compile and run FSCSS	Load styles or initialize modules

Two different jobs. Same name.
Once you know the context, exec() becomes much clearer.

Useful links

Docs → fscss.devtem.org
vscode extention FSCSS Support
npm → npmjs.com/package/fscss

pattern() in FSCSS 1.1.25

Tue, 18 Aug 2026 12:18:46 +0000

FSCSS v1.1.25 ships a new core method: pattern().

You describe what you want in plain language, and FSCSS matches the closest pattern at compile time.

pattern(0.5: "Hello World Card", `
  border-radius: 12px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
`)

.card {
  hello world card
}

Compiles to:

.card {
  border-radius: 12px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

Notice .card doesn't call anything — it just contains a phrase close enough to "Hello World card" to trigger the match.

Why this exists

@define is precise but rigid. You call it by exact name, with exact arguments. That's great for a library you built yourself, but it breaks down in a few real situations:

Design handoffs. A designer or junior dev writes dark card with rounded corners inside a rule instead of hunting through your define library for the right call signature.
AI-generated markup. Tools that generate FSCSS from natural-language prompts can emit descriptive phrases instead of needing to know your exact mixin names.
Fast prototyping. You don't always remember what you named something six months ago. pattern() lets close-enough phrasing still resolve correctly.

pattern() doesn't replace other variable methods — it sits next to it, for cases where flexibility matters more than precision.

The syntax

pattern(threshold: "description", `
  css to inject
`)

threshold — a number from 0 to 1. The minimum similarity score a phrase must reach to trigger this pattern. Omit it and it defaults to 1 (near-exact match only).
description — the plain-language phrase you're matching against.
css — what gets injected when a phrase matches. Use backticks so the CSS can freely contain single or double quotes.

Threshold uses a colon, deliberately — 0.5: reads as a labeled parameter, distinct from a plain comma-separated argument. It's there so the number's purpose is visually obvious to anyone reading your stylesheet.

How matching works

Every phrase in your code gets compared against every pattern description using similarity scoring (Dice coefficient, if you're curious — it compares word overlap between the phrase and the description). The pattern with the highest score that also clears its own threshold wins.

That means:

pattern(0.8: "dark background and light color", `
  background: #212121;
  color: #ffffff;
`)

.chip {
  style dark background and light color
}

.tooltip {
  dark background light color
}

Both .chip and .tooltip resolve to the same CSS, even though neither phrase matches the description word-for-word. That's the point — you're not looking up a name, you're describing an outcome.

Tuning the threshold

High threshold (0.8–1) → strict. Good for short, generic descriptions where you don't want accidental matches ("button" alone would be too easy to trigger by accident).
Low threshold (0.4–0.6) → forgiving. Good for longer, more specific descriptions where a few words might vary but the intent is clearly the same.

If two patterns could plausibly match the same phrase, the highest-scoring one wins — so keep descriptions distinct from each other, especially at lower thresholds.

Property patterns vs. block patterns

Same split as @define:

Property patterns inject a group of declarations inside a rule:

pattern(0.6: "rounded primary button", `
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background: #ffffff;
  color: #764ba2;
  font-weight: 600;
  cursor: pointer;
`)

.btn {
  rounded primary button
}

Block patterns inject full structures — keyframes, media queries, whole at-rules — and can stand alone outside any selector:

pattern(0.7: "Animated keyframe for spin", `
  @keyframes spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
  }
`)

An Animated keyframe for spin

Content injection example

Because the CSS argument is just a string, pattern() isn't limited to properties — it can inject anything valid at that point in your stylesheet, including pseudo-element content:

pattern(0.9: "hello world heading", `h1:before{content: 'Hello World';}`)

  hello world heading

What's shipped in v1.1.25

CDN
API
CLI
VSCode Extention

Try it

pattern() is available on v1.1.25

Docs: fscss.devtem.org/pattern

I built pure CSS 3D dice cube module: FSCSS

Fri, 07 Aug 2026 22:17:10 +0000

cube.fscss is a lightweight, pure CSS 3D cube system built on FSCSS. It renders a spinnable 6-face cube using nothing but perspective, transform-style: preserve-3d, and translateZ/rotateX/rotateY — no JavaScript, no 3D library, no canvas.

Here's example whole thing rendered live, nothing but <div>s and CSS:

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

<style>
@import((*) from cube)

@cube-root()
@cube-wrapper(.my-cube)
@cube-face(.my-cube div)
@cube-face-front(.my-cube .f1)
@cube-face-back(.my-cube .f2)
@cube-face-left(.my-cube .f3)
@cube-face-right(.my-cube .f4)
@cube-face-top(.my-cube .f5)
@cube-face-bottom(.my-cube .f6)
@cube-micro-dice(.my-cube .cube)

.my-cube {
  @cube-size(80px)
  transform: rotateY(50deg) rotateX(30deg);
  animation: spin 5s linear infinite;
}

@keyframes spin {
  0%   { transform: rotateX(20deg) rotateY(40deg); }
  100% { transform: rotateX(380deg) rotateY(400deg); }
}
</style>

<div class="my-cube">
  <div class="cube f1 dice-1"></div>
  <div class="cube f2 dice-2"></div>
  <div class="cube f3 dice-3"></div>
  <div class="cube f4 dice-4"></div>
  <div class="cube f5 dice-5"></div>
  <div class="cube f6 dice-6"></div>
</div>

No dice PNGs. No SVG paths. No canvas draw calls. Every pip is a radial-gradient.

Why build this

Already had a chart/dashboard module (st-core.fscss) built on clip-path polygons — no JS charting library, just CSS custom properties driving the shape. I wanted to see how far that "CSS does the visual math" philosophy could stretch into actual 3D space. A cube felt like the right next test: real perspective, real preserve-3d, real face geometry — not a flat illusion.

How the geometry works

A cube is 6 absolutely-positioned faces sharing one parent set to transform-style: preserve-3d. Each face gets pushed out from the center by half the cube's edge length, then rotated to face outward:

front  → translateZ(half)
back   → rotateY(180deg) translateZ(half)
top    → rotateX(90deg)  translateZ(half)
bottom → rotateX(-90deg) translateZ(half)
right  → rotateY(90deg)  translateZ(half)
left   → rotateY(-90deg) translateZ(half)

The entire cube's dimensions live in two CSS variables: --cube-size and --cube-half (always size ÷ 2). Resize the whole thing with one call:

.my-cube {
  @cube-size(150px)
}

Faces, offsets, and dice dot size all scale together — no manually recalculating six translateZ values by hand.

Dice pips, no font glyphs

I originally reached for Unicode dice characters (⚀⚁⚂⚃⚄⚅) for the pips, but font rendering for those glyphs is wildly inconsistent across platforms — some Android/Chrome stacks show them thin, outlined, or as tofu boxes. Stacked radial-gradients solved it instead:

.dice-3 {
  background-image:
    radial-gradient(circle var(--cube-dot-size) at 25% 25%, var(--cube-dot-color) 99%, transparent 100%),
    radial-gradient(circle var(--cube-dot-size) at 50% 50%, var(--cube-dot-color) 99%, transparent 100%),
    radial-gradient(circle var(--cube-dot-size) at 75% 75%, var(--cube-dot-color) 99%, transparent 100%);
}

Font-independent, crisp at any size, and the dot radius is itself a variable — so it scales automatically with @cube-size() instead of overflowing on a big cube or vanishing on a small one.

It's not just dice

Faces and face content are decoupled on purpose. The face mixins only handle position — what renders inside is a separate "micro" you apply on top. Right now there are eight:

cube-micro-fire — pulsing gradient-text fire
cube-micro-matrix — scrolling digital rain
cube-micro-neon — pulsing cyan/magenta glow border
cube-micro-float — subtle bounce, stacks with anything
cube-micro-glass — frosted backdrop-filter panel
cube-micro-holo — holographic shifting gradient text
cube-micro-glitch — RGB-split glitch shift
cube-micro-dice — the pips above

Mix and match per face on the same cube:

@cube-micro-fire(.my-cube .f1)
@cube-micro-matrix(.my-cube .f2)
@cube-micro-neon(.my-cube .f3)
@cube-micro-glass(.my-cube .f5)
@cube-micro-holo(.my-cube .f6)

Try it

CDN, drop-in:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" defer></script>
<style> 
  @import((*) from cube)
  /* your mixins here */
</style>

Or compile ahead of time with the CLI for a plain .css file, zero runtime:

npm install -g fscss
fscss style.fscss style.css

Full docs, token reference, and more examples: github.com/fscss-ttr/cube.fscss

If you build something with it — I'd love to see. And if you hit issue, open an issue, it's open-source.

help us star the repo so more dev can discover it. 🙏

Designing Stats UIs with FSCSS and st-core

Sat, 04 Apr 2026 13:14:55 +0000

If you've ever built a stats dashboard, you know the drill — a bunch of divs, a charting library, a pile of JavaScript, and somehow it still looks off.

What if you could drop a chart into a page with just CSS? No canvas, no SVG, no JS dependency. That's what FSCSS and its st-core plugin are about.

What is FSCSS?

FSCSS (Figured Shorthand CSS) is a lightweight, modern CSS preprocessor that simplifies your styling workflow with intuitive shorthand syntax. It allows you to write cleaner, more maintainable stylesheets with less code.

CDN:

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

NPM: https://www.npmjs.com/package/fscss

Meet st-core

st-core is an FSCSS plugin built specifically for stats UIs. It gives you:

A design token system (colors, spacing, radius) via @st-root()
A pure-CSS area/line chart driven by data points
Stat cards with value, label, and delta
Category bar fills
Layout helpers

Import it like this:

@import((*) from st-core)

Building a Simple Stats Card + Chart

Here's a minimal working example with FSCSS via CDN.

HTML

<div class="stat-card">
  <div class="st-stat-label">Revenue</div>
  <div class="st-stat-value">$1,326.03</div>
  <div class="st-stat-delta up">+5.1% vs last week</div>
</div>

<div class="chart">
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
  <div class="chart-dot" data-point="$45.07"></div>
</div>

CSS (FSCSS)

@import((*) from st-core)

/* 1. Init design tokens */
@st-root()
@st-container(body)

/* 2. Register components */
@st-stat-card(.stat-card)
@st-chart-fill(.chart-fill)
@st-chart-line(.chart-line)
@st-chart-dot(.chart-dot, 84, 66)

/* 3. Feed data to the chart */
.chart {
  position: relative;
  width: 300px;
  height: 200px;
  border-radius: 25px;
  overflow: hidden;

  @st-chart-points(20, 35, 33, 30, 48, 35, 66, 37)
}

/* 4. Optional tweaks */
.chart-line {
  @st-chart-line-width(2px)
}

@st-chart-points sets eight y-values. The fill and line are drawn automatically via clip-path. The dot lands at (84%, 66%) — no JS, no math on your end.

How the Chart Works

Under the hood, @st-chart-points(v1, v2 ... v8) maps each value to a CSS custom property (--st-p1 through --st-p8). The fill and line components consume those as clip-path: polygon(...) coordinates.

It's pure CSS geometry. No canvas, no SVG, no runtime calculations.

A Few Use Cases

st-core is a good fit when you want:

Lightweight dashboards — personal finance trackers, health stats, workout logs
Admin panels — a quick KPI card row without pulling in a full charting lib
Prototypes — get a chart on screen in minutes, style it later
FSCSS projects — consistent tokens and components across your whole app

Category Bars Too

Need a simple progress bar? There's a plugin for that:

@st-cat-bar-fill(.bar, 65)

Renders a bar filled to 65%. Good for breakdowns, budgets, category splits.

Worth Trying

The whole thing is one import. No build step, no npm install for the components, no chart configuration object to wrestle with.

If you're already using FSCSS, st-core slots right in.

Links:

Write CSS in camelCase or snake_case — FSCSS

Sat, 28 Mar 2026 14:52:45 +0000

CSS naming hasn't evolved.

Everything else in development has — JavaScript, Python, APIs — but CSS is still stuck in:

background-color: #111;
border-radius: 8px;

Hyphens. Everywhere.

Meanwhile, the rest of your stack uses:

camelCase (JavaScript)
snake_case (Python, databases)

That mismatch isn't just annoying — it's inefficient.

The Real Problem: Context Switching

Every time you write CSS, your brain does a silent conversion:

backgroundColor → background-color
user_name → user-name

That's friction. And friction slows teams down.

Even modern systems still enforce kebab-case in CSS — meaning developers constantly translate between conventions.

FSCSS Changes the Rule

With FSCSS (Figured Shorthand Cascading Style Sheets), you don't adapt to CSS...

CSS adapts to you.

Write CSS Like Your Actual Code

camelCase — Frontend-friendly:

@import((*) from camelCase)

.card {
  backgroundColor: #111;
  borderRadius: 12px;
}

snake_case — Backend-friendly:

@import((*) from snake_case)

.card {
  background_color: #111;
  border_radius: 12px;
}

Both compile to:

background-color: #111;
border-radius: 12px;

No hacks. No runtime overhead. Just valid CSS.

Why This Matters More Than It Looks

1. Your brain stops translating
Stick to one mental model - whichever matches how you already think.

2. Your stack becomes consistent

React / Next.js → camelCase
Django / APIs → snake_case
CSS → now matches both

3. Teams move faster
No more "Is it borderRadius or border-radius again?" you already know, because you're already using it.

It Goes Beyond Naming

FSCSS also lets you build reusable styling logic and more:

@define glassEffect() {
  backdrop-filter: blur(12px);
  background: rgba(255, 255, 255, 0.2);
}

.hero {
  @glassEffect()
}

Your CSS starts behaving more like a system.

Learn More

Snake case guide: https://figsh.devtem.org/how_to_use_snakecase_fscss
Camel case guide: https://figsh.devtem.org/how_to_use_camelcase_fscss

Kebab-case made sense when CSS was isolated. But modern development is interconnected.

FSCSS brings CSS into alignment with the rest of your stack and removes one of the most subtle productivity killers in frontend development.

⚡ Creating Custom Functions in FSCSS (Yes, CSS Can Do This)

Sat, 28 Mar 2026 11:33:44 +0000

One thing about FSCSS is that you can define your own functions… inside your styles. Here’s a simple example of how that works.

Custom randint Function

@define randint(array){
@random(@use(array)) 
}

What this function does:

Takes an array as an argument.
Returns a random value directly from that array.

Step 1: Defining Arrays
First, we set up our possible values:

@arr sizes[ 100px, 150px, 200px ]

Step 2: Using the Function
We call our custom function and assign it to a variable:

$height: @randint(@arr.sizes);

Now $height dynamically becomes either 100px, 150px, or 200px (randomly selected at compile).

Why This Is Interesting

Reusable Logic: You can create complex logic once and use it across your entire design system.
Dynamic Design Systems: Build layouts that feel organic and varied rather than static and repetitive.

Example Usage

Applying that logic to a class is straightforward:

.box { 
  height: $height; 
  width: $height; 
  background: #2c5364; 
}

Every compile can produce a slightly different UI!

https://www.npmjs.com/package/fscss

FSCSS introduction

Sat, 28 Mar 2026 11:28:57 +0000

FSCSS (Figured Shorthand Cascading Style Sheet) is a styling approach designed to simplify CSS by using shorthand techniques. It allows developers to write more concise and efficient styles, reducing redundancy and improving readability.

Key Features of FSCSS:

Shorthand Methods: Techniques like %2 allow multiple properties to share the same value.
Rapid Tag Formatting (rtF): Enables quick styling of multiple elements.
Animation Efficiency: Provides a compact way to define animations.
Script Integration: Works with FSCSS-specific scripts to streamline styling.

FSCSS is particularly useful for projects that require clean and maintainable CSS structures.
NPM package
vscode extention.
Projects series
Website

Coder Legion - Recent posts tagged fscss

Build an AI Ops Dashboard with FSCSS modules (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

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

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

Why these exist

Spacing axes

stack and hstack

center

size and friends

rounded and surface chrome

Small composed example

Runtime note: fscss-props

When to use what

Try it

Shipped: the FSCSS Browser IDE

What it is

Layout (quick map)

Quick start

Multi-file and @import

Packages: libck / libon / xfcmd

What else is built in

Example: three lines → many classes

Example: enable a pack

Ship path

Links

Build a Pure CSS Radar Chart — Lightweight, Max Performance

Here’s how it works

1. Data is an array

2. One mixin writes coordinates

3. Renderers only read variables

4. Markup is plain HTML

Here’s how values can be displayed on the dot nodes

Option A — data-value + CSS ::after

Option B — nested label element

Option C — update labels from JS with the series

Here’s why it’s lighter

Here are some use cases of spider (radar) charts

Here’s how to do multi-series radar charts with still pure CSS

Quick start

Designing overlapped / cascaded UI with overlapui

What “cascaded UI” means here

Setup

Layer 1 — tokens (--ou-*)

Layer 2 — avatar cascade

Layer 3 — card cascade

Layer 4 — image cascade

Layer 5 — circle cascade

Minimal full page (all four patterns)

Responsive behavior (tokens, not new markup)

Accessibility (part of the contract)

How the pieces fit (checklist)

Reference

FSCSS 1.2.5 ships property shorthands: size, px, inset-x, ratio-fit()

FSCSS auto-loop: percentage keyframes

Setup

Source (your idea, tightened)

What “auto-loop” is here

Breakdown

1. Target

`stack` and `hstack`

`center`

`size` and friends

`rounded` and surface chrome

Runtime note: `fscss-props`

Multi-file and `@import`

Packages: `libck` / `libon` / xfcmd

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

Layer 1 — tokens (`--ou-*`)

3. Map your data to `--st-pN`

The core change: Array (`@arr`)

Understanding `exec()` in FSCSS