순수 CSS 예산 UI: 휴대폰 2개, st-core.fscss가 있는 차트 1개

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.

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

Enter fullscreen mode Exit fullscreen mode

Same as the admin-dashboard template

FSCSS