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: