A small app shell: sidebar, top bar, goal rings, and cards, composed from existing modules.
Modules
- customizable.fscss: tokens, badge, buttons, feature cards
- icon-mask.fscss: CSS-mask icons
- circle-progress.fscss: CSS rings + steps
Runtime
<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.1/runtime.min.js" defer></script>
<link type="fscss" href="./style.css">
Import
style.css
@import((*) from customizable)
@import((*) from icon-mask)
@import((*) from circle-progress)
@page-root()
@icon-pack()
@progress-root()
@circle-progress(.progress-circle)
Wire nav with page-btn, sidebar with icon-home / icon-chart / …, goals with @progress-range(72) (and friends). One accent token keeps buttons, icons, and rings aligned.
Live demo
Mobile: drawer sidebar under ~860px (menu button + backdrop).
That’s the whole pattern - import modules, map classes, ship plain CSS when you’re ready (fscss CLI).
