Build an analytics shell without a chart library — st-core@v2 for the revenue line, circle-progress for traffic, icon-mask for nav icons. Markup stays plain HTML; styles are CSS (compiled FSCSS); a small script only updates CSS variables.
Live preview: hub.devtem.org/st-core.fscss/templates/admin-dashboard/
Source: github.com/fscss-ttr/st-core.fscss → templates/admin-dashboard/
What’s in the box
| Piece | Job |
|---|---|
| st-core@v2 | Tokens, area/line chart via clip-path + --st-pN
|
| circle-progress | Multi-slice traffic pie |
| icon-mask | Sidebar / toolbar icons |
| dashboard.js | Mobile drawer, profile menu, range tabs → variables |
Layout: sticky sidebar, stat cards, revenue chart (7d / 30d / 90d), goals, messages, activity, sales table — responsive under 1100px (off-canvas nav + swipe).
File split
templates/admin-dashboard/
├── index.html
├── dashboard.fscss # source
├── dashboard.css # CLI output (CI can compile this)
├── dashboard.js
└── README.md
Production path: compile FSCSS once, ship CSS + HTML + JS. No chart runtime in the browser.
npm install -g fscss@1.2.4
fscss dashboard.fscss dashboard.css
Then link dashboard.css
Chart idea in one line
FSCSS builds polygon geometry from an [Array](https://fscss.devtem.org/arrays). JS only writes:
--st-p1: 58%; /* 100 - humanValue */
Same pattern as the Svelte integration: framework or vanilla owns data; CSS paints.
CI
.github/workflows/compile-templates.yml installs FSCSS, compiles dashboard.fscss, and can commit dashboard.css on main so the hub preview stays on static CSS.
Try it
- Open the preview.
- Clone st-core.fscss, open
templates/admin-dashboard/. - Swap data in
dashboard.jsor restyle tokens indashboard.fscss.
React/Next variants can reuse the same compile step and only map props > --st-pN.
Top comments (0)