Pure CSS budget UI: two phones, one chart with st-core.fscss
The Figma design in pure CSS
A mobile Home + Budget template for st-core@v2: dual phone frames, card carousel, finance shortcuts, loans, and a spend chart drawn with clip-path + CSS variables.
Live preview: hub.devtem.org/st-core.fscss/templates/budget-app/
Source: templates/budget-app
What’s in it
| Layer | Role |
|---|---|
| st-core@v2 | Tokens, phone shell helpers, area/line chart from @arr budgetData |
| icon-mask | Nav, menu, search, finance icons |
| Compiled CSS | Preview ships plain CSS — no FSCSS runtime required |
HTML stays light: two .phone blocks, a chart stack (grid / fill / line / dot), and a transaction list. Data for the series is an FSCSS array
Try it
git clone https://github.com/fscss-ttr/st-core.fscss.git cd st-core.fscss/templates/budget-app # open index.html with budget.css linked # or recompile: fscss budget.fscss budget.css Same as the admin-dashboard template