Posts by Figsh
@Figsh
Ekuyik Sam
Full-stack web developer | open-source contributor | JavaScript programming
Posts by Figsh
> 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...
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 ...
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 ...
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...
CSS naming hasn't evolved.
Everything else in development has — JavaScript, Python, APIs — but CSS is still stuck in:
background-color: #111;
border-radius: 8px;
Hyphens. Everywhere.
Meanwhile, the rest of your stack uses:
camelCase JavaScript
...
One thing about FSCSS is that you can define your own functions… inside your styles. Here’s a simple example of how that works.
Custom randint Function
@define randintarray{
@random@usearray
}
What this function does:
Takes an array as an arg...
chevron_left