Forem: FSCSS tutorial

Using st-core.fscss with React & Next.js

FSCSS tutorial — Mon, 20 Apr 2026 01:16:05 +0000

React and Next.js can't parse .fscss syntax natively — so the workflow is: write FSCSS → compile to CSS → import as normal. This keeps your charts at zero runtime JavaScript while still fitting into any component tree.

1. Install the FSCSS CLI

npm install -g fscss

2. Create Your Stylesheet

Create a .fscss file anywhere in your project — src/styles/Chart.fscss is a good home.

/* Chart.fscss */
@import((*) from st-core);

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

.my-chart {
  @st-chart-points(10, 20, 16, 15, 66, 50, 80, 54)
}

Full mixin reference: github.com/fscss-ttr/st-core.fscss

3. Compile to CSS

fscss src/styles/Chart.fscss src/styles/Chart.css

This outputs a standard .css file — no bundler plugins needed.

4. Import Into Your Component

import "./styles/Chart.css";

export default function DashboardChart() {
  const dataStyles = {
    "--st-p1": "30%",
    "--st-p2": "65%",
    "--st-p3": "45%",
  };

  return (
    <div className="my-chart" style={dataStyles}>
      {/* Chart rendered via CSS clip-path — zero JS overhead */}
    </div>
  );
}

CSS custom properties are your data bridge. React state writes the values; st-core renders the chart.

5. Normalizing Data Points

@st-chart-points() uses human-friendly values (e.g. 0–100), but the underlying clip-path percentages are inverted — 0% is the top of the container and 100% is the bottom. Use this helper to convert your raw data before passing it to CSS:

/**
 * Normalizes a raw data value into a CSS custom property string
 * for use with st-core.fscss chart mixins.
 *
 * @param {number} value     - Raw data point (e.g. 0–100)
 * @param {number} [min=0]   - Dataset minimum
 * @param {number} [max=100] - Dataset maximum
 * @returns {string}         - e.g. "35%"
 */
function normalizePoint(value, min = 0, max = 100) {
  const clamped = Math.max(min, Math.min(max, value));
  const normalized = 100 - ((clamped - min) / (max - min)) * 100;
  return `${normalized.toFixed(2)}%`;
}

// Example: map an array of values to CSS custom properties
const data = [10, 42, 78, 55, 67, 60, 91, 82];
const dataStyles = Object.fromEntries(
  data.map((v, i) => [`--st-p${i + 1}`, normalizePoint(v)])
);

Pass dataStyles directly to your chart div and your data will scale correctly regardless of dataset range.

Key Considerations for Next.js

Global styles — Import compiled CSS in app/layout.tsx (App Router) or pages/_app.tsx (Pages Router) for shared dashboard tokens:

// app/layout.tsx
import "../styles/Chart.css";

CSS Modules — st-core works best with global selectors since chart class names are set at compile time. If you need scoping, output to Chart.module.css and reference classes via the module object.

Zero Runtime — Compiled output is plain CSS. No JS chart library ships to the client, which means faster TTI and no hydration concerns.

Re-compiling — Add the compile step to your package.json scripts so it runs before dev/build:

"scripts": {
  "predev": "fscss src/styles/Chart.fscss src/styles/Chart.css",
  "prebuild": "fscss src/styles/Chart.fscss src/styles/Chart.css"
}

That's it — FSCSS charts in React with a single compile step and no runtime cost.

Resource https://github.com/fscss-ttr/st-core.fscss

Advanced CSS Charts with st-core.fscss (Multi-Line, Grid, Axis — No JS Required)

FSCSS tutorial — Sat, 11 Apr 2026 23:18:47 +0000

What if you could build real charts using just CSS?

That's exactly what st-core.fscss enables.

What is st-core.fscss?

st-core.fscss is a lightweight data visualization system built on FSCSS. It lets you create line charts, multi-line charts, dashboard UIs, and stat cards — using pure CSS (with optional minimal JS).

Core Idea

Instead of rendering charts with Canvas or SVG, st-core uses:

clip-path: polygon() → to draw the chart shape
CSS variables (--st-p1…--st-p8) → to store data points
FSCSS mixins → to generate structure

So the flow becomes:

data → CSS variables → clip-path → visual chart

No re-renders. No heavy libraries.

Multi-Line Chart Example

Here's a real example with multiple datasets in a single chart:

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

<style>
@import((*) from st-core)

/* INIT */
@st-root()

.chart {
  height: 200px;
  position: relative;

  /* default dataset */
  @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)
}

/* ONE renderer */
@st-chart-line(.chart-line)

.chart-line {
  background: currentColor;
  @st-chart-line-width(2px);
}

/* MULTI DATASETS */
.line-1 { color: #32D8D4; }

.line-2 {
  color: #E8A030;
  @st-chart-points(10, 20, 16, 15, 66, 50, 80, 54)
}

.line-3 {
  color: #B840C8;
  @st-chart-points(5, 39, 20, 30, 27, 70, 60, 70)
}

/* GRID + AXES */
@st-chart-grid(.chart-grid, 10, 7)
@st-chart-axis-y(.y-axis)
@st-chart-axis-x(.x-axis)
</style>

<div class="chart">
  <div class="chart-line line-1"></div>
  <div class="chart-line line-2"></div>
  <div class="chart-line line-3"></div>

  <div class="chart-grid"></div>

  <div class="y-axis">
    <span>0</span><span>20</span><span>40</span>
    <span>60</span><span>80</span><span>100</span>
  </div>
</div>

<div class="x-axis">
  <span>Sun</span><span>Mon</span><span>Tue</span>
  <span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>
</div>

Key Concept

Multi-line charts use one renderer + multiple datasets — not multiple renderers.

Each line element overrides its own data independently:

.line-2 {
  @st-chart-points(10, 20, 16, 15, 66, 50, 80, 54)
}

The single @st-chart-line renderer reads whichever --st-p* variables are scoped to that element. Clean, predictable, composable.

Built-in Mixins

Mixin	Output
`@st-chart-line`	Line renderer
`@st-chart-fill`	Area chart fill
`@st-chart-dot`	Data point markers
`@st-chart-grid`	Background grid
`@st-chart-axis-x/y`	Axis label layout

All generated at compile time — zero runtime overhead.

Optional: Real-Time Data

To update a chart dynamically, set variables directly on the element:

chart.style.cssText = `
  --st-p1: 40%;
  --st-p2: 75%;
  --st-p3: 60%;
`;

CSS handles the animation automatically. JS passes the data — CSS does the work.

Why This Approach Matters

Zero heavy dependencies.

Native performance — everything runs on the browser's own rendering pipeline.

Declarative data — your data lives in CSS, not in a config object.

Fully customizable — you build the chart style, you're not locked into presets.

Live Demo
→ fscss-ttr.github.io/st-core.fscss/multi-chart

st-core.fscss isn't just a chart library — it's a CSS-powered data visualization system. It turns CSS into a rendering engine and lets developers build charts with structure, not scripts.

MIT Licensed. Explore the repo and try building your own custom chart system.

From Static to Real-Time: Data Viz with st-core.fscss (Pure CSS Charts)

FSCSS tutorial — Mon, 06 Apr 2026 20:01:37 +0000

This is a follow-up to my earlier post (Building a trading dashboard UI with zero JavaScript — just st-core.fscss.)If you haven't read that one, the quick summary: st-core is an FSCSS module that lets you declare chart infrastructure — fills, lines, dots, axes, grids — entirely at the CSS layer. No canvas, no chart library.

That post showed you the static side. This one shows you how to make it live.

The "Aha" Moment

The thing that unlocks st-core for real data viz is understanding what the chart actually is under the hood.

The chart shape IS a clip-path polygon.

When st-core compiles your FSCSS, it generates CSS that reads from a set of custom properties — --st-p1 through --st-p8 — and uses them to construct the polygon coordinates. That's it. So updating the chart at runtime is just:

element.style.cssText = `--st-p1: 40%; --st-p2: 75%; --st-p3: 55%; ...`;

One line. No DOM surgery. No re-render cycle. The CSS transition handles the rest.

The Demo: Expenses Chart

Here's the full chart we're building — an analytics card with a live-updating area chart, a stat card, and a peak-tracking dot.

CodePen demo

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" async></script>
  <style>

    @import((*) from st-core) @st-root() @st-container(body) .wrapper {
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }

    @st-chart-fill(.chart-fill)
    @st-chart-line(.chart-line)
    @st-chart-dot(.chart-dot, 70, 60)
    .chart {
      width: 100%;
      height: 200px;
      border-radius: 20px;
      @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)
    }

    @st-stat-card(.stat-card)
    @st-chart-axis-x(.x-axis)
    @st-chart-axis-y(.y-axis)
    @st-chart-grid(.chart-grid, 10, 7)
    .chart-fill, .chart-line {
      height: 100%;
      transition: clip-path .9s cubic-bezier(.4, 0, .2, 1);
    }

  </style>
</head>
<body>
  <div class="wrapper">

    <div class="stat-card">
      <div class="st-stat-label">TOTAL EXPENSES</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"><span class="tooltip">$405.67</span></div>
      <div class="chart-grid"></div>
      <div class="y-axis">
        <span>0</span><span>10</span><span>20</span><span>30</span>
        <span>40</span><span>50</span><span>60</span><span>70</span>
      </div>
    </div>

    <div class="x-axis days">
      <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span>
      <span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
    </div>

  </div>
</body>
</html>

Directive Breakdown

The chart block

@st-chart-fill(.chart-fill)
@st-chart-line(.chart-line)
@st-chart-dot(.chart-dot, 70, 60)
.chart {
  @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)
}

Directive	What it generates
`@st-chart-fill`	Area fill via `clip-path` polygon, reads `--st-p1..8`
`@st-chart-line`	Stroke-only overlay of the same shape
`@st-chart-dot`	Absolute-positioned peak marker, initial position `(70, 60)`
`@st-chart-points`	Compiles the 8 values into `--st-p1` through `--st-p8`

Support directives

@st-stat-card(.stat-card)        /* label / value / delta slots */
@st-chart-axis-x(.x-axis)        /* wires x-axis label container */
@st-chart-axis-y(.y-axis)        /* wires y-axis label container */
@st-chart-grid(.chart-grid, 10, 7) /* 10 rows × 7 cols grid */

The JS Bridge (19 lines)

This is the entire runtime layer. No chart library, no framework.

const chartFill = document.querySelector(".chart-fill");
const chartLine = document.querySelector(".chart-line");
const chartDot  = document.querySelector(".chart-dot");

// st-core clip-path is top-down, so flip the value
function normalize(n) {
  return (100 - n) + '%';
}

// X positions for the 8 columns
const xStops = ['0%', '14%', '28%', '42%', '57%', '71%', '85%', '100%'];

function update(points) {
  // Set --st-p1..8 directly on the elements
  const vars = points.map((v, i) => `--st-p${i + 1}: ${normalize(v)};`).join(' ');
  chartLine.style.cssText = vars;
  chartFill.style.cssText = vars;

  // Move dot to the peak
  const highest = Math.max(...points);
  const idx = points.indexOf(highest);
  chartDot.style.top  = normalize(highest);
  chartDot.style.left = xStops[idx];
  chartDot.querySelector('.tooltip').textContent = `$${(highest * 5.5).toFixed(2)}`;
}

Call update() with any array of 8 numbers and the chart animates there. That's the whole bridge.

Connecting to Real Data

WebSocket (e.g. financial feed)

const socket = new WebSocket('wss://your-api.com/expenses/stream');

socket.onmessage = (event) => {
  const { daily } = JSON.parse(event.data);
  // daily is an array of 8 values, one per day
  update(daily);
};

REST polling (e.g. every 30 seconds)

async function poll() {
  const res  = await fetch('/api/expenses/weekly');
  const data = await res.json();
  update(data.points); // [20, 45, 33, 60, 27, 51, 38, 44]
}

poll();
setInterval(poll, 30_000);

In both cases your only job is feeding an array of 8 numbers into update(). The CSS does everything else — shape, fill, transition, dot position.

Why `clip-path` Makes This Work

st-core uses clip-path: polygon() which means:

The shape is arbitrary — true area curves, not stepped bars
Transitions are compositor-accelerated — clip-path animates on the GPU, not the main thread
No repaints — changing --st-p* variables doesn't touch the DOM structure at all

The transition declaration is doing a lot of heavy lifting here:

.chart-fill, .chart-line {
  transition: clip-path .9s cubic-bezier(.4, 0, .2, 1);
}

That single line is what makes the chart feel like a live dashboard instead of a static image that gets replaced.

The "Gravy Path": Compiling to Pure CSS

The exec.min.js CDN script is for prototyping and demos. For production — and especially for large-scale projects — you compile your .fscss file down to totally pure, standard CSS.

Two ways to do this:

1. VS Code Extension

Install the FSCSS extension from the VS Code marketplace, and install fscss from npm. It watches your .fscss files and compiles on save — you get instant output CSS right next to your source file. This is the fastest feedback loop for building UIs.

2. FSCSS npm package

npm install -g fscss

fscss "path/to/style.fscss" "path/to/style.css"

More details on that fscss.devtem.org.

The compiled output is 100% standard CSS. No runtime dependency, no JavaScript required for the styles. You ship the .css file and it just works.

Why this matters for large-scale projects

When you're managing a dashboard with dozens of chart components, keeping your chart configuration in .fscss files is a huge advantage:

/* charts/expenses.fscss */
@st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)

/* charts/revenue.fscss */
@st-chart-points(44, 51, 60, 72, 65, 80, 78, 90)

You get a single source of truth for chart shapes, baseline datasets, theming, and responsive behavior — all in .fscss. The compiled CSS is what ships to users. The JS layer stays tiny because it only handles the live variable updates.

The Full Stack, One More Time

.fscss source
  └── compiled via npm
        └── pure CSS output
              ├── clip-path polygon (shape)
              ├── --st-p1..8 variables (data)
              ├── transitions (motion)
              └── stat card / axis / grid layout

Runtime JS (optional, for live data)
  └── update(points[]) → sets --st-p1..8 on elements
        └── CSS transition takes over → smooth animation

The mental model: FSCSS owns the structure and shape. JS owns the numbers. CSS owns the motion.

The core pattern doesn't change for any of these. You're still just feeding --st-p* variables and letting the compiled CSS handle the rest.

fscss.devtem.org

Building a trading dashboard UI with zero JavaScript — just st-core.fscss

FSCSS tutorial — Fri, 03 Apr 2026 01:09:40 +0000

No JS. No SVG. No canvas. Just CSS — and one import.

Here's what that actually looks like in practice.

The problem with dashboard UIs

Every time I need a stats dashboard — chart, bars, stat cards, the whole thing — I end up writing the same boilerplate. CSS variables, clip-path polygons, card layouts. It's not hard, but it's repetitive. And when you're working across multiple projects, copy-pasting that foundation every time gets old fast.

So packaged it.

st-core.fscss is an open source library for FSCSS that gives you a complete trading/stats dashboard design system in a single import. MIT licensed, no dependencies besides the FSCSS runtime or cli.

What you get

A full set of @st-* mixins that each generate a production-ready component:

Mixin	Output
`@st-root()`	Design tokens (colors, radius, spacing) on `:root`
`@st-stat-card`	Stat card — label, value, up/down delta
`@st-chart-fill`	Gradient area fill under a chart line
`@st-chart-line`	Glowing line stroke
`@st-chart-dot`	Positioned data point with tooltip support
`@st-chart-grid`	Background grid lines
`@st-chart-axis-x/y`	Axis label rows
`@st-chart-points`	Inject 8 data values into a chart
`@st-cat-bar-fill`	Gradient progress bar fill
`@st-phone`	Mock phone/device frame

How the chart works — pure CSS, no JS

This is the interesting part. The chart is a clip-path: polygon() shape.

You pass 8 Y values to @st-chart-points, which writes them as CSS custom properties — --st-p1 through --st-p8 — on your chart container. The fill and line elements inside read those values and clip themselves accordingly.

.chart {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--st-surface);

  /* your 8 data points */
  @st-chart-points(20, 35, 33, 30, 48, 35, 66, 37)
}

That's it. No JS. No SVG path calculations. The "line" is a thin filled polygon with two rows of points — the front edge and the back edge — separated by --st-chart-line-width. Change the width, the line redraws.

.chart-line {
  @st-chart-line-width(2px)
}

A minimal full example

demo using runtime

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

<style>
@import((*) from st-core)

/* ================= INIT ================= */

@st-root()
@st-container(body)

/* ================= COMPONENTS ================= */

@st-chart-fill(.chart-fill)
@st-chart-line(.chart-line)
@st-chart-dot(.chart-dot, 70, 60)

/* ================= CHART ================= */

.chart{
  width: 100%;
  height: 200px;
  border-radius: 25px;
  position: relative;
  overflow: hidden;

  background: var(--st-surface);

  /*  DATA (main power) */
  @st-chart-points(20,25,21,37,30,60,27,50)
}
@st-phone(.wrapper)
/* ================= LINE ================= */

.chart-line{
  /* controlled via helper */
  @st-chart-line-width(2px);

  /* optional override */
  filter: drop-shadow(0 0 8px var(--st-accent));
}

/* ================= FILL ================= */

.chart-fill{
  /* enhance fill visibility */
  opacity: .85;
}

/* ================= DOT ================= */

.chart-dot{
  position: relative;
  overflow: visible;

  /*  local customization */
  --st-accent: #c4a8ff; /* overrides root accent just for dot */
}

/* tooltip */
.chart-dot:after{
  content: attr(data-point);
  background: var(--st-accent);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border-radius: var(--st-radius-sm);
  position: absolute;
  top: -40px;
  left: -22px;
  white-space: nowrap;
}

/* arrow */
.chart-dot:before{
  content: '';
  width: 10px;
  height: 10px;
  background: var(--st-accent);
  transform: rotate(45deg);
  position: absolute;
  top: -18px;
  left: 2px;
}

/* ================= EXTRA (USING st-core IDEA) ================= */


@st-stat-card(.stat-card)
@st-chart-axis-x(.x-axis)
@st-chart-axis-y(.y-axis)



@st-chart-grid(.chart-grid, 10, 7)
</style>
<div class="wrapper">
    <div class="stat-card">
    <div class="st-stat-label">TOTAL EXPENSES</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="$405.67"></div>
  <div class="chart-grid"></div>
   <div class="y-axis">
   <span>0</span>
   <span>10</span>
   <span>20</span>
   <span>30</span>
   <span>40</span>
   <span>50</span>
   <span>60</span>
   <span>70</span>
   <span>80</span>
   <span>90</span>
   <span>100</span>
 </div>
  </div>
        <div class="x-axis days">
      <span>Sun</span>
      <span>Mon</span>
      <span>Tue</span>
      <span>Wed</span>
      <span>Thu</span>
      <span>Fri</span>
      <span>Sat</span>
      <span>Sun</span>
    </div>

  </div>

A full chart with a stat card and axis labels. That's the entire CSS. No custom polygon math, no JavaScript data binding.

Token overrides — it's just CSS variables

All the colors, spacing, and radii are CSS custom properties. Override any of them locally — they cascade normally.

/* global theme tweak */
:root {
  --st-accent: #00d4ff;
  --st-bg: #0a0f1e;
}

/* local override — just for the dot */
.chart-dot {
  --st-accent: var(--st-accent-2);
}

Multiple charts on the same page? Each container has its own --st-p1–--st-p8, so they're fully independent.

Category bars

The @st-cat-bar-fill mixin builds a gradient progress bar. You set the fill per element using a CSS variable — no extra params needed once the mixin is declared.

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

/* per-bar widths */
.equities { --st-cat-bar-fill-range: 82%; }
.crypto   { --st-cat-bar-fill-range: 61%; }
.forex    { --st-cat-bar-fill-range: 45%; }

<div class="bar-track">
  <div class="bar-fill equities"></div>
</div>

See it live

Live demo

GitHub — fscss-ttr/st-core.fscss (MIT)

FSCSS NPM (MIT)

The full demo includes stat cards, a chart with fill + line + dot + grid + axes, category bars, and a phone frame — all driven by @st-* mixins with no custom CSS beyond the mixin calls themselves.

Why FSCSS?

FSCSS is a lightweight modern CSS preprocessor.

If you're unfamiliar with FSCSS, the docs are a good starting point.

Drop a ⭐ on the repo if it's useful, and feel free to open issues or PRs — it's MIT, go wild.

Build a 360 Starburst Animation Using FSCSS

FSCSS tutorial — Mon, 30 Mar 2026 11:47:29 +0000

Traditional CSS struggles when you need to generate hundreds of repeated elements with dynamic transformations.

With FSCSS, you can do this elegantly using arrays, loops, and computed values — all inside your styles.

In this guide, we’ll build a 360-degree radial starburst animation using FSCSS.

What We’re Building

A circular pattern made of 360 elements, each rotated slightly to form a full radial burst.

Each ray ends with a small geometric shape, creating a complex animated structure.

HTML

<div class="box"></div>

JavaScript (Generate 360 Elements)

const box = document.querySelector(".box");

for (let i = 0; i < 360; i++) {
  const star = document.createElement("div");
  star.className = "star";
  box.appendChild(star);
}

Instead of writing 360 elements manually, JavaScript handles it.

FSCSS Code

@import((*) from snake_case)
@import((*) from themes)
@import((flex-wrap-center as flex_wrap) from flex-control)

body {
  background_color: #233332;
}

.box {
  %2(width, height [: 400px;])
  position: absolute;
  transform_style: preserve-3d;
  @flex_wrap()
}

@arr pos[count(360, 10)]

.box .star:nth-child(@arr.pos[]) {
  $pos: @arr.pos[];

  background: #2FF200;
  padding: 1px;
  width: 100px;
  position: absolute;

  transform_origin: right;
  transform: rotate($pos!deg);
}

.star:before {
  content: " ";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #C800F2;

  top: -8.5px;
  left: -7px;

  transform: rotate(60deg);

  tr Shape: @event.shape(star);
}

$(@keyframes rotate,.star &[360s linear infinite alternate]) {
  to {
    transform: rotate(0);
  }
}

How It Works

1. Array Generation

@arr pos[count(360, 10)]

This creates a sequence:

10, 20, 30 ... 350

Each value is used to rotate an element.

Dynamic nth-child Targeting

.box .star:nth-child(@arr.pos[])

FSCSS maps each array value to a corresponding element automatically.

3. Rotation Per Element

transform: rotate($pos!deg);

Each .star rotates based on its assigned value, forming a full circle.

4. Shape Injection via Event from the imported themes

tr Shape: @event.shape(star);

This dynamically applies a shape transformation, allowing reusable geometric logic.

5. Animation Binding

$(@keyframes rotate,.star &[360s linear infinite alternate])
FSCSS binds animation directly to the selector in one line.

Why This Is Powerful

With FSCSS, you get:

Looping without preprocessors
Dynamic selectors
Inline logic and transformations
Reusable event-driven styling
Zero runtime overhead

Final Result

You now have a fully procedural radial animation, built with:

1 HTML element
1 loop in JavaScript
FSCSS handling all styling logic

codepen demo

https://codepen.io/David-Hux/pen/gbwvqGb

FSCSS changes how you think about CSS.

Instead of writing repetitive rules, you define behavior — and let the system generate the rest.

You can extend this into:

loaders
charts
generative UI
data-driven visuals

Want more like this?

Why kebab-case is Outdated — And How FSCSS Fixes It

FSCSS tutorial — Fri, 27 Mar 2026 18:58:26 +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 is not 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;
}

What Happens Behind the Scenes

Both become:

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

FSCSS maps naming styles directly to valid CSS — no hacks, no runtime overhead.

Why This Is a Bigger Deal Than It Looks

1. Your Brain Stops Translating

Camel case uses capital letters to separate words
Snake case uses underscores instead

FSCSS lets you stick to one mental model.

2. Your Stack Becomes Consistent

React / Next.js → use camelCase

Django / APIs → use snake_case

CSS → now matches both

3. Teams Move Faster

No more:

“Wait, what’s the CSS version of this?”

“Is it borderRadius or border-radius again?”

You already know the answer because you’re already using it.

Extend Beyond Naming

FSCSS isn’t just about syntax - it lets you build reusable styling logic:

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

.hero {
  @glassEffect()
}

Now your CSS behaves more like a system.

Learn More

If you want to go deeper into each approach:

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

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

Final Thought

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.

FSCSS @random() - Making CSS Feel Alive

FSCSS tutorial — Wed, 25 Mar 2026 18:59:38 +0000

There was a time when CSS felt… predictable.

Every color was chosen.
Every position was fixed.
Every animation behaved exactly the same—every single time.

Then came FSCSS… and suddenly, randomness became a design tool.

What is `@random()` in FSCSS?

The @random() function in Figured Shorthand Cascading Style Sheets (FSCSS) allows you to generate dynamic, non-deterministic values at runtime.

Instead of hardcoding styles, you let the browser decide—from a list you provide.

color: @random([red, blue, green]);

Each render can produce a different result. Same code, different vibe.

How It Works

@random() accepts an Array of values and randomly selects one.

Numbers

width: @random([100, 200, 300])px;

Colors

background: @random([lightgreen, yellow, orange]);

Transforms

transform: translateX(@random([10, 30, 40, -60])px);

Why This Matters

Traditional CSS is static.
FSCSS introduces controlled randomness.

That opens doors to:

Procedural UI design
Organic-looking animations
Dynamic backgrounds (stars, particles, noise)
Unique user experiences on every load

Real-World Use Cases

Randomized Star Field

.star{
  left: @random([10,20,30,40,50,60,70,80,90])%;
  top: @random([10,20,30,40,50,60,70,80,90])%;
}

Dynamic Button Colors

.btn{
  background: @random([#ff6b6b, #6bcB77, #4d96ff, #ffd93d]);
}

Organic Motion

@keyframes float{
  to{
    transform: translateY(@random([-20, -40, -60])px);
  }
}

Best Practices

Use CDN runtime when working with @random() (it runs in the browser).

Combine with:

@arr → reusable value sets

@define → reusable logic blocks

@event → conditional styling

Avoid overusing randomness in critical UI elements (keep UX predictable where needed).

A Quick Note

Random doesn’t mean chaos.

Good design still needs constraints.
Think of @random() as guided creativity, not pure unpredictability.

Final Thoughts

@random() is one of those features that quietly changes how you think about CSS.

It’s no longer just styling it’s behavior.

And once you start using it…
you’ll wonder why CSS was ever fully static.

Building a Smart Circular Progress with FSCSS + JavaScript (Interactive Demo)

FSCSS tutorial — Tue, 24 Mar 2026 08:47:28 +0000

There’s something oddly satisfying about watching a progress circle fill up.

But most implementations today are either:

heavily JavaScript-driven, or

purely CSS with limited flexibility

So something different.

What if:

JavaScript only controls the value

and FSCSS handles everything visual — including logic?

The result is a small demo… but it reveals a much bigger idea.

What We’re Building

An interactive circular progress that:

updates with a range slider
changes color dynamically based on value
animates smoothly
keeps logic separated between JS and FSCSS

👉 JS = state
👉 FSCSS = styling + logic

Setup

Step 1: Import the Progress

@import((*) from circle-progress)

@progress-root()
@circle-progress(#progress[class^='p-'])

This connects FSCSS to any class like .p-50, .p-80, etc, with id='progress'.

Step 2: Add Dynamic Color Logic

@event range-color(range){
    if range <=10{
        return: #C86433
    }
    el-if range <= 30{
        return: #D69308
    }
    el-if range <= 45{
        return: #A1AC1C
    }
    el-if range <= 60{
        return: #86CA1A
    }
    el-if range <= 80{
        return: #1CAC52
    }
    el-if range <= 95{
        return: #13B046
    }
    el{
        return: #26FF00
    }
}

Instead of hardcoding colors per class, we define a rule system.

Step 3: Generate All Progress States

@arr p-ranges[count(100)]
.p-0{
    $range: 0;
    @progress-range($range)
    --progress-color-glow: @event.range-color($range);
    --progress-color-arc: @event.range-color($range);
}
.p-@arr.p-ranges[]{
    $range: @arr.p-ranges[];
    @progress-range($range)
    --progress-color-glow: @event.range-color($range);
    --progress-color-arc: @event.range-color($range);
}

This generates .p-0 → .p-99 automatically.

No manual classes. No repetition.

Step 4: Add Polish

#progress {
    border-radius: 50%;
    box-shadow: 0 0 20px var(--progress-color-glow);
    transition: all 0.3s ease;
    @progress-animate(4s)
}

Now we have:

glow effect

smooth transitions

animated progress

Step 5: JavaScript (Minimal)

const rangeInp = document.getElementById('range');
const progress = document.getElementById("progress");

rangeInp.addEventListener('input', e=>{
    const percent = Math.min(Math.round(e.target.value), 100);
    progress.className = `p-${percent}`;
    progress.textContent = `${percent}%`;
});

That’s it.

No styling logic in JS.

This demo shows a subtle but important pattern:

Traditional approach:

JS controls everything (state + style)

This approach:

JS → updates value
FSCSS → decides appearance using logic

That means:

cleaner separation
reusable styling logic
less JS complexity

Live Demo

CodePen:

It’s just a demo…

But it hints at something bigger:

CSS is no longer just styling — it can think.

And when you combine that with JavaScript correctly,
you don’t get more complexity…

You get clarity.

FSCSS tutorial Follow

Figured Shorthand Cascading Style Sheet

Turning CSS Into a Smart UI Engine (Without JavaScript)

FSCSS tutorial — Sat, 21 Mar 2026 14:26:19 +0000

Modern UI development keeps pushing toward more dynamic, responsive, and intelligent interfaces. But what if some of that “logic” didn’t need JavaScript at all?

Today, I experimented with something interesting: building a fully dynamic circular progress system where values, colors, and styles are generated and computed directly inside CSS.

No loops in JS. No conditionals in JS.
Everything happens in styling.

⚡ The Goal

Create a circular progress component that:

Supports values from 0 → 100
Automatically generates classes like .p-0, .p-1, .p-2, to p-100
Dynamically changes color based on the value
Feels like a real UI component system

🧩 Setup

FSCSS CDN or it extention + npm

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

@import(exec(_init circle-progress))
@progress-root()
@circle-progress(.progress)

This initializes a reusable circular progress component.

🧠 Adding Logic to Styling

Instead of hardcoding colors, we define a reusable event:

@event range-color(range){

if range<=10{
    return: #ff6b6b;
}

el-if range<=30{
    return: #f7b267;
}

el-if range<=60{
    return: #74c0fc;
}

el-if range<=99{
    return: #63e6be;
}

el{
    return: #38d9a9;
}

}

This acts like a function:

«Input → progress value
Output → corresponding UI color»

🔁 Generating 100 Classes Automatically

Instead of writing ".p-1", ".p-2", ".p-3" manually:

@arr p-ranges[count(100)]

Now we loop through them:

.p-@arr.p-ranges[]{
    $range: @arr.p-ranges[];

    @progress-range($range)

    --progress-color-glow: @event.range-color($range);
    --progress-color-arc: @event.range-color($range);
}

This generates:

.p-1 { ... }
.p-2 { ... }
...
.p-100 { ... }

Automatically.

🎨 Styling

body{
  background: #131213;
}

🧪 Usage

<div class="progress p-10">10</div>
<div class="progress p-30">30</div>
<div class="progress p-55">55</div>
<div class="progress p-89">89</div>
<div class="progress p-100">100</div>

✨ What’s Happening Here?

Each element:

Gets its value from the class ("p-55")
That value is passed into "@progress-range"
The same value is sent into "@event range-color"
The UI updates automatically

So the system becomes:

Class → Value → Logic → Style → UI

💡 Why This Is Interesting

This fscss approach introduces a different way to think about styling:

CSS with Logic

You’re not just styling — you’re deciding behavior

No Repetition

No need to manually define 100 variations

Reusable Patterns

The same "@event" can power multiple components

Component Thinking

Styles start behaving like UI modules

Example

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

<style>

@import(exec(_init circle-progress))
@progress-root()
@circle-progress(.progress)

@event range-color(range){

if range<=10{
    return: #ff6b6b; /* soft red */
}

el-if range<=30{
    return: #f7b267; /* warm orange */
}

el-if range<=60{
    return: #74c0fc; /* light blue */
}

el-if range<=99{
    return: #63e6be; /* soft teal */
}

el{
    return: #38d9a9; /* fresh green */
}

}

body{
  background: #131213;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 20px;
  gap: 15px;
}
@arr p-ranges[count(100)]

.p-0 {
    @progress-range(0) 
    --progress-color-glow: @event.range-color(0);
    --progress-color-arc: @event.range-color(0); 
}

.p-@arr.p-ranges[]{
    $range: @arr.p-ranges[];
    @progress-range($range) 
    --progress-color-glow: @event.range-color($range);
    --progress-color-arc: @event.range-color($range); 
}


</style>

<div class="progress p-10">10</div>
<div class="progress p-30">30</div>
<div class="progress p-55">55</div>
<div class="progress p-89">89</div>
<div class="progress p-100">100</div>

🔥 Real Use Cases

This pattern can be extended to:

Skill meters
File upload progress
Health/status indicators
Dashboard analytics
Gamification systems

We usually separate logic (JavaScript) and styling (CSS).
But this shows something interesting:

Styling itself can become expressive enough to handle structured logic.

🔥 CSS Generate Random UI Boxes (FSCSS)

FSCSS tutorial — Fri, 20 Mar 2026 10:01:16 +0000

I just hit a fscss fun milestone… It can generate dynamic UI styles using arrays, functions, and a bit of randomness. 😅

⚡ Example

@arr spacing[
    count(5,1)
]

@arr indexes[
    count(5)
]

$m-spacing: @arr.spacing!;

@define boxes(){`
.box-@arr.indexes[]{
  $i: @arr.indexes[];

  background: #2c5364;
  margin: $spacing[$i]px;

  %2(width, height [: num($m-spacing.randint * 20)px;])
}
`}

@boxes()

🤯 What This Does

Generates classes: Creates .box-1 through .box-5 automatically.
Unique Attributes: Each box receives a different margin and a random width/height.
Zero JS: Purely compiled via FSCSS logic.

The Magic

$m-spacing.randint: Picks a random value from the defined array.
num(... )px: Handles safe mathematical calculations for units.
%2(width, height [...]): A shorthand to assign the same generated value to multiple properties simultaneously.

Why This Matters

Instead of writing repetitive, hard-coded CSS, you describe the rules and let FSCSS handle the heavy lifting. It brings programmatic logic to styling without the overhead of a runtime library.
Bonus (Layout)

.container {
  @flex-responsive(20px)
}

The Full Implementation

If this looks interesting, I might share more! Here is a look at a full implementation involving color arrays and responsive containers:

@import((flex-responsive) from flex-control)

$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-family: 'Arial', sans-serif;
$colors: @arr.colors;
$m-colors: @arr.colors!;
$spacing: @arr.spacing;
$m-spacing: @arr.spacing!;
$num-ranges: 5,0.2;

@arr colors[
    #2c5364, 
    #1E2783, 
    #555111,
    #EECDA3, 
    #EF629F,
]

@arr spacing[
    count(5,1)
] 

@arr indexes[
    count(5)
]

body {
    font-family: $font-family;
    max-width: 100vw;
    min-height: 100vh;
    overflow-x: hidden;
    overflow-y: auto;
}

@define color-box-base(){`
.color-@arr.indexes[]{
    $i: @arr.indexes[];
    background-color: $colors[$i];
    margin: $spacing[$i]px;
    border: 2px solid $m-colors.randint;
    %2(width, height [: num($m-spacing.randint * 20)px;])
}
`} 

.container {
    @flex-responsive(20px)
}

@color-box-base()

fscss highlight looks better on vscode

What do you think?

🚀 FSCSS Extension for VS Code is Now Live

FSCSS tutorial — Tue, 17 Mar 2026 00:39:07 +0000

I'm excited to announce that the FSCSS Support extension for VS Code is now available on the Visual Studio Marketplace!

Making developer experience smoother inside VS Code.

The extension provides syntax highlighting and tooling for .fscss files.

Install the Extension

You can install it directly from the marketplace:

https://marketplace.visualstudio.com/items?itemName=Figsh.fscss

Or search “FSCSS” inside VS Code extensions.

✨ Features

The extension currently includes:

FSCSS syntax highlighting
Support for .fscss and .xfscss files
FSCSS snippets
Custom language icon
Grammar support for the FSCSS syntax

This makes it easier to write and explore FSCSS directly in VS Code.

What is FSCSS?

FSCSS (Figured Shorthand Cascading Style Sheets) is a CSS-inspired system designed to make stylesheets shorter, more expressive, and more programmable.

Example:

@define button(){
  padding: 10px;
  background: blue;
  color: white;
}

.btn{
  @button()
}

Project Repository

The extension source code is available here:

https://github.com/Figsh/fscss-vscode-extension

Feel free to explore, suggest improvements, or contribute.

What's Next?

Future improvements may include:

IntelliSense for FSCSS functions
auto-completion
FSCSS → CSS compile helpers
improved syntax rules

If you try the extension, I'd love to hear your feedback.

Happy coding!

🚀 Auto-Compile FSCSS to CSS with GitHub Actions + GitHub Pages

FSCSS tutorial — Mon, 16 Mar 2026 10:37:53 +0000

When working with FSCSS, it’s useful to have your styles compiled automatically whenever you push changes. In this guide, we’ll set up a workflow that:

• Compiles .fscss → .css automatically
• Commits the compiled CSS
• Deploys a demo page with GitHub Pages

The result is a simple CI/CD pipeline for your styles.

You can see the complete example repository here:

👉 https://github.com/fscss-ttr/clipfscss

Live demo:

👉 https://fscss-ttr.github.io/clipfscss/demo

Project Structure

Here’s the structure used in the example project.

repo/
│
├── .github/workflows
│   ├── compile.yml
│   └── pages.yml
│
├── src/
│   └── style.fscss
│
├── dist/
│   └── f.css
│
├── demo/
│   └── index.html
│
├── package.json
└── package-lock.json

Explanation

"src/" → FSCSS source files
"dist/" → compiled CSS output
"demo/" → static example page
".github/workflows/" → automation scripts

Install FSCSS

Install via npm.

npm install -g fscss

Your package.json should look like this:

{
  "dependencies": {
    "fscss": "^1.1.17"
  },
  "scripts": {
    "build:css": "fscss src/style.fscss dist/f.css"
  }
}

Now you can compile locally:

npm run build:css

Setup GitHub Action

Create:

.github/workflows/compile.yml

name: Compile FSCSS

on:
  push:
    paths:
      - "**.fscss"

permissions:
  contents: write

jobs:
  build-css:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v4
        with:
          persist-credentials: true

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: 22

      - name: Install dependencies
        run: npm install

      - name: Compile FSCSS
        run: npm run build:css

      - name: Commit compiled CSS
        run: |
          git config user.name "github-actions"
          git config user.email "github-actions@github.com"
          git add dist/f.css
          git commit -m "Auto compile FSCSS" || echo "No changes"
          git push

What happens here?

push .fscss
↓
GitHub Action runs
↓
FSCSS compiles
↓
dist/f.css updated
↓
CSS committed automatically

Deploy the Demo with GitHub Pages

Create another workflow:

.github/workflows/pages.yml

name: Deploy static site

on:
  push:
    branches: ["main"]

permissions:
  contents: read
  pages: write
  id-token: write

jobs:
  deploy:
    runs-on: ubuntu-latest

    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}

    steps:
      - uses: actions/checkout@v4

      - uses: actions/configure-pages@v5

      - uses: actions/upload-pages-artifact@v3
        with:
          path: .

      - id: deployment
        uses: actions/deploy-pages@v4

Now every push will automatically update your GitHub Pages site.

Using the CSS

Example HTML:

<link rel="stylesheet" href="../dist/f.css">

Your demo page will load the compiled CSS generated by the workflow.

Why This Setup Is Useful

This setup provides:

✔ automatic FSCSS compilation
✔ CI/CD integration
✔ clean project structure
✔ automatic demo deployment

It’s a simple but powerful workflow for projects using FSCSS.

Full Example Repository

If you'd like to see everything working together, check out the example

Repository:
https://github.com/fscss-ttr/clipfscss

Forem: FSCSS tutorial

Using st-core.fscss with React & Next.js

1. Install the FSCSS CLI

2. Create Your Stylesheet

3. Compile to CSS

4. Import Into Your Component

5. Normalizing Data Points

Key Considerations for Next.js

Advanced CSS Charts with st-core.fscss (Multi-Line, Grid, Axis — No JS Required)

From Static to Real-Time: Data Viz with st-core.fscss (Pure CSS Charts)

The "Aha" Moment

The Demo: Expenses Chart

CodePen demo

Directive Breakdown

The chart block

Support directives

The JS Bridge (19 lines)

Connecting to Real Data

WebSocket (e.g. financial feed)

REST polling (e.g. every 30 seconds)

Why clip-path Makes This Work

The "Gravy Path": Compiling to Pure CSS

1. VS Code Extension

2. FSCSS npm package

Why this matters for large-scale projects

The Full Stack, One More Time

Building a trading dashboard UI with zero JavaScript — just st-core.fscss

The problem with dashboard UIs

What you get

How the chart works — pure CSS, no JS

A minimal full example

Token overrides — it's just CSS variables

Category bars

See it live

Why FSCSS?

Build a 360 Starburst Animation Using FSCSS

What We’re Building

HTML

JavaScript (Generate 360 Elements)

FSCSS Code

How It Works

1. Array Generation

3. Rotation Per Element

4. Shape Injection via Event from the imported themes

5. Animation Binding

Why This Is Powerful

codepen demo

Why kebab-case is Outdated — And How FSCSS Fixes It

The Real Problem: Context Switching

FSCSS Changes the Rule

Write CSS Like Your Actual Code

What Happens Behind the Scenes

Why This Is a Bigger Deal Than It Looks

1. Your Brain Stops Translating

2. Your Stack Becomes Consistent

3. Teams Move Faster

Extend Beyond Naming

Learn More

Final Thought

FSCSS @random() - Making CSS Feel Alive

What is @random() in FSCSS?

How It Works

Why This Matters

That opens doors to:

Real-World Use Cases

Best Practices

A Quick Note

Final Thoughts

Building a Smart Circular Progress with FSCSS + JavaScript (Interactive Demo)

What We’re Building

Setup

Step 1: Import the Progress

Step 2: Add Dynamic Color Logic

Step 3: Generate All Progress States

Step 4: Add Polish

Step 5: JavaScript (Minimal)

Live Demo

FSCSS tutorial Follow

Turning CSS Into a Smart UI Engine (Without JavaScript)

⚡ The Goal

Why `clip-path` Makes This Work

What is `@random()` in FSCSS?