DEV Community: FSCSS tutorial

Build a Stunning Developer Portfolio in Minutes with devtemDesign

FSCSS tutorial — Tue, 23 Jun 2026 09:15:18 +0000

A step-by-step tutorial on building an animated, glassmorphic developer portfolio using the devtemDesign declarative page engine — zero boilerplate, one JS call.

Most developer portfolios take hours to set up. You pick a template, fight with CSS, tweak the layout, and eventually settle for something that looks like every other portfolio on the internet.

What if you could describe your portfolio as a config object and have a JavaScript engine paint the whole thing for you — animated, glassmorphic, responsive?

That's exactly what devtemDesign does.

In this tutorial, we'll build a complete developer portfolio from scratch using devtemDesign@0.0.2. By the end, you'll have a live, production-ready portfolio page — and you'll understand every config option that powers it.

What is devtemDesign?

devtemDesign is a lightweight, declarative page engine. You call one function with a config object, and it renders a full animated page: hero section, navbar, feature grid, info panels, footer — all of it.

No build tools. No framework. Just a CDN import and a JS object.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/style.css">
<script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/script.js"></script>

It ships four built-in themes:

Template	Vibe
`figsh`	Futuristic glassmorphism — cyan / purple / pink
`cyber`	Neon cyberpunk — cyan / magenta / red
`aurora`	Organic nature — emerald / violet / blue
`monochrome`	Minimalist grayscale

Step 1 — The HTML shell

The entire page lives inside one div. That's it.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Your Name — Developer Portfolio</title>

  <!-- devtemDesign -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/style.css">
  <script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/script.js"></script>

  <!-- Font Awesome (needed for icons) -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
  <div id="app"></div>
  <script src="portfolio.js"></script>
</body>
</html>

Font Awesome is required — devtemDesign uses it for feature icons, social links, and CTA buttons.

Step 2 — Initialize the engine

In portfolio.js, call devtemDesign() with your container ID and config:

devtemDesign("app", {
  template: "figsh",
  logoName: "YOUR NAME",
  // ... rest of config
});

The first argument is the container element's id. The second is your full config object. Let's build it section by section.

Step 3 — Core + Navigation

devtemDesign("app", {
  template: "figsh",        // pick your theme
  logoName: "YOUR BRAND",   // shows in navbar & footer

  navLinks: [
    { label: "About",    href: "#about"    },
    { label: "Projects", href: "#projects" },
    { label: "Skills",   href: "#skills"   },
    { label: "Contact",  href: "#contact"  }
  ],
  ctaText: "<i class='fab fa-github'></i> GitHub",
});

navLinks accepts plain strings ("About") or objects with { label, href }. The ctaText field supports HTML, so you can embed Font Awesome icons directly.

Step 4 — Hero section

The hero is the first thing visitors see. Fill it with clarity and confidence:

heroTag: "fullstack developer · builder · creator",
heroTitleLine1: "Building the",
heroTitleLine2: "Web's Future",
heroSubtitle: "I'm [Your Name] — I build platforms, tools, and open-source projects that help developers ship faster.",
primaryBtnText: "<i class='fas fa-rocket'></i> My Work",
secondaryBtnText: "Read More →",

heroTitleLine1 and heroTitleLine2 split into two animated lines — the engine handles the styling. Keep them short and punchy.

Step 5 — Brands ticker

The scrolling ticker below the hero is great for showing your tech stack:

brands: ["React", "Node.js", "Supabase", "Netlify", "Cloudflare", "PostgreSQL"],
brandsSubtitle: "technologies & platforms I work with daily",

Pass any strings — tool names, frameworks, platforms. The engine animates them as a continuous marquee.

Step 6 — Feature cards (Projects)

Each features entry renders as a glassmorphic card. Use them for your best projects:

featuresSectionLabel: "<i class='fas fa-layer-group'></i> &nbsp; FEATURED PROJECTS",
featuresSectionTitle: "Things I've Built",

features: [
  {
    title: "Project Alpha",
    desc: "A brief description. What problem does it solve? What's the tech stack?",
    icon: "<i class='fas fa-store'></i>"
  },
  {
    title: "Project Beta",
    desc: "Explain the key challenge and how you solved it. Mention notable outcomes.",
    icon: "<i class='fas fa-code'></i>"
  },
  {
    title: "Project Gamma",
    desc: "Is it open source? A commercial product? Include a metric if you have one.",
    icon: "<i class='fas fa-chart-bar'></i>"
  }
  // add up to 6 for a clean 3-column grid
],

Icons are raw HTML strings — any Font Awesome icon class works here.

Step 7 — Panels (About / Context blocks)

Panels are wider info blocks, great for explaining your professional angle:

panels: [
  {
    tag: "Fullstack",
    title: "End-to-End Development",
    desc: "From database schema to polished frontends — I own the whole stack."
  },
  {
    tag: "Open Source",
    title: "Building in Public",
    desc: "I contribute to open-source, write technical articles, and document everything."
  },
  {
    tag: "Creator",
    title: "Products & Templates",
    desc: "I create and sell UI kits, templates, and dev tools for fellow developers."
  }
],

The tag renders as a small label chip above the title. Use it for categories or keywords.

Step 8 — Footer

The v0.0.2 footer is fully declarative with link columns, social icons, and legal links:

footer: {
  tagline: "Fullstack developer · Open source creator · Problem solver.",
  copy: "© 2025 Your Name · Built with devtemDesign",

  columns: [
    {
      heading: "Platforms",
      links: [
        { label: "My App",   href: "https://yourapp.com"  },
        { label: "npm",      href: "https://npmjs.com"    }
      ]
    },
    {
      heading: "Writing",
      links: [
        { label: "dev.to",   href: "https://dev.to"       },
        { label: "LinkedIn", href: "https://linkedin.com" }
      ]
    },
    {
      heading: "Code",
      links: [
        { label: "GitHub",   href: "https://github.com"   }
      ]
    }
  ],

  social: [
    { icon: "fab fa-github",   href: "https://github.com",   label: "GitHub"   },
    { icon: "fab fa-linkedin", href: "https://linkedin.com", label: "LinkedIn" },
    { icon: "fab fa-dev",      href: "https://dev.to",       label: "dev.to"   },
    { icon: "fab fa-npm",      href: "https://npmjs.com",    label: "npm"      },
    { icon: "fab fa-codepen",  href: "https://codepen.io",   label: "CodePen"  }
  ],

  legal: [
    { label: "MIT License", href: "#" }
  ]
}

Step 9 — Optional: Custom accent colors

All visual variables are CSS custom properties. Override them after including the engine stylesheet:

<style>
  :root {
    --accent:    #ff7b2c;  /* primary accent   */
    --accent2:   #ff2c7b;  /* secondary accent */
    --glass-bg:  rgba(20, 20, 40, 0.5);
  }
</style>

This lets you brand the page without touching the engine internals.

The full config at a glance

Here's the complete template — copy it, fill in your details, and you're done:

What you just built

In a single JS config object you defined:

Animated navbar with CTA
Full hero with tag, two-line title, subtitle, and dual buttons
Scrolling tech stack ticker
6-card project grid with custom icons
3 contextual panels
Structured footer with columns, social links, and legal

Zero boilerplate. No bundler. No framework.

Resources

npm: npm i devtemdesign
Docs: design.devtem.org/docs
Live demo: design.devtem.org
GitHub: github.com/devtem-dev/devtemDesign
DevTemple: @devtemDesign

If you build a portfolio with devtemDesign, drop the link in the comments — I'd love to see what you make with it.

building a declarative animated page engine — one config object, full UI

FSCSS tutorial — Sat, 06 Jun 2026 09:51:06 +0000

I got tired of writing the same boilerplate — nav, hero, orbs, cursor, footer — every time I started a new landing page. So I built a tool that removes all of it.

devtemDesign is a zero-dependency, zero-bundler page engine. You pass it a config object. It renders a full animated page — glassmorphism nav, ambient orb backgrounds, magnetic cursor, features grid, marquee ticker, and a professional multi-column footer. Everything.

devtemDesign("app-root", {
  template: "cyber",
  logoName: "MYAPP",
  heroTitleLine1: "Ship faster",
  heroTitleLine2: "with less code",
  features: [
    { title: "Zero Config", desc: "Pass JSON, get a page.", icon: "⚡" }
  ]
});

That's it. That's the whole setup.

What it renders

Fixed glass navbar — with logo, nav links (string or { label, href } objects), and a CTA button. Animates in on load.
Mobile hamburger menu — animated open/close drawer, auto-closes on link tap.
Full-viewport hero — H1 with gradient word, eyebrow tag, subtitle, two CTA buttons, optional brand chips.
Brand marquee ticker — infinite scroll loop, auto-populated from your brands array.
Features grid — auto-fit responsive card layout with scroll-reveal animations.
Panels section — numbered content blocks for secondary features or use-cases.
Declarable footer — multi-column link layout, social icon buttons, legal strip, tagline. All from config.
Ambient orbs — four drifting radial gradients in the background layer.
Custom cursor + ripple — magnetic dot + ring cursor, click ripples. Hides on touch devices automatically.

Four built-in templates

Switch themes with a single token:

// "figsh" | "cyber" | "aurora" | "monochrome"
devtemDesign("app-root", { template: "aurora", ... });

Each template injects a complete set of CSS custom properties onto :root:

Token	Vibe
`figsh`	Futuristic glass — cyan / purple / pink on midnight
`cyber`	Neon cyberpunk — raw cyan / magenta on near-black
`aurora`	Organic — emerald / violet / blue on deep teal
`monochrome`	Minimalist — white / silver on near-black

The footer schema

The footer is fully declarable —every column, every link, social icons, and the legal strip:

footer: {
  tagline: "Declarative UI engine for the modern web.",
  columns: [
    {
      heading: "Product",
      links: [
        { label: "Documentation", href: "/docs"    },
        { label: "Sandbox",       href: "/sandbox" },
        { label: "Changelog",     href: "/changelog" }
      ]
    },
    {
      heading: "Resources",
      links: [
        { label: "GitHub",    href: "https://github.com/devtem-dev/devtemDesign" },
        { label: "npm",       href: "https://npmjs.com/package/devtemdesign"     },
        { label: "DevTemple", href: "https://devtem.org"                         }
      ]
    }
  ],
  social: [
    { icon: "fab fa-github",  href: "https://github.com/devtem-dev", label: "GitHub"  },
    { icon: "fab fa-twitter", href: "https://twitter.com/devtemple", label: "Twitter" }
  ],
  legal: [
    { label: "Privacy Policy", href: "/privacy" },
    { label: "Terms of Use",   href: "/terms"   }
  ],
  copy: "© 2026 Figsh · MIT License"
}

Legacy config.footerCopy still works as a plain-string fallback — no breaking change.

navLinks — string or object

Plain strings default to href="#". Pass objects for real routing:

// Both formats work in the same array
navLinks: [
  { label: "Docs",    href: "/docs"    },
  { label: "API",     href: "/api"     },
  "Sandbox"   // ← href defaults to "#"
]

No build step

The entire is two files:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/style.css">
<script src="https://cdn.jsdelivr.net/npm/devtemdesign@0.0.2/script.js"></script>

Drop them in any HTML file. No Node, no bundler, no framework. Works in a static file server, a Netlify deploy, or a plain index.html opened in a browser.

Font Awesome is optional — only needed if you use <i> icon tags in icon, ctaText, or footer social:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

The sandbox

There's an interactive playground at design.devtem.org/sandbox — edit the config in the left pane, hit Run (or Ctrl+Enter), and the right pane renders a live iframe preview. Template switcher pills let you hot-swap themes without touching the code.

Try it

npm: npm i devtemdesign
CDN: cdn.jsdelivr.net/npm/devtemdesign
Sandbox: design.devtem.org/sandbox
Schema API docs: design.devtem.org/api
GitHub: github.com/devtem-dev/devtemDesign

It's MIT licensed and open source. Drop a star if you find it useful, and feel free to open issues or PRs - contributions welcome.

Built with vanilla JS/CSS

Using st-core.fscss with React & Next.js

FSCSS tutorial — Mon, 20 Apr 2026 01:16:05 +0000

React and Next.js can't parse .fscss syntax natively — so the workflow is: write FSCSS → compile to CSS → import as normal. This keeps your charts at zero runtime JavaScript while still fitting into any component tree.

1. Install the FSCSS CLI

npm install -g fscss

2. Create Your Stylesheet

Create a .fscss file anywhere in your project — src/styles/Chart.fscss is a good home.

/* Chart.fscss */
@import((*) from st-core);

@st-chart-line(.chart-line)
@st-chart-fill(.chart-fill)

.my-chart {
  @st-chart-points(10, 20, 16, 15, 66, 50, 80, 54)
}

Full mixin reference: github.com/fscss-ttr/st-core.fscss

3. Compile to CSS

fscss src/styles/Chart.fscss src/styles/Chart.css

This outputs a standard .css file — no bundler plugins needed.

4. Import Into Your Component

import "./styles/Chart.css";

export default function DashboardChart() {
  const dataStyles = {
    "--st-p1": "30%",
    "--st-p2": "65%",
    "--st-p3": "45%",
  };

  return (
    <div className="my-chart" style={dataStyles}>
      {/* Chart rendered via CSS clip-path — zero JS overhead */}
    </div>
  );
}

CSS custom properties are your data bridge. React state writes the values; st-core renders the chart.

5. Normalizing Data Points

@st-chart-points() uses human-friendly values (e.g. 0–100), but the underlying clip-path percentages are inverted — 0% is the top of the container and 100% is the bottom. Use this helper to convert your raw data before passing it to CSS:

/**
 * Normalizes a raw data value into a CSS custom property string
 * for use with st-core.fscss chart mixins.
 *
 * @param {number} value     - Raw data point (e.g. 0–100)
 * @param {number} [min=0]   - Dataset minimum
 * @param {number} [max=100] - Dataset maximum
 * @returns {string}         - e.g. "35%"
 */
function normalizePoint(value, min = 0, max = 100) {
  const clamped = Math.max(min, Math.min(max, value));
  const normalized = 100 - ((clamped - min) / (max - min)) * 100;
  return `${normalized.toFixed(2)}%`;
}

// Example: map an array of values to CSS custom properties
const data = [10, 42, 78, 55, 67, 60, 91, 82];
const dataStyles = Object.fromEntries(
  data.map((v, i) => [`--st-p${i + 1}`, normalizePoint(v)])
);

Pass dataStyles directly to your chart div and your data will scale correctly regardless of dataset range.

Key Considerations for Next.js

Global styles — Import compiled CSS in app/layout.tsx (App Router) or pages/_app.tsx (Pages Router) for shared dashboard tokens:

// app/layout.tsx
import "../styles/Chart.css";

CSS Modules — st-core works best with global selectors since chart class names are set at compile time. If you need scoping, output to Chart.module.css and reference classes via the module object.

Zero Runtime — Compiled output is plain CSS. No JS chart library ships to the client, which means faster TTI and no hydration concerns.

Re-compiling — Add the compile step to your package.json scripts so it runs before dev/build:

"scripts": {
  "predev": "fscss src/styles/Chart.fscss src/styles/Chart.css",
  "prebuild": "fscss src/styles/Chart.fscss src/styles/Chart.css"
}

That's it — FSCSS charts in React with a single compile step and no runtime cost.

Resource https://github.com/fscss-ttr/st-core.fscss

How st-core.fscss Multi-Line Charts Work

FSCSS — Mon, 13 Apr 2026 23:22:54 +0000

Most chart libraries solve the same problem with the same tools: Canvas, SVG, a JavaScript runtime, and a bundle that adds weight to every page that loads it.

st-core.fscss takes a different approach. No SVG. No Canvas. No runtime rendering. Just CSS doing the work it was always capable of doing.

The Core Idea

st-core.fscss uses three browser-native features to render charts:

clip-path: polygon() to draw the chart shape
CSS custom properties (--st-p1 through --st-p8) to store data points
FSCSS mixins to generate the chart structure at compile time

The flow is straightforward:

data → CSS variables → clip-path → visual chart

Once compiled, your stylesheet contains only what your charts need. No runtime overhead. No extra depth added to your HTML. If you use the CDN, you are loading a small FSCSS loader and nothing else.

Multi-Line Charts

The multi-line chart is a good example of how the architecture stays clean even as complexity grows.

The key concept is one renderer, multiple datasets. You define a single @st-chart-line renderer and let each line element carry its own data via scoped CSS variables.

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" async></script>

<style>
@import((*) from st-core)

@st-root()

.chart {
  height: 200px;
  position: relative;
  @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)
}

@st-chart-line(.chart-line)

.chart-line {
  background: currentColor;
  @st-chart-line-width(2px);
}

.line-1 { color: #32D8D4; }

.line-2 {
  color: #E8A030;
  @st-chart-points(10, 20, 16, 15, 66, 50, 80, 54)
}

.line-3 {
  color: #B840C8;
  @st-chart-points(5, 39, 20, 30, 27, 70, 60, 70)
}

@st-chart-grid(.chart-grid, 10, 7)
@st-chart-axis-y(.y-axis)
@st-chart-axis-x(.x-axis)
</style>

<div class="chart">
  <div class="chart-line line-1"></div>
  <div class="chart-line line-2"></div>
  <div class="chart-line line-3"></div>
  <div class="chart-grid"></div>
  <div class="y-axis">
    <span>0</span><span>20</span><span>40</span>
    <span>60</span><span>80</span><span>100</span>
  </div>
</div>

<div class="x-axis">
  <span>Sun</span><span>Mon</span><span>Tue</span>
  <span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>
</div>

Each line element overrides its own dataset independently. The renderer reads whichever --st-p* variables are scoped to that element. The result is composable and predictable.

Available Mixins

Mixin	Output
`@st-chart-line`	Line renderer
`@st-chart-fill`	Area chart fill
`@st-chart-dot`	Data point markers
`@st-chart-grid`	Background grid
`@st-chart-axis-x` / `@st-chart-axis-y`	Axis label layout

All generated at compile time.

Real-Time Updates

For dynamic data, you can update chart variables directly from JavaScript:

chart.style.cssText = `
  --st-p1: 40%;
  --st-p2: 75%;
  --st-p3: 60%;
`;

JavaScript passes the values. CSS handles the rendering. Animations work automatically if you have a transition defined.

Why It Works This Way

No heavy dependencies to install or maintain. The browser's own rendering pipeline does the visual work, so performance stays native. Your data lives in CSS as plain custom properties, not inside a configuration object or a framework component. And because you write the styles yourself, nothing about the chart's appearance is locked into a preset.

Live Demo

fscss-ttr.github.io/st-core.fscss/multi-chart

st-core.fscss is a new and actively maintained open source project. If the approach interests you, contributions are welcome. Explore the repo on GitHub and try building your own chart system.

Advanced CSS Charts with st-core.fscss (Multi-Line, Grid, Axis — No JS Required)

FSCSS tutorial — Sat, 11 Apr 2026 23:18:47 +0000

What if you could build real charts using just CSS?

That's exactly what st-core.fscss enables.

What is st-core.fscss?

st-core.fscss is a lightweight data visualization system built on FSCSS. It lets you create line charts, multi-line charts, dashboard UIs, and stat cards — using pure CSS (with optional minimal JS).

Core Idea

Instead of rendering charts with Canvas or SVG, st-core uses:

clip-path: polygon() → to draw the chart shape
CSS variables (--st-p1…--st-p8) → to store data points
FSCSS mixins → to generate structure

So the flow becomes:

data → CSS variables → clip-path → visual chart

No re-renders. No heavy libraries.

Multi-Line Chart Example

Here's a real example with multiple datasets in a single chart:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" async></script>

<style>
@import((*) from st-core)

/* INIT */
@st-root()

.chart {
  height: 200px;
  position: relative;

  /* default dataset */
  @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)
}

/* ONE renderer */
@st-chart-line(.chart-line)

.chart-line {
  background: currentColor;
  @st-chart-line-width(2px);
}

/* MULTI DATASETS */
.line-1 { color: #32D8D4; }

.line-2 {
  color: #E8A030;
  @st-chart-points(10, 20, 16, 15, 66, 50, 80, 54)
}

.line-3 {
  color: #B840C8;
  @st-chart-points(5, 39, 20, 30, 27, 70, 60, 70)
}

/* GRID + AXES */
@st-chart-grid(.chart-grid, 10, 7)
@st-chart-axis-y(.y-axis)
@st-chart-axis-x(.x-axis)
</style>

<div class="chart">
  <div class="chart-line line-1"></div>
  <div class="chart-line line-2"></div>
  <div class="chart-line line-3"></div>

  <div class="chart-grid"></div>

  <div class="y-axis">
    <span>0</span><span>20</span><span>40</span>
    <span>60</span><span>80</span><span>100</span>
  </div>
</div>

<div class="x-axis">
  <span>Sun</span><span>Mon</span><span>Tue</span>
  <span>Wed</span><span>Thu</span><span>Fri</span><span>Sat</span>
</div>

Key Concept

Multi-line charts use one renderer + multiple datasets — not multiple renderers.

Each line element overrides its own data independently:

.line-2 {
  @st-chart-points(10, 20, 16, 15, 66, 50, 80, 54)
}

The single @st-chart-line renderer reads whichever --st-p* variables are scoped to that element. Clean, predictable, composable.

Built-in Mixins

Mixin	Output
`@st-chart-line`	Line renderer
`@st-chart-fill`	Area chart fill
`@st-chart-dot`	Data point markers
`@st-chart-grid`	Background grid
`@st-chart-axis-x/y`	Axis label layout

All generated at compile time — zero runtime overhead.

Optional: Real-Time Data

To update a chart dynamically, set variables directly on the element:

chart.style.cssText = `
  --st-p1: 40%;
  --st-p2: 75%;
  --st-p3: 60%;
`;

CSS handles the animation automatically. JS passes the data — CSS does the work.

Why This Approach Matters

Zero heavy dependencies.

Native performance — everything runs on the browser's own rendering pipeline.

Declarative data — your data lives in CSS, not in a config object.

Fully customizable — you build the chart style, you're not locked into presets.

Live Demo
→ fscss-ttr.github.io/st-core.fscss/multi-chart

st-core.fscss isn't just a chart library — it's a CSS-powered data visualization system. It turns CSS into a rendering engine and lets developers build charts with structure, not scripts.

MIT Licensed. Explore the repo and try building your own custom chart system.

FSCSS Loop: Styling 36 Elements Without Writing 36 Rules

FSCSS — Fri, 10 Apr 2026 22:12:50 +0000

In regular CSS, styling multiple elements individually means writing a rule for each one. nth-child(1), nth-child(2)... all the way down. That's repetitive, brittle, and just not fun.

FSCSS solves this with arrays and loops — no mixins needed.

The Demo

36 dots. 36 different colors. One loop.

How It Works

Step 1 — generate values with count()

@arr i[count(36, 10)]

count(36, 10) generates 36 values starting from 10, incrementing by 10 each time:
10, 20, 30, 40 ... 360

⚠️ Note: the sequence starts at 10, not 0. count(n, step) begins at step, not zero.

Step 2 — loop with @arr.name[]

.orbit .dot:nth-child(@arr.i[]) {
  $i: @arr.i[];

  background: hsl($i, 100%, 60%);
  transform: rotate($i!deg) translateX(120px);
  %2(width, height[: 50px;])
  position: absolute;
}

@arr.i[] inside a selector expands into every nth-child index — starting from 1, matching CSS's own 1-based nth-child counting. Each iteration binds the current value to $i, which gets used for both the hue and the rotation angle.

So dot #1 gets hsl(10, 100%, 60%) rotated 10deg. Dot #2 gets hsl(20, 100%, 60%) rotated 20deg. All the way to 360deg — a full rainbow orbit.

What this replaces

Without FSCSS, you'd write something like:

.orbit .dot:nth-child(1)  { background: hsl(10,  100%, 60%); transform: rotate(10deg)  translateX(120px); }
.orbit .dot:nth-child(2)  { background: hsl(20,  100%, 60%); transform: rotate(20deg)  translateX(120px); }
/* ... 34 more lines */
.orbit .dot:nth-child(36) { background: hsl(360, 100%, 60%); transform: rotate(360deg) translateX(120px); }

That's 36 rules written by hand — and if you want to change the radius, you touch 36 lines.

With FSCSS, it's one block. Change 120px once, done.

Key things to know

count(n, step) starts at step, not 0. count(36, 10) → 10, 20, 30 ... 360
@arr.name[] in a selector loops the whole rule block per value
@arr.name[] in a value outputs the current iteration's value
nth-child indexing is 1-based in both CSS and FSCSS arrays — they align naturally
For testing No build step — use FSCSS runtime via jsdelivr

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" async></script>

Docs

Array reference → fscss.devtem.org/arrays

Did you know st-core.fscss doesn't need a runtime in production?

FSCSS — Wed, 08 Apr 2026 22:29:31 +0000

The <script> tag for FSCSS is a browser compiler- great for development, but optional for production.

You can compile your .fscss file down to plain .css ahead of time. The browser gets standard CSS. No runtime. No wait.

Compile with the CLI

npm install -g fscss
fscss style.fscss style.css

That's it. style.css is now pure clip-path math and CSS variables — no FSCSS runtime needed.

Prefer a GUI? There's a VS Code extension

FSCSS for VS Code gives you:

Syntax highlighting for .fscss files
Autocomplete + snippets
Auto Compile on Save — outputs to filename.fscss.css automatically
Command Palette: FSCSS: Compile

Why bother compiling?

	Dev (runtime)	Prod (compiled)
Setup	Drop in a `<script>` tag	One CLI command
Performance	JS parses before render	Instant CSS render
JS disabled	Chart won't show	Chart still works
Bundle size	Runtime included	Zero runtime cost

Repo → github.com/fscss-ttr/st-core.fscss ⭐ MIT

From Static to Real-Time: Data Viz with st-core.fscss (Pure CSS Charts)

FSCSS tutorial — Mon, 06 Apr 2026 20:01:37 +0000

This is a follow-up to my earlier post (Building a trading dashboard UI with zero JavaScript — just st-core.fscss.)If you haven't read that one, the quick summary: st-core is an FSCSS module that lets you declare chart infrastructure — fills, lines, dots, axes, grids — entirely at the CSS layer. No canvas, no chart library.

That post showed you the static side. This one shows you how to make it live.

The "Aha" Moment

The thing that unlocks st-core for real data viz is understanding what the chart actually is under the hood.

The chart shape IS a clip-path polygon.

When st-core compiles your FSCSS, it generates CSS that reads from a set of custom properties — --st-p1 through --st-p8 — and uses them to construct the polygon coordinates. That's it. So updating the chart at runtime is just:

element.style.cssText = `--st-p1: 40%; --st-p2: 75%; --st-p3: 55%; ...`;

One line. No DOM surgery. No re-render cycle. The CSS transition handles the rest.

The Demo: Expenses Chart

Here's the full chart we're building — an analytics card with a live-updating area chart, a stat card, and a peak-tracking dot.

CodePen demo

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" async></script>
  <style>

    @import((*) from st-core) @st-root() @st-container(body) .wrapper {
      flex-direction: column;
      gap: 16px;
      width: 100%;
    }

    @st-chart-fill(.chart-fill)
    @st-chart-line(.chart-line)
    @st-chart-dot(.chart-dot, 70, 60)
    .chart {
      width: 100%;
      height: 200px;
      border-radius: 20px;
      @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)
    }

    @st-stat-card(.stat-card)
    @st-chart-axis-x(.x-axis)
    @st-chart-axis-y(.y-axis)
    @st-chart-grid(.chart-grid, 10, 7)
    .chart-fill, .chart-line {
      height: 100%;
      transition: clip-path .9s cubic-bezier(.4, 0, .2, 1);
    }

  </style>
</head>
<body>
  <div class="wrapper">

    <div class="stat-card">
      <div class="st-stat-label">TOTAL EXPENSES</div>
      <div class="st-stat-value">$1,326.03</div>
      <div class="st-stat-delta up">+5.1% vs last week</div>
    </div>

    <div class="chart">
      <div class="chart-fill"></div>
      <div class="chart-line"></div>
      <div class="chart-dot"><span class="tooltip">$405.67</span></div>
      <div class="chart-grid"></div>
      <div class="y-axis">
        <span>0</span><span>10</span><span>20</span><span>30</span>
        <span>40</span><span>50</span><span>60</span><span>70</span>
      </div>
    </div>

    <div class="x-axis days">
      <span>Sun</span><span>Mon</span><span>Tue</span><span>Wed</span>
      <span>Thu</span><span>Fri</span><span>Sat</span><span>Sun</span>
    </div>

  </div>
</body>
</html>

Directive Breakdown

The chart block

@st-chart-fill(.chart-fill)
@st-chart-line(.chart-line)
@st-chart-dot(.chart-dot, 70, 60)
.chart {
  @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)
}

Directive	What it generates
`@st-chart-fill`	Area fill via `clip-path` polygon, reads `--st-p1..8`
`@st-chart-line`	Stroke-only overlay of the same shape
`@st-chart-dot`	Absolute-positioned peak marker, initial position `(70, 60)`
`@st-chart-points`	Compiles the 8 values into `--st-p1` through `--st-p8`

Support directives

@st-stat-card(.stat-card)        /* label / value / delta slots */
@st-chart-axis-x(.x-axis)        /* wires x-axis label container */
@st-chart-axis-y(.y-axis)        /* wires y-axis label container */
@st-chart-grid(.chart-grid, 10, 7) /* 10 rows × 7 cols grid */

The JS Bridge (19 lines)

This is the entire runtime layer. No chart library, no framework.

const chartFill = document.querySelector(".chart-fill");
const chartLine = document.querySelector(".chart-line");
const chartDot  = document.querySelector(".chart-dot");

// st-core clip-path is top-down, so flip the value
function normalize(n) {
  return (100 - n) + '%';
}

// X positions for the 8 columns
const xStops = ['0%', '14%', '28%', '42%', '57%', '71%', '85%', '100%'];

function update(points) {
  // Set --st-p1..8 directly on the elements
  const vars = points.map((v, i) => `--st-p${i + 1}: ${normalize(v)};`).join(' ');
  chartLine.style.cssText = vars;
  chartFill.style.cssText = vars;

  // Move dot to the peak
  const highest = Math.max(...points);
  const idx = points.indexOf(highest);
  chartDot.style.top  = normalize(highest);
  chartDot.style.left = xStops[idx];
  chartDot.querySelector('.tooltip').textContent = `$${(highest * 5.5).toFixed(2)}`;
}

Call update() with any array of 8 numbers and the chart animates there. That's the whole bridge.

Connecting to Real Data

WebSocket (e.g. financial feed)

const socket = new WebSocket('wss://your-api.com/expenses/stream');

socket.onmessage = (event) => {
  const { daily } = JSON.parse(event.data);
  // daily is an array of 8 values, one per day
  update(daily);
};

REST polling (e.g. every 30 seconds)

async function poll() {
  const res  = await fetch('/api/expenses/weekly');
  const data = await res.json();
  update(data.points); // [20, 45, 33, 60, 27, 51, 38, 44]
}

poll();
setInterval(poll, 30_000);

In both cases your only job is feeding an array of 8 numbers into update(). The CSS does everything else — shape, fill, transition, dot position.

Why `clip-path` Makes This Work

st-core uses clip-path: polygon() which means:

The shape is arbitrary — true area curves, not stepped bars
Transitions are compositor-accelerated — clip-path animates on the GPU, not the main thread
No repaints — changing --st-p* variables doesn't touch the DOM structure at all

The transition declaration is doing a lot of heavy lifting here:

.chart-fill, .chart-line {
  transition: clip-path .9s cubic-bezier(.4, 0, .2, 1);
}

That single line is what makes the chart feel like a live dashboard instead of a static image that gets replaced.

The "Gravy Path": Compiling to Pure CSS

The exec.min.js CDN script is for prototyping and demos. For production — and especially for large-scale projects — you compile your .fscss file down to totally pure, standard CSS.

Two ways to do this:

1. VS Code Extension

Install the FSCSS extension from the VS Code marketplace, and install fscss from npm. It watches your .fscss files and compiles on save — you get instant output CSS right next to your source file. This is the fastest feedback loop for building UIs.

2. FSCSS npm package

npm install -g fscss

fscss "path/to/style.fscss" "path/to/style.css"

More details on that fscss.devtem.org.

The compiled output is 100% standard CSS. No runtime dependency, no JavaScript required for the styles. You ship the .css file and it just works.

Why this matters for large-scale projects

When you're managing a dashboard with dozens of chart components, keeping your chart configuration in .fscss files is a huge advantage:

/* charts/expenses.fscss */
@st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)

/* charts/revenue.fscss */
@st-chart-points(44, 51, 60, 72, 65, 80, 78, 90)

You get a single source of truth for chart shapes, baseline datasets, theming, and responsive behavior — all in .fscss. The compiled CSS is what ships to users. The JS layer stays tiny because it only handles the live variable updates.

The Full Stack, One More Time

.fscss source
  └── compiled via npm
        └── pure CSS output
              ├── clip-path polygon (shape)
              ├── --st-p1..8 variables (data)
              ├── transitions (motion)
              └── stat card / axis / grid layout

Runtime JS (optional, for live data)
  └── update(points[]) → sets --st-p1..8 on elements
        └── CSS transition takes over → smooth animation

The mental model: FSCSS owns the structure and shape. JS owns the numbers. CSS owns the motion.

The core pattern doesn't change for any of these. You're still just feeding --st-p* variables and letting the compiled CSS handle the rest.

fscss.devtem.org

Building a trading dashboard UI with zero JavaScript — just st-core.fscss

FSCSS tutorial — Fri, 03 Apr 2026 01:09:40 +0000

No JS. No SVG. No canvas. Just CSS — and one import.

Here's what that actually looks like in practice.

The problem with dashboard UIs

Every time I need a stats dashboard — chart, bars, stat cards, the whole thing — I end up writing the same boilerplate. CSS variables, clip-path polygons, card layouts. It's not hard, but it's repetitive. And when you're working across multiple projects, copy-pasting that foundation every time gets old fast.

So packaged it.

st-core.fscss is an open source library for FSCSS that gives you a complete trading/stats dashboard design system in a single import. MIT licensed, no dependencies besides the FSCSS runtime or cli.

What you get

A full set of @st-* mixins that each generate a production-ready component:

Mixin	Output
`@st-root()`	Design tokens (colors, radius, spacing) on `:root`
`@st-stat-card`	Stat card — label, value, up/down delta
`@st-chart-fill`	Gradient area fill under a chart line
`@st-chart-line`	Glowing line stroke
`@st-chart-dot`	Positioned data point with tooltip support
`@st-chart-grid`	Background grid lines
`@st-chart-axis-x/y`	Axis label rows
`@st-chart-points`	Inject 8 data values into a chart
`@st-cat-bar-fill`	Gradient progress bar fill
`@st-phone`	Mock phone/device frame

How the chart works — pure CSS, no JS

This is the interesting part. The chart is a clip-path: polygon() shape.

You pass 8 Y values to @st-chart-points, which writes them as CSS custom properties — --st-p1 through --st-p8 — on your chart container. The fill and line elements inside read those values and clip themselves accordingly.

.chart {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: var(--st-surface);

  /* your 8 data points */
  @st-chart-points(20, 35, 33, 30, 48, 35, 66, 37)
}

That's it. No JS. No SVG path calculations. The "line" is a thin filled polygon with two rows of points — the front edge and the back edge — separated by --st-chart-line-width. Change the width, the line redraws.

.chart-line {
  @st-chart-line-width(2px)
}

A minimal full example

demo using runtime

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" async></script>

<style>
@import((*) from st-core)

/* ================= INIT ================= */

@st-root()
@st-container(body)

/* ================= COMPONENTS ================= */

@st-chart-fill(.chart-fill)
@st-chart-line(.chart-line)
@st-chart-dot(.chart-dot, 70, 60)

/* ================= CHART ================= */

.chart{
  width: 100%;
  height: 200px;
  border-radius: 25px;
  position: relative;
  overflow: hidden;

  background: var(--st-surface);

  /*  DATA (main power) */
  @st-chart-points(20,25,21,37,30,60,27,50)
}
@st-phone(.wrapper)
/* ================= LINE ================= */

.chart-line{
  /* controlled via helper */
  @st-chart-line-width(2px);

  /* optional override */
  filter: drop-shadow(0 0 8px var(--st-accent));
}

/* ================= FILL ================= */

.chart-fill{
  /* enhance fill visibility */
  opacity: .85;
}

/* ================= DOT ================= */

.chart-dot{
  position: relative;
  overflow: visible;

  /*  local customization */
  --st-accent: #c4a8ff; /* overrides root accent just for dot */
}

/* tooltip */
.chart-dot:after{
  content: attr(data-point);
  background: var(--st-accent);
  padding: 6px 8px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  border-radius: var(--st-radius-sm);
  position: absolute;
  top: -40px;
  left: -22px;
  white-space: nowrap;
}

/* arrow */
.chart-dot:before{
  content: '';
  width: 10px;
  height: 10px;
  background: var(--st-accent);
  transform: rotate(45deg);
  position: absolute;
  top: -18px;
  left: 2px;
}

/* ================= EXTRA (USING st-core IDEA) ================= */


@st-stat-card(.stat-card)
@st-chart-axis-x(.x-axis)
@st-chart-axis-y(.y-axis)



@st-chart-grid(.chart-grid, 10, 7)
</style>
<div class="wrapper">
    <div class="stat-card">
    <div class="st-stat-label">TOTAL EXPENSES</div>
    <div class="st-stat-value">$1,326.03</div>
    <div class="st-stat-delta up">+5.1% vs last week</div>
  </div>
<div class="chart">
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
  <div class="chart-dot" data-point="$405.67"></div>
  <div class="chart-grid"></div>
   <div class="y-axis">
   <span>0</span>
   <span>10</span>
   <span>20</span>
   <span>30</span>
   <span>40</span>
   <span>50</span>
   <span>60</span>
   <span>70</span>
   <span>80</span>
   <span>90</span>
   <span>100</span>
 </div>
  </div>
        <div class="x-axis days">
      <span>Sun</span>
      <span>Mon</span>
      <span>Tue</span>
      <span>Wed</span>
      <span>Thu</span>
      <span>Fri</span>
      <span>Sat</span>
      <span>Sun</span>
    </div>

  </div>

A full chart with a stat card and axis labels. That's the entire CSS. No custom polygon math, no JavaScript data binding.

Token overrides — it's just CSS variables

All the colors, spacing, and radii are CSS custom properties. Override any of them locally — they cascade normally.

/* global theme tweak */
:root {
  --st-accent: #00d4ff;
  --st-bg: #0a0f1e;
}

/* local override — just for the dot */
.chart-dot {
  --st-accent: var(--st-accent-2);
}

Multiple charts on the same page? Each container has its own --st-p1–--st-p8, so they're fully independent.

Category bars

The @st-cat-bar-fill mixin builds a gradient progress bar. You set the fill per element using a CSS variable — no extra params needed once the mixin is declared.

@st-cat-bar-fill(.bar-fill, 0)

/* per-bar widths */
.equities { --st-cat-bar-fill-range: 82%; }
.crypto   { --st-cat-bar-fill-range: 61%; }
.forex    { --st-cat-bar-fill-range: 45%; }

<div class="bar-track">
  <div class="bar-fill equities"></div>
</div>

See it live

Live demo

GitHub — fscss-ttr/st-core.fscss (MIT)

FSCSS NPM (MIT)

The full demo includes stat cards, a chart with fill + line + dot + grid + axes, category bars, and a phone frame — all driven by @st-* mixins with no custom CSS beyond the mixin calls themselves.

Why FSCSS?

FSCSS is a lightweight modern CSS preprocessor.

If you're unfamiliar with FSCSS, the docs are a good starting point.

Drop a ⭐ on the repo if it's useful, and feel free to open issues or PRs — it's MIT, go wild.

Building a Data-Driven Chart UI with Zero JavaScript (Pure CSS + FSCSS)

FSCSS — Wed, 01 Apr 2026 23:35:28 +0000

Most modern web charts rely on heavy JavaScript libraries. While powerful, they often come with a performance cost and complex integration steps.
What if you could build a fully styled, data-driven chart UI using Pure CSS?
By using FSCSS and its utility system, st-core (statistic core)_, we can transform raw data into visual interfaces directly within our stylesheets.

1. The Setup

First, include the FSCSS runtime and import the st-core helpers.

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" async></script> 

<style>
@import((*) from st-core) 

/* Initialize design tokens, layout base, and colors */
@st-root() 
@st-container(body) 
</style>

2. Attaching the Components

st-core.fscss uses directive-like helpers to generate the complex logic needed for backgrounds, lines, and markers.

@st-chart-fill(.chart-fill)    /* Area under the line */
@st-chart-line(.chart-line)    /* The actual trend line */
@st-chart-dot(.chart-dot, 70, 60) /* Data point marker at x=70, y=60 */

3. Mapping Data to UI

This is where the magic happens. The @st-chart-points helper maps your numeric data points into CSS variables. These variables are then used to calculate a clip-path that draws the chart.

.chart {
  width: 300px;
  height: 400px;
  border-radius: 25px;
  border: 2px solid var(--st-accent);
  position: relative;
  overflow: hidden;
  background: var(--st-surface);

  /* The Data: These points define the shape of the graph */
  @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)
}

4. Customizing the Visuals

Because this is CSS, customization is trivial. You can use filters, transitions, and standard properties to polish the UI.

/* Add a glow to the line */
.chart-line {
  @st-chart-line-width(2px);
  filter: drop-shadow(0 0 8px var(--st-accent));
}

/* Style the tooltip and point */
.chart-dot {
  position: relative;
  --st-accent: #c4a8ff; /* Local theme override */
}

.chart-dot:after {
  content: attr(data-point); /* Pulls data from HTML attribute */
  background: var(--st-accent);
  padding: 6px 8px;
  border-radius: var(--st-radius-sm);
  /* ... positioning ... */
}

5. The Final HTML Structure

The HTML remains incredibly clean. No Canvas elements, no complex SVG strings—just a few semantic divs.

<div class="chart">
  <div class="chart-fill"></div>
  <div class="chart-line"></div>
  <div class="chart-dot" data-point="$405.67"></div>
</div>

Why This Matters

Zero JS Overhead: The browser handles the rendering logic via CSS variables and clip-paths.
Declarative Data: You define data where you define your styles.
Fully Themeable: Since it uses CSS variables (--st-accent, etc.), switching to dark mode or changing brand colors is instantaneous. This approach shifts the paradigm: CSS isn't just styling the UI, it’s generating the UI from data.

Check out the project here: st-core on GitHub

Build a 360 Starburst Animation Using FSCSS

FSCSS tutorial — Mon, 30 Mar 2026 11:47:29 +0000

Traditional CSS struggles when you need to generate hundreds of repeated elements with dynamic transformations.

With FSCSS, you can do this elegantly using arrays, loops, and computed values — all inside your styles.

In this guide, we’ll build a 360-degree radial starburst animation using FSCSS.

What We’re Building

A circular pattern made of 360 elements, each rotated slightly to form a full radial burst.

Each ray ends with a small geometric shape, creating a complex animated structure.

HTML

<div class="box"></div>

JavaScript (Generate 360 Elements)

const box = document.querySelector(".box");

for (let i = 0; i < 360; i++) {
  const star = document.createElement("div");
  star.className = "star";
  box.appendChild(star);
}

Instead of writing 360 elements manually, JavaScript handles it.

FSCSS Code

@import((*) from snake_case)
@import((*) from themes)
@import((flex-wrap-center as flex_wrap) from flex-control)

body {
  background_color: #233332;
}

.box {
  %2(width, height [: 400px;])
  position: absolute;
  transform_style: preserve-3d;
  @flex_wrap()
}

@arr pos[count(360, 10)]

.box .star:nth-child(@arr.pos[]) {
  $pos: @arr.pos[];

  background: #2FF200;
  padding: 1px;
  width: 100px;
  position: absolute;

  transform_origin: right;
  transform: rotate($pos!deg);
}

.star:before {
  content: " ";
  position: absolute;
  width: 20px;
  height: 20px;
  background: #C800F2;

  top: -8.5px;
  left: -7px;

  transform: rotate(60deg);

  tr Shape: @event.shape(star);
}

$(@keyframes rotate,.star &[360s linear infinite alternate]) {
  to {
    transform: rotate(0);
  }
}

How It Works

1. Array Generation

@arr pos[count(360, 10)]

This creates a sequence:

10, 20, 30 ... 350

Each value is used to rotate an element.

Dynamic nth-child Targeting

.box .star:nth-child(@arr.pos[])

FSCSS maps each array value to a corresponding element automatically.

3. Rotation Per Element

transform: rotate($pos!deg);

Each .star rotates based on its assigned value, forming a full circle.

4. Shape Injection via Event from the imported themes

tr Shape: @event.shape(star);

This dynamically applies a shape transformation, allowing reusable geometric logic.

5. Animation Binding

$(@keyframes rotate,.star &[360s linear infinite alternate])
FSCSS binds animation directly to the selector in one line.

Why This Is Powerful

With FSCSS, you get:

Looping without preprocessors
Dynamic selectors
Inline logic and transformations
Reusable event-driven styling
Zero runtime overhead

Final Result

You now have a fully procedural radial animation, built with:

1 HTML element
1 loop in JavaScript
FSCSS handling all styling logic

codepen demo

https://codepen.io/David-Hux/pen/gbwvqGb

FSCSS changes how you think about CSS.

Instead of writing repetitive rules, you define behavior — and let the system generate the rest.

You can extend this into:

loaders
charts
generative UI
data-driven visuals

Want more like this?

Why kebab-case is Outdated — And How FSCSS Fixes It

FSCSS tutorial — Fri, 27 Mar 2026 18:58:26 +0000

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)

snake_case (Python, databases)

That mismatch is not just annoying — it’s inefficient.

The Real Problem: Context Switching

Every time you write CSS, your brain does a silent conversion:

backgroundColor → background-color

user_name → user-name

That’s friction.

And friction slows teams down.

Even modern systems still enforce kebab-case in CSS — meaning developers constantly translate between conventions.

FSCSS Changes the Rule

With FSCSS (Figured Shorthand Cascading Style Sheets), you don’t adapt to CSS…

CSS adapts to you.

Write CSS Like Your Actual Code

camelCase (Frontend-friendly)

@import((*) from camelCase)

.card {
  backgroundColor: #111;
  borderRadius: 12px;
}

snake_case (Backend-friendly)

@import((*) from snake_case)

.card {
  background_color: #111;
  border_radius: 12px;
}

What Happens Behind the Scenes

Both become:

background-color: #111;
border-radius: 12px;

FSCSS maps naming styles directly to valid CSS — no hacks, no runtime overhead.

Why This Is a Bigger Deal Than It Looks

1. Your Brain Stops Translating

Camel case uses capital letters to separate words
Snake case uses underscores instead

FSCSS lets you stick to one mental model.

2. Your Stack Becomes Consistent

React / Next.js → use camelCase

Django / APIs → use snake_case

CSS → now matches both

3. Teams Move Faster

No more:

“Wait, what’s the CSS version of this?”

“Is it borderRadius or border-radius again?”

You already know the answer because you’re already using it.

Extend Beyond Naming

FSCSS isn’t just about syntax - it lets you build reusable styling logic:

@define glassEffect(){
  backdrop-filter: blur(12px);
  background: rgba(255,255,255,0.2);
} 

.hero {
  @glassEffect()
}

Now your CSS behaves more like a system.

Learn More

If you want to go deeper into each approach:

Snake case guide:
https://figsh.devtem.org/how_to_use_snakecase_fscss

Camel case guide:
https://figsh.devtem.org/how_to_use_camelcase_fscss

Final Thought

Kebab-case made sense when CSS was isolated.

But modern development is interconnected.

FSCSS brings CSS into alignment with the rest of your stack —
and removes one of the most subtle productivity killers in frontend development.

DEV Community: FSCSS tutorial

Build a Stunning Developer Portfolio in Minutes with devtemDesign

What is devtemDesign?

Step 1 — The HTML shell

Step 2 — Initialize the engine

Step 3 — Core + Navigation

Step 4 — Hero section

Step 5 — Brands ticker

Step 6 — Feature cards (Projects)

Step 7 — Panels (About / Context blocks)

Step 8 — Footer

Step 9 — Optional: Custom accent colors

The full config at a glance

What you just built

Resources

building a declarative animated page engine — one config object, full UI

What it renders

Four built-in templates

The footer schema

navLinks — string or object

No build step

The sandbox

Try it

Using st-core.fscss with React & Next.js

1. Install the FSCSS CLI

2. Create Your Stylesheet

3. Compile to CSS

4. Import Into Your Component

5. Normalizing Data Points

Key Considerations for Next.js

How st-core.fscss Multi-Line Charts Work

Advanced CSS Charts with st-core.fscss (Multi-Line, Grid, Axis — No JS Required)

FSCSS Loop: Styling 36 Elements Without Writing 36 Rules

The Demo

How It Works

What this replaces

Key things to know

Docs

Did you know st-core.fscss doesn't need a runtime in production?

Compile with the CLI

Prefer a GUI? There's a VS Code extension

Why bother compiling?

From Static to Real-Time: Data Viz with st-core.fscss (Pure CSS Charts)

The "Aha" Moment

The Demo: Expenses Chart

CodePen demo

Directive Breakdown

The chart block

Support directives

The JS Bridge (19 lines)

Connecting to Real Data

WebSocket (e.g. financial feed)

REST polling (e.g. every 30 seconds)

Why clip-path Makes This Work

The "Gravy Path": Compiling to Pure CSS

1. VS Code Extension

2. FSCSS npm package

Why this matters for large-scale projects

The Full Stack, One More Time

Building a trading dashboard UI with zero JavaScript — just st-core.fscss

The problem with dashboard UIs

What you get

How the chart works — pure CSS, no JS

A minimal full example

Token overrides — it's just CSS variables

Category bars

See it live

Why FSCSS?

Building a Data-Driven Chart UI with Zero JavaScript (Pure CSS + FSCSS)

1. The Setup

2. Attaching the Components

3. Mapping Data to UI

4. Customizing the Visuals

5. The Final HTML Structure

Why This Matters

Build a 360 Starburst Animation Using FSCSS

What We’re Building

HTML

JavaScript (Generate 360 Elements)

FSCSS Code

Why `clip-path` Makes This Work