Most chart libraries hand you a JavaScript API and a bundle size to worry about. st-core.fscss takes a different route: it's a set of FSCSS mixins that compile straight to CSS, no JavaScript required to render a chart, a stat card, or a progress bar.
It's open source, and the whole thing lives in one readable source file.
What it can do right now
st-core.fscss covers the pieces you'd actually reach for on a dashboard or analytics screen:
-
Line and area charts, drawn with
clip-path: polygon()against eight data points - Data dots placed along the line, generated automatically from an array so you don't write eight separate rules by hand
- A background grid and axis labels, sized to match your data
- Stat cards, with label, value, and an up/down delta built in
- Progress bars, driven by a single custom property so the fill can be updated later without touching the markup
- A device-frame container, if you want the whole thing to look like it's sitting inside a phone mockup
Everything reads from one shared design-token set, colors, radii, spacing, chart defaults, so a single st-root() call at the top of your stylesheet themes the whole kit.
Why it's built this way
Every piece is a plain @define mixin. Call st-chart-points(68, 59, 70, 35, 58, 22, 42, 55) with your real numbers, call st-chart-line() and st-chart-fill(), and you have a working chart, no chart.js, no canvas, no re-render logic. Update the data later by calling st-chart-points() again with new numbers, and every dot, line, and fill shifts to match.
That's the appeal for a dev workflow: you're writing CSS-shaped code the whole time. Nothing to import beyond FSCSS itself, nothing to configure beyond the parameters you pass.
Syntax highlighting
If @define, @use(), and @arr look unfamiliar in an editor with no idea what FSCSS is, the FSCSS VS Code extension fixes that. It adds proper syntax highlighting and snippets for FSCSS files, so reading or writing st-core.fscss mixins looks like reading CSS, not a wall of unhighlighted text. Worth installing before you open the source for the first time.
Where to start
The repo itself is short enough to read start to finish in one sitting, and there's a companion explainer walking through what every mixin does and why, mixin by mixin, if you'd rather understand the mechanics before you start calling them. Both beginners picking up FSCSS for the first time and developers who already know the compiler should be able to get a chart on screen within a few minutes either way.
Top comments (0)