> A zero-dependency page engine in plain HTML, CSS and JS. 7 templates, live theming, pricing, FAQ, stats and a mobile drawer from a single config. Full reference included Every landing page I built started the same way: nav, hero, feature cards, pr...

FSCSS layout helpers: stack, hstack, center, size, rounded, ratio-fit, and friends From version 1.2.5 FSCSS added a set of property shorthands aimed at everyday layout and chrome—spacing axes, flex stacks, sizing, and aspect boxes—without inventing ...

Multi-file FSCSS in the browser — compile, preview, enable packages, export plain CSS. No install required. Open fscss.devtem.org/idehttps://fscss.devtem.org/ide and work. What it is The FSCSS IDE is a single-page workspace for Figured Shorthand ...

Most radar charts pull in SVG path math or a JavaScript charting library. You can skip both. With st-core.fscss, a spider radar chart is: an FSCSS array of scores 0–100 polar coordinates stored as CSS variables --st-sxN, --st-syN shapes drawn wit...

Build avatar stacks, notification piles, image strips, and radial menus with a token-driven CSS architecture—rest vs open states, no JavaScript for the interaction—using the overlapui FSCSS module. Reference: overlapui.fscsshttps://github.com/fscss-...

A new FSCSS release. This one's aimed at the pairs everyone keeps typing out by hand: / before / width: 32px; height: 32px; / after / size: 32px; Same deal for the other repeat offenders: .card { px: 16px; / padding-left + padding-right /...

This snippet builds a stepped “processing 0% → 99% → done” animation by looping an array into @keyframes percentages — not a JS timer. Setup 1. npm install -g fscss@latest 2. VS Code: FSCSS language support FSCSS Supporthttps://marketplace.visuals...

st-core.fscss draws charts with pure CSS, clip-path polygons plus custom properties, no JS chart library, no SVG, no canvas. Svelte doesn't need to draw anything for it. It just needs to own the data and reactively set --st-p1, --st-p2, and so on whe...

For a while, st-core.fscss charts had one annoying limit: every line, fill, and dot was locked to exactly 8 data points. --st-p1 through --st-p8, hardcoded. Want to plot 12 weeks of revenue? Tough. Want 5 points for a quick demo? You'd pad the array ...

Circular progress, pie charts, and step rings usually mean SVG path math or a chart library. circle-progress.fscss does it with pure CSS — conic-gradient, masks, and FSCSS @define helpers. Repo: Figsh/Circle-progress.fscsshttps://github.com/Figsh/...

Open-source template: github.com/Figsh/dashboard-projecthttps://github.com/Figsh/dashboard-project Most dashboard tutorials start the same way: pull in 40–150 KB of JavaScript, wait for hydration, and hope search engines eventually see the chart. W...

FSCSS is open source, built in the open, and free for anyone to use, extend, or pick apart. That's the whole point of it. Every release is meant to make it easier for other developers to build with, not harder. v1.2.0 is the clearest example of that ...

I got tired of updating chart screenshots in READMEs by hand. Either the numbers were stale, or I’d regenerate an image, commit it, and forget the next week. For docs and GitHub READMEs I don’t need a full chart library on the page — I need a vector...

Understanding exec in FSCSS In FSCSS, exec serves two completely different purposes depending on where you write it: 1. Inside your stylesheet: as a utility / debugging function 2. In JavaScript / HTML: to load and compile the styles Let’s brea...

Charts without the JS tax. Most charting libraries force a trade-off: You get beautiful interactive charts …but you also ship 40–150 kb of JavaScript …and the chart only appears after JS executes …and search engines often struggle to see t...