Build a Studio UI with three FSCSS modules

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).