DEV Community: FSCSS tutorial

patterns.fscss: a demo module for styling CSS in plain English

FSCSS tutorial — Sun, 23 Aug 2026 00:10:15 +0000

FSCSS v1.1.25 shipped pattern() — a method that matches a plain-English phrase against a stored description and injects the matching CSS. I wrote about the mechanics of pattern() itself in an earlier post. This one is about what I built with it: patterns.fscss, a small demo module you can import today.

What it is

patterns.fscss is a pattern library. It bundles a set of design tokens and a set of pattern() definitions for common UI needs, cards, buttons, hover effects, animations, a few components, so you can write a class body like this:

.card {
  beautiful gradient hello world card
}

.btn-primary {
  solid purple primary button with white label
}

and get real CSS out, without calling a mixin by an exact name.

It is explicitly a demo. It does not try to cover every pattern you might want. It exists to show what a pattern library looks like in practice, and to give people a working repo to fork and extend.

How it's structured

The module is two @define blocks:

@define pattern-root(sel: root) {
  /* declares design tokens as CSS custom properties */
}

@define patterns(thr: 0.65) {
  /* declares the pattern library, using @use(thr) as
     the shared threshold for every pattern() call */
}

Calling @pattern-root() sets up the tokens. Calling @patterns(0.7) registers the library at whatever threshold you want. Everything after that is just writing phrases inside your selectors.

Using it

Import the published module directly:

@import((pattern-root, patterns) from patterns)

@pattern-root()
@patterns(0.7)

Or fork the repo and import your own copy, which is the better option once you start adding patterns of your own:

@import((pattern-root, patterns) from "./patterns.fscss")

A note on threshold and collisions

Every pattern in the module shares one threshold, set at the @patterns() call site. That keeps the call simple, but it means pattern descriptions need to stay lexically distinct from each other. Two descriptions that share most of their words, for example an early draft of this module had "rounded primary white button with purple text" next to "solid purple primary button with white text", can end up close enough in similarity score that which one wins depends on small wording differences in the phrase you actually write. The fix isn't a smarter algorithm, it's writing descriptions that don't overlap that much in the first place.

Contributing

The repo is set up for contribution. If you have a pattern you use often, plain-English description plus the CSS it should produce, a pull request is the way to get it in. The README has the full guidelines, including the distinctness rule above.

Repo: github.com/fscss-ttr/patterns.fscss

Open-source, MIT Licensed

FSCSS @define, pattern(), and @import — Explained in Plain English

FSCSS tutorial — Sat, 22 Aug 2026 17:08:59 +0000

FSCSS @define, pattern(), and @import

Explained in plain English

FSCSS gives you three powerful ways to write less and reuse more.

Here’s what each one actually means — without the complicated words.

1. `@define` — Create your own shortcut

Think of @define as saying to FSCSS:

“Hey, look here! I’m creating a brand new shortcut command that I want to reuse later.”

Example:

@define card(bg, color) {
  background: @use(bg);
  color: @use(color);
  border-radius: 12px;
  padding: 24px;
}

card → the custom name of your shortcut
(bg, color) → the placeholders (like empty boxes) where you will later put real values
@use(bg) and @use(color) → how you use those placeholders inside the shortcut

How you use it later:

.box {
  @card(#667eea, white)
}

FSCSS fills in the placeholders and gives you real CSS.

You can also give default values:

@define button(bg: #764ba2, text: white) {
  background: @use(bg);
  color: @use(text);
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
}

Now you can call it with or without values.

2. `pattern()` — Describe what you want in normal words

pattern() is the more flexible cousin of @define.

Instead of calling a shortcut by its exact name, you just write a normal sentence that describes the style.

FSCSS looks at your sentence, finds the closest matching pattern, and injects the CSS for you.

Example:

pattern(0.6: "rounded primary button", `
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background: #ffffff;
  color: #764ba2;
  font-weight: 600;
  cursor: pointer;
`)

Then later you can write:

.btn {
  rounded primary button
}

or even:

.btn {
  nice rounded purple button
}

As long as the words are close enough (the number 0.6 is the confidence threshold), FSCSS understands what you mean.

When to use which?

Feature	Best for	How strict?
`@define`	Exact, reusable components	Very precise
`pattern()`	Fast writing & natural language	Flexible / fuzzy

3. `@import` — Bring shortcuts from other files

@import lets you pull in the shortcuts (@define or patterns) you already created in another file.

Basic selective import:

@import((card, button) from "./components.fscss")

Only card and button are brought in — nothing else.

Wildcard (bring everything):

@import((*) from "./components.fscss")

The powerful part — renaming on the fly:

@import((card as my-card, button as btn) from "./components.fscss")

.box {
  @my-card(#8f6bff, white)
}

.action {
  @btn()
}

You can give the imported shortcuts new names that fit the current file better.

This is especially useful when different modules use similar names, or when you just want cleaner code.

Quick mental model

@define → “I’m inventing a new reusable command”
pattern() → “I’m describing the style in normal English”
@import → “Bring those commands from another file (and rename them if I want)”

Together they let you write less CSS, keep things organized, and still stay 100% compatible with normal CSS at the end.

Try it yourself

Extension is vailable on vscode

Docs: fscss.devtem.org

Learning hub: hub.devtem.org

npm: npmjs.com/package/fscss

Happy coding ❤️

FSCSS tutorial Follow

Figured Shorthand Cascading Style Sheet

How ProvChart Makes Your Pages Faster, Crawlable, and Still Dynamic

FSCSS tutorial — Fri, 21 Aug 2026 08:04:36 +0000

Charts without the JavaScript 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 the content

ProvChart takes a different path.

It turns your data into CSS custom properties. The browser then paints the chart using native CSS (clip-path, gradients, etc.). The result is a chart that:

Loads with the first paint
Requires zero chart library on the page
Is fully visible to crawlers
Can still be updated dynamically

And with the Developer API, you can generate these charts from your own backend or frontend.

The Performance Problem with Traditional Charts

A typical JS charting library does this:

Download the library
Wait for JavaScript to parse and execute
Create DOM / Canvas / SVG elements
Render the chart
Re-render on every data change

This creates several issues:

Problem	Impact
Heavy JS payload	Slower LCP & TTI
Render-blocking	Chart appears late
Client-side only	Harder for crawlers to index
Re-render cost	Jank on data updates

ProvChart removes almost all of this.

How ProvChart Works

You send data to the API (or use the visual builder)
ProvChart compiles the data into CSS variables
It returns pure HTML + CSS
You drop that into your page

The browser then paints the shape using CSS. No charting library is shipped to the user.

When you need to update the chart, you just change the CSS custom properties. The browser handles the transition natively.

Connecting Your Data to the ProvChart API

Here’s a real example that generates a multi-series chart:

<div id="chart-container"></div>

<script type="module">
  try {
    const res = await fetch("https://provchart-api.devtem.org/api/v1/generate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-API-Key": "YOUR_API_KEY"
      },
      body: JSON.stringify({
        type: "line",
        series: [
          { name: "Organic",  color: "#8b7bff", points: [18, 28, 35, 42, 48, 55, 62] },
          { name: "Direct",   color: "#4fd8c4", points: [12, 22, 30, 38, 45, 50, 58] },
          { name: "Referral", color: "#f0a860", points: [8, 15, 22, 28, 33, 40, 46] },
          { name: "Social",   color: "#ff5e7d", points: [5, 12, 18, 25, 30, 36, 42] },
          { name: "Email",    color: "#5ea8ff", points: [3, 9, 14, 20, 26, 32, 38] }
        ],
        axisX: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        theme: "dark"
      })
    });

    const data = await res.json();

    if (data.success) {
      // Inject the chart
      document.getElementById("chart-container").innerHTML = data.html;

      // Inject the CSS
      document.querySelector("head").insertAdjacentHTML(
        "beforeend",
        `<style>${data.css}</style>`
      );
    } else {
      console.error("API Error:", data.error);
    }
  } catch (err) {
    console.error("Fetch Error:", err);
  }
</script>

That’s all you need. The chart is now pure HTML + CSS on the page.

Why This Is Great for SEO & Crawlability

Because the chart is delivered as normal HTML and CSS:

Search engines see the content on the first crawl
No need to wait for JavaScript execution
No hydration delay
Works perfectly with static site generators

This is especially valuable for:

Documentation sites
Marketing pages
Dashboards that need to be shareable / indexable
Content that should appear in search results

Developer API Highlights

Feature	Details
Endpoint	`POST /api/v1/generate`
Authentication	API Key (`X-API-Key` header)
Response	`{ html, css }`
Chart types	line, area, bar, stackedbar, hbar, scatter, combo, gauge
Free tier	5 generations so you can test
Pro	500 generations / month
Business	5,000 generations / month

You can create an API key and try it immediately from the Pro Dashboard — even on the free plan you get 5 test generations.

Supported Chart Types

line – Multi-series line charts
area – Filled area charts
bar / stackedbar – Vertical bars
hbar – Horizontal bars
scatter – Scatter plots
combo – Mixed bar + line
gauge – Circular KPI gauges

All of them are rendered with pure CSS.

When to Use ProvChart

Great fit when you care about:

Performance (LCP, TTI, bundle size)
SEO / crawlability
Static or mostly-static pages
Simple live updates without heavy re-renders

Less ideal when you need:

Extremely complex interactions
Real-time streaming with thousands of points
Heavy chart animations driven by JavaScript

Getting Started

Try the free visual builder (no signup)

→ chart.devtem.org/get-started
Create an API key (free users get 5 test generations)

→ chart.devtem.org/dashboard
Read the full API docs

→ chart.devtem.org/docs

The rendering core is open source (st-core.fscss). The hosted API and Pro features are provided by DevTemple.

Final Thought

You don’t always need a heavy charting library.

Sometimes the best chart is the one that:

Loads instantly
Weighs almost nothing
Is fully visible to both users and search engines
Still lets you connect real data

That’s what ProvChart is built for.

Happy building.

ProvChart: Pure CSS Charts — No JavaScript, No Libraries, No Hydration Delay

FSCSS tutorial — Thu, 20 Aug 2026 14:24:44 +0000

ProvChart: Charts Made with `--css`, Not JavaScript

What if your charts didn’t need a single line of JavaScript?

No Chart.js.

No D3.

No React chart library.

No hydration delay.

Nothing for a crawler to wait on.

Just HTML + CSS.

That’s exactly what ProvChart delivers.

The Problem with Chart Libraries

Most charting solutions today ship kilobytes (sometimes hundreds of kilobytes) of JavaScript. They require:

A runtime
Hydration
DOM manipulation after the page loads
Extra work for search engines and accessibility tools

Even “lightweight” libraries still cost you performance and complexity.

ProvChart takes a different approach.

How ProvChart Works

ProvChart compiles your data into CSS custom properties.

The browser then paints the shapes using pure CSS (gradients, transforms, grid, absolute positioning, etc.).

You get:

Zero JavaScript shipped to the client
Instant first paint
Perfect for static sites, SSG, and performance-critical pages
Fully crawlable HTML

You simply:

Enter your series data
Choose a chart type (Bar, Stacked Bar, Horizontal Bar, Line, Gauge…)
Optionally add X-axis labels
Hit Generate via Pro Engine
Copy the HTML + CSS

Done.

Supported Chart Types

Vertical Bar
Stacked Bar
Horizontal Bar
Line
Gauge
More coming soon

Here’s what a stacked bar looks like:

And a multi-series line chart:

Everything is pure CSS under the hood.

Why Pure CSS Charts Matter

Benefit	Why it matters
Zero JS	No runtime cost, no hydration
Instant paint	Charts appear with the first paint
SEO-friendly	Crawlers see real HTML
Tiny footprint	Only the CSS you need
Framework-agnostic	Works with any stack
No dependency hell	Copy-paste and forget

This is especially powerful for:

Landing pages
Documentation sites
Marketing dashboards
Static blogs
Performance-sensitive apps

Try It Yourself

Go to chart.devtem.org
Add your data series
Generate
Copy the HTML + CSS
Paste into your project

That’s it.

Useful Links

Live App: https://chart.devtem.org
Docs: https://chart.devtem.org/docs
Gallery: https://chart.devtem.org/gallery
Dashboard: https://chart.devtem.org/dashboard
Pricing: https://chart.devtem.org/pricing
GitHub: https://github.com/fscss-ttr

Free vs Pro

The free plan already lets you generate beautiful pure CSS charts.

The Pro Engine unlocks more advanced generation, extra series, and higher limits for production use.

Final Thoughts

We’ve been conditioned to think charts require JavaScript.

ProvChart proves they don’t.

Sometimes the best solution is the one that ships the least code.

Give it a try → chart.devtem.org

Would love to hear what you build with it.

Built with ❤️

FSCSS v1.1.25: pattern() is here 🎉

FSCSS tutorial — Tue, 18 Aug 2026 07:35:25 +0000

New in this release: pattern() — semantic pattern matching for your stylesheets.

Instead of memorizing exact selectors or class names, describe what you want in plain language, set a confidence threshold, and let FSCSS match it to reusable CSS.

Basic example

pattern(0.5: "Hello World card", `
  border-radius: 12px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
`)

.card {
  hello world card
}

Write the phrase anywhere inside a selector, and FSCSS matches it against your defined patterns using similarity scoring — no exact match required, just close enough to clear the threshold.

Buttons

pattern(0.6: "rounded primary button", `
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  background: #ffffff;
  color: #764ba2;
  font-weight: 600;
  cursor: pointer;
`)

.btn {
  rounded primary button
}

Dark theme surfaces

pattern(0.8: "dark background and light text", `
  background: #212121;
  color: #ffffff;
`)

.chip {
  dark background and light text
}

.tooltip {
  dark background light text
}

Two different phrasings, same pattern — because it's matched on meaning, not exact wording.

Animations

pattern(0.7: "animated keyframe for spin", `
  @keyframes spin {
    0% { transform: rotate(0); }
    100% { transform: rotate(360deg); }
  }
`)

animated keyframe for spin

Patterns aren't limited to selector bodies — they can resolve to full at-rules too.

Content injection

pattern(0.9: "hello world heading", `h1:before{content: 'Hello World';}`)

hello world heading

What's shipped

✅ CDN
✅ API
✅ CLI
✅ Available now on v1.1.25

What's coming

VS Code extension support (syntax highlighting + autocomplete for pattern()) isn't live yet — landing August 20, 2026.

Full explanation coming soon. Try it out and let me know what patterns you build 👇

St-core.fscss Multi-Line Chart Pure CSS

FSCSS tutorial — Mon, 17 Aug 2026 17:01:49 +0000

st-core.fscss is a pure-CSS charting system that renders line charts with no SVG, no Canvas, and no JavaScript charting library. It uses:

clip-path: polygon() for the line shapes
CSS custom properties (--st-p1 … --st-p8) for the 8 data points
FSCSS mixins that expand at compile/runtime into the required CSS

How Multi-Line Charts Work

You declare one @st-chart-line renderer. Every element that matches the class becomes an independent line.

The chart container can hold a default dataset (@st-chart-points).
Line 1 inherits that default.
Additional lines override with their own @st-chart-points.
Each line gets its own color via background or color.

X positions are fixed (0 %, 14 %, 28 %, 42 %, 57 %, 71 %, 85 %, 100 %).

Y values are given on a 0–100 scale (100 = top of the chart). The library inverts them internally for CSS coordinates.

Complete Multi-Line Chart Example

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

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

@st-root()

.chart {
  position: relative;
  height: 200px;
  background: var(--st-surface);
  border-radius: var(--st-radius-lg);
  overflow: hidden;
  /* default dataset – inherited by line-1 */
  @st-chart-points(20, 25, 21, 37, 30, 60, 27, 50)
}

/* single renderer for all lines */
@st-chart-line(.chart-line)

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

/* line-1 inherits container data */
.line-1 {
  background: #32D8D4;
}

/* line-2 has its own dataset */
.line-2 {
  background: #E8A030;
  @st-chart-points(10, 20, 16, 15, 66, 50, 80, 54)
}

/* line-3 has its own dataset */
.line-3 {
  background: #B840C8;
  @st-chart-points(5, 39, 20, 30, 27, 70, 60, 70)
}

/* optional grid + axes */
@st-chart-grid(.chart-grid, 10, 7)
@st-chart-axis-y(.y-axis)

.chart-grid {
  opacity: 0.08;
}
</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>

Key Rules

Rule	Explanation
One renderer	`@st-chart-line(.chart-line)` is declared once
Default data	Container’s `@st-chart-points` is inherited by the first line
Overrides	Later lines set their own `@st-chart-points`
Color	Set with `background` (or `color` + `currentColor`)
Line thickness	`@st-chart-line-width(2.5px)` (default is 1.5 px)
Grid / axes	Optional helpers for visual polish

Design Tokens (`@st-root`)

Call @st-root() once (usually at the top of your stylesheet). It injects these CSS custom properties:

Colors

Token	Default	Purpose
`--st-bg`	`#0e0d14`	Page background
`--st-surface`	`#161422`	Chart / surface background
`--st-card`	`#1c1a2e`	Card background
`--st-accent`	`#9d7eff`	Primary accent
`--st-accent-2`	`#c4a8ff`	Secondary accent
`--st-accent-dim`	`#3a2e6e`	Dimmed accent
`--st-green`	`#4fffb0`	Positive / up
`--st-red`	`#ff5e7d`	Negative / down
`--st-text`	`#e8e3ff`	Primary text
`--st-muted`	`#6b6488`	Muted text / axis labels
`--st-border`	`rgba(157,126,255,.15)`	Borders

Radius & Spacing

Token	Default
`--st-radius-xl`	`40px`
`--st-radius-lg`	`16px`
`--st-radius-md`	`12px`
`--st-radius-sm`	`10px`
`--st-pad`	`24px`

Chart-specific

Token	Default	Purpose
`--st-p1` … `--st-p8`	sample values	Y data points
`--st-chart-line-width`	`1.5px`	Stroke thickness

You can override any token globally or scoped to a single chart:

.chart {
  --st-accent: #32D8D4;
}

HTML Structure Summary

<div class="chart">                 <!-- container + default data -->
  <div class="chart-line line-1"></div>  <!-- inherits default data -->
  <div class="chart-line line-2"></div>  <!-- own @st-chart-points -->
  <div class="chart-line line-3"></div>  <!-- own @st-chart-points -->
  <div class="chart-grid"></div>         <!-- optional -->
  <div class="y-axis">…</div>            <!-- optional -->
</div>
<div class="x-axis">…</div>              <!-- optional, usually outside -->

Runtime Data Updates (optional JS)

Because data lives in CSS variables, you can update any line by writing properties:

const line2 = document.querySelector('.line-2');
[15, 30, 25, 40, 55, 45, 70, 60].forEach((v, i) => {
  line2.style.setProperty(`--st-p${i + 1}`, `${100 - v}%`);
});

The browser repaints the clip-path automatically — no redraw library needed.

Sources

Repository and examples:
Help us star the repo if it helps 🙏

This gives you a zero-JS-runtime (or near-zero) multi-series line chart that stays extremely lightweight.

Introducing customizable.fscss - a pure CSS page-styling system

FSCSS tutorial — Sat, 15 Aug 2026 09:46:07 +0000

Every site ends up rebuilding the same handful of pages: a landing page, a 404, a terms page, an about page, a blog post. Different content, same underlying shapes — a nav bar, a heading with supporting text, some cards, a closing call to action, a footer. customizable.fscss is a pure CSS module for exactly that: the recurring page structure, built once, reused everywhere it's needed, with nothing forced on a page it doesn't use.

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

<style>
@import((page-root, page-base, page-hero, page-btn, page-btn-primary) from customizable)

@page-root()
@page-base(body)
@page-hero(.page-hero)
@page-btn(.page-btn)
@page-btn-primary(.page-btn-primary)
</style>

<section class="page-hero">
  <h1>A modern landing page, built entirely in CSS</h1>
  <p>Swap the copy, drop in your own images, and it adapts down to any screen size.</p>
  <a href="#" class="page-btn page-btn-primary">Get started</a>
</section>

Just CSS mixins compiled by FSCSS.

The core idea: components, not a template

Most page kits hand you one fixed layout and expect you to delete the parts you don't want. customizable.fscss works the other way — each piece is its own independent mixin, and a page imports only what it actually uses:

@import((page-root, page-base, page-404, page-btn, page-btn-primary) from customizable)

That's the entire import for a 404 page. No hero styles, no feature grid, no footer columns compiled in for a page that will never render them. A full marketing landing page pulls in more:

@import((*) from customizable)

Same module, two completely different outcomes, because the selection list decides what actually ships.

What's in it

Navigation — sticky, blurred on scroll, wraps its links on narrow screens instead of overflowing
Hero section — fluid heading size via clamp(), action buttons that stack full-width on mobile
Badge — a small pill with a glowing dot, for "now live" or version announcements
Images — three related mixins: page-img for general content images, page-hero-image for a larger screenshot/mockup below the hero copy, page-figure for an image-plus-caption pair inside long-form content
Buttons — a shared base plus primary/ghost variants
Feature grid — auto-reflowing cards, collapses to one column on mobile
CTA banner — a closing statement with its own gradient background
Footer — split into a multi-column link grid and a separate copyright bar, so a page can use either independently
404 page — fills the viewport, centers itself, no dependency on anything else on the page
page-prose — a full typography scale for long-form content: terms of service, about pages, blog posts

One token layer drives everything

Every color, radius, spacing value, and font comes from a single set of CSS custom properties, written once by page-root:

@page-root()

:root {
  --page-accent: #0fcbe8;
  --page-radius: 12px;
}

Because every component reads from these variables instead of hardcoded values, that two-line override changes the accent color across the navigation, badges, buttons, and CTA banner at once. No hunting through component definitions to restyle a brand.

Responsive by default, not by afterthought

Every structural mixin carries its own breakpoint at 640px, written inside the mixin itself rather than as a separate stylesheet bolted on later. That means the responsive behavior travels with the component the moment it's imported — a page doesn't need to reimplement mobile handling for something it just pulled in. Stacked hero buttons, single-column feature grids, wrapped navigation links, and a reduced-column footer all come included.

Try it

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" defer></script>
<style>
  @import((*) from customizable)
</style>

Or compile ahead of time with the CLI for zero runtime dependency:

npm install -g fscss
fscss page.fscss page.css

Full documentation, every component's markup, the complete token reference, and known limitations are in the README: github.com/fscss-ttr/customizable.fscss

If a page type you build often isn't covered here, say so — that's usually where the next addition to the module comes from.

open-source: https://github.com/fscss-ttr/customizable.fscss

MIT License

Creating modern forms with form.fscss — pure CSS

FSCSS tutorial — Fri, 14 Aug 2026 12:42:40 +0000

Floating labels. Inline validation. Custom checkboxes, radios, and a toggle switch. A gradient button with a press-down micro-interaction. Every bit of it below is CSS — no form library, no useState, no event listener wiring up a class toggle.

That's form.fscss — the module in the FSCSS ecosystem. Same philosophy each time: solve the hard visual problem once, ship it as importable mixins, let the browser do the actual work.

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

<style>
@import((*) from form)

@form-root()
@form-group(.form-group)
@form-input(.form-input)
@form-label(.form-label)
@form-float(.form-group, .form-input, .form-label)
@form-checkbox(.form-checkbox)
@form-btn(.form-btn)
@form-btn-primary(.form-btn-primary)
</style>

<div class="form-group">
  <input class="form-input" type="text" placeholder=" ">
  <label class="form-label">Full name</label>
</div>

<label class="form-checkbox">
  <input type="checkbox" checked><span></span> I agree to the Terms
</label>

<button class="form-btn form-btn-primary">Create account</button>

The two tricks doing all the work

Forms feel like they need JavaScript because most tutorials reach for it immediately. Two native CSS mechanisms cover almost everything a "modern" form needs.

Floating labels run entirely on :placeholder-shown. Give the input placeholder=" " — a literal space, not empty — and the browser now knows, purely in CSS, whether the field is empty and unfocused:

.form-input:focus + .form-label,
.form-input:not(:placeholder-shown) + .form-label {
  top: -9px;
  font-size: 11px;
  color: var(--form-accent);
}

No state, no class toggling on keyup. The label just reacts to what the browser already knows about the input.

Checkboxes, radios, and the switch all use the classic checkbox-hack: the real <input> stays in the DOM (so it keeps native keyboard support and form submission) but is visually hidden, and a sibling <span> becomes the thing you actually see:

.form-checkbox input { opacity: 0; position: absolute; }
.form-checkbox input:checked + span::after {
  transform: rotate(45deg) scale(1); /* the checkmark, drawn from two borders */
}

The checkmark itself isn't an icon font or an SVG — it's two border sides on a pseudo-element, rotated 45 degrees. Same trick powers the radio dot and the switch thumb slide, just with different shapes and transforms.

Validation

Add .is-error or .is-success straight to the field wrapper. One mixin call registers the rule; every field just reacts to its own class:

<div class="form-group is-error">
  <input class="form-input" type="email" placeholder=" ">
  <label class="form-label">Email address</label>
  <span class="form-help">Please enter a valid email</span>
</div>

Your actual validation logic — regex, an API check, whatever — still needs real JS somewhere. But the presentation layer of "this field is wrong, here's why" needs nothing but toggling one class name. no state management for something.

Full example

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

<style>
@import((*) from form)

@form-root()

body {
  min-height: 100vh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--form-bg);
  font-family: 'Syne', sans-serif;
}

.card {
  width: 100%;
  max-width: 380px;
  background: #1c1a2e;
  border: 1px solid var(--form-border);
  border-radius: 20px;
  padding: 32px;
}

@form-group(.form-group)
@form-input(.form-input)
@form-label(.form-label)
@form-float(.form-group, .form-input, .form-label)
@form-help(.form-help)
@form-validation(.form-group)
@form-select(.form-select)
@form-select-arrow(.form-select-wrap)
@form-checkbox(.form-checkbox)
@form-switch(.form-switch)
@form-btn(.form-btn)
@form-btn-primary(.form-btn-primary)
</style>

<div class="card">
  <div class="form-group">
    <input class="form-input" type="text" placeholder=" ">
    <label class="form-label">Full name</label>
  </div>

  <div class="form-group is-success">
    <input class="form-input" type="text" placeholder=" " value="devtemple_creator">
    <label class="form-label">Username</label>
    <span class="form-help">Username is available</span>
  </div>

  <div class="form-select-wrap">
    <select class="form-select">
      <option>Creator</option>
      <option>Buyer</option>
    </select>
  </div>

  <label class="form-checkbox">
    <input type="checkbox" checked><span></span> I agree to the Terms
  </label>

  <button class="form-btn form-btn-primary" style="width:100%;">Create account</button>
</div>

Every visual state in that form — resting, focused, filled, valid, invalid, checked, hovered, pressed — is handled by CSS pseudo-classes doing what they were always built to do. JavaScript's only job left is your logic: submit handling, async validation, whatever's actually specific to your product.

Try it

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" defer></script>
<style>
  @import((*) from form)
</style>

Full docs, token reference, and markup gotchas (input-before-label ordering, the placeholder=" " requirement, sibling-selector rules):

github.com/fscss-ttr/form.fscss

How st-core.fscss "understands" your data without a single line of JavaScript

FSCSS tutorial — Sun, 09 Aug 2026 14:01:58 +0000

No framework. No runtime data binding. No virtual DOM diffing a chart shape. And yet this compiles into a full portfolio analytics dashboard — stat cards, a trending line chart with a tooltip, category bars — from nothing but CSS:

<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)
@st-stat-card(.stat-card)
@st-chart-fill(.chart-fill)
@st-chart-line(.chart-line)
@st-chart-dot(.chart-dot, 71, 75)
@st-chart-grid(.chart-grid, 8, 7)
@st-chart-axis-x(.x-axis)
@st-cat-bar-fill(.bar-fill, 0)

.chart {
  width: 100%;
  height: 200px;
  border-radius: var(--st-radius-lg);
  position: relative;
  overflow: hidden;
  background: var(--st-surface);

  @st-chart-points(40, 55, 48, 62, 58, 75, 58, 70)
}
</style>

That's not a placeholder — that's the actual chart. No <canvas>, no chart.render(), no dataset passed to a library. So how does it "know" what shape to draw? It doesn't, exactly — and that's the whole trick.

FSCSS never does math. It only writes variables.

Here's the part people usually assume is happening and isn't: FSCSS doesn't calculate a chart shape, evaluate your data, or run any logic in the browser. To prove it, here's the actual compiled output of @st-chart-points(40, 55, 48, 62, 58, 75, 58, 70) — not a guess, copy-pasted straight from the compiler:

.chart {
  width: 100%;
  height: 200px;
  border-radius: var(--st-radius-lg);
  position: relative;
  overflow: hidden;
  background: var(--st-surface);
  --st-p1: 60%;
  --st-p2: 45%;
  --st-p3: 52%;
  --st-p4: 38%;
  --st-p5: 42%;
  --st-p6: 25%;
  --st-p7: 42%;
  --st-p8: 30%;
}

Eight numbers become eight CSS custom properties, each one just 100 - value. That's the entire "intelligence" of the mixin — a compile-time substitution, nothing more. The actual chart shape comes from .chart-fill and .chart-line, which are static rules, already written, that reference those same eight variables:

.chart-fill {
  position: absolute;
  inset: 0;
  clip-path: polygon(
    0% var(--st-p1),
    14% var(--st-p2),
    28% var(--st-p3),
    42% var(--st-p4),
    57% var(--st-p5),
    71% var(--st-p6),
    85% var(--st-p7),
    100% var(--st-p8),
    100% 100%,
    0% 100%
  );
  background: linear-gradient(180deg, color-mix(in srgb, var(--st-accent) 35%, transparent), transparent);
}

The browser's own CSS engine resolves var(--st-p3) and reflows the polygon — the same mechanism that's always redrawn width: var(--x) on any element, just pointed at shape coordinates instead of a box. FSCSS's job ends the moment those eight variables exist. Everything visual after that is native CSS doing what it was always capable of.

That's why the result still looks intentional and modern despite there being zero runtime logic: the shape math was solved once, by hand, when st-core.fscss was written — gradient fills, glow filters, radius tokens, spacing scale. Your data just slots into variables that were designed around already. You're not generating a design. You're filling in one that already exists.

The same trick shows up everywhere in the module

Once you see the "just compile to a variable" pattern in the chart, you start noticing it's the whole module, not a one-off:

The data-point dot — @st-chart-dot(.chart-dot, 71, 75) compiles to:

.chart-dot {
  position: absolute;
  left: calc(71% - 6px);
  top: calc(25% - 6px);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--st-accent);
}

Same 100 - y math as the chart points (100 - 75 = 25), just applied to a dot's top offset instead of a polygon vertex. One coordinate formula, reused everywhere position needs to invert against a top-down layout.

Category bars — @st-cat-bar-fill(.bar-fill, 0) compiles a base rule:

.bar-fill {
  --st-cat-bar-fill-range: 0%;
  height: 100%;
  width: var(--st-cat-bar-fill-range);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--st-accent), var(--st-accent-2));
  transform-origin: left;
}

The mixin only runs once. Per-bar values like .direct { --st-cat-bar-fill-range: 82%; } aren't separate mixin calls re-triggering anything — they're just normal CSS cascade, a more specific selector overriding a variable's default. FSCSS already stepped out of the picture by the time that resolves.

Two ways to ship it

Runtime / CDN — what's in every example above. FSCSS compiles the <style> block in-browser, once, on load. Fast to prototype with, zero build step, but you're shipping the compiler to the client.

CLI / build-time, for production:

npm install -g fscss
fscss dashboard.fscss dashboard.css

<link rel="stylesheet" href="dashboard.css">

Identical output — the block above is literally what the CLI would emit — computed ahead of time instead of in the browser. No runtime dependency, no parse step on load, best possible performance. This is the mode you want once a project leaves "demo" and becomes production.

Real data still works — because the output is just variables

This is what makes it more than a static mockup: since every mixin bottoms out in plain custom properties, updating the chart with live data doesn't need FSCSS at runtime at all. Plain JavaScript, one line:

document.querySelector('.chart').style.cssText = `
  --st-p1: 40%; --st-p2: 75%; --st-p3: 55%;
  --st-p4: 60%; --st-p5: 48%; --st-p6: 66%;
  --st-p7: 52%; --st-p8: 70%;
`;

The browser repaints the polygon natively — no re-render cycle, no diffing, no library. Pair it with transition: clip-path and updates animate for free. That's the actual split: FSCSS decides the shape language at compile time. JavaScript only ever supplies numbers, whenever your real data shows up.

Example:

https://figsh.github.io/st-core-charts/example

Try it

GitHub Repository: github.com/fscss-ttr/st-core.fscss

If you wire this up to something real — sockets, polling, whatever your data source is — I'd genuinely like to see it. The whole point of keeping the output this dumb is that it's easy to plug into anything.

Pure CSS 3D dice cube module: FSCSS

FSCSS tutorial — Fri, 07 Aug 2026 21:58:09 +0000

cube.fscss — a module for FSCSS, Here's the whole thing rendered live, nothing but <div>s and CSS:

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

<style>
@import((*) from cube)

@cube-root()
@cube-wrapper(.my-cube)
@cube-face(.my-cube div)
@cube-face-front(.my-cube .f1)
@cube-face-back(.my-cube .f2)
@cube-face-left(.my-cube .f3)
@cube-face-right(.my-cube .f4)
@cube-face-top(.my-cube .f5)
@cube-face-bottom(.my-cube .f6)
@cube-micro-dice(.my-cube .cube)

.my-cube {
  @cube-size(80px)
  transform: rotateY(50deg) rotateX(30deg);
  animation: spin 5s linear infinite;
}

@keyframes spin {
  0%   { transform: rotateX(20deg) rotateY(40deg); }
  100% { transform: rotateX(380deg) rotateY(400deg); }
}
</style>

<div class="my-cube">
  <div class="cube f1 dice-1"></div>
  <div class="cube f2 dice-2"></div>
  <div class="cube f3 dice-3"></div>
  <div class="cube f4 dice-4"></div>
  <div class="cube f5 dice-5"></div>
  <div class="cube f6 dice-6"></div>
</div>

No dice PNGs. No SVG paths. No canvas draw calls. Every pip is a radial-gradient.

Why build this

Already had a chart/dashboard module (st-core.fscss) built on clip-path polygons — no JS charting library, just CSS custom properties driving the shape. I wanted to see how far that "CSS does the visual math" philosophy could stretch into actual 3D space. A cube felt like the right next test: real perspective, real preserve-3d, real face geometry — not a flat illusion.

How the geometry works

A cube is 6 absolutely-positioned faces sharing one parent set to transform-style: preserve-3d. Each face gets pushed out from the center by half the cube's edge length, then rotated to face outward:

front  → translateZ(half)
back   → rotateY(180deg) translateZ(half)
top    → rotateX(90deg)  translateZ(half)
bottom → rotateX(-90deg) translateZ(half)
right  → rotateY(90deg)  translateZ(half)
left   → rotateY(-90deg) translateZ(half)

The entire cube's dimensions live in two CSS variables: --cube-size and --cube-half (always size ÷ 2). Resize the whole thing with one call:

.my-cube {
  @cube-size(150px)
}

Faces, offsets, and dice dot size all scale together — no manually recalculating six translateZ values by hand.

Dice pips, no font glyphs

I originally reached for Unicode dice characters (⚀⚁⚂⚃⚄⚅) for the pips, but font rendering for those glyphs is wildly inconsistent across platforms — some Android/Chrome stacks show them thin, outlined, or as tofu boxes. Stacked radial-gradients solved it instead:

.dice-3 {
  background-image:
    radial-gradient(circle var(--cube-dot-size) at 25% 25%, var(--cube-dot-color) 99%, transparent 100%),
    radial-gradient(circle var(--cube-dot-size) at 50% 50%, var(--cube-dot-color) 99%, transparent 100%),
    radial-gradient(circle var(--cube-dot-size) at 75% 75%, var(--cube-dot-color) 99%, transparent 100%);
}

Font-independent, crisp at any size, and the dot radius is itself a variable — so it scales automatically with @cube-size() instead of overflowing on a big cube or vanishing on a small one.

It's not just dice

Faces and face content are decoupled on purpose. The face mixins only handle position — what renders inside is a separate "micro" you apply on top. Right now there are eight:

cube-micro-fire — pulsing gradient-text fire
cube-micro-matrix — scrolling digital rain
cube-micro-neon — pulsing cyan/magenta glow border
cube-micro-float — subtle bounce, stacks with anything
cube-micro-glass — frosted backdrop-filter panel
cube-micro-holo — holographic shifting gradient text
cube-micro-glitch — RGB-split glitch shift
cube-micro-dice — the pips above

Mix and match per face on the same cube:

@cube-micro-fire(.my-cube .f1)
@cube-micro-matrix(.my-cube .f2)
@cube-micro-neon(.my-cube .f3)
@cube-micro-glass(.my-cube .f5)
@cube-micro-holo(.my-cube .f6)

Try it

CDN, drop-in:

<script src="https://cdn.jsdelivr.net/npm/fscss@1.1.24/exec.min.js" defer></script>
<style> 
  @import((*) from cube)
  /* your mixins here */
</style>

Or compile ahead of time with the CLI for a plain .css file, zero runtime:

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

Full docs, token reference, and more examples: github.com/fscss-ttr/cube.fscss

If you build something with it — I'd love to see. And if you hit issue, open an issue, it's open-source.

Stay tuned for more upcoming useful modules ❤️

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

DEV Community: FSCSS tutorial

patterns.fscss: a demo module for styling CSS in plain English

What it is

How it's structured

Using it

A note on threshold and collisions

Contributing

FSCSS @define, pattern(), and @import — Explained in Plain English

FSCSS @define, pattern(), and @import

Explained in plain English

1. @define — Create your own shortcut

2. pattern() — Describe what you want in normal words

3. @import — Bring shortcuts from other files

Quick mental model

Try it yourself

FSCSS tutorial Follow

How ProvChart Makes Your Pages Faster, Crawlable, and Still Dynamic

The Performance Problem with Traditional Charts

How ProvChart Works

Connecting Your Data to the ProvChart API

Why This Is Great for SEO & Crawlability

Developer API Highlights

Supported Chart Types

When to Use ProvChart

Getting Started

Final Thought

ProvChart: Pure CSS Charts — No JavaScript, No Libraries, No Hydration Delay

ProvChart: Charts Made with --css, Not JavaScript

The Problem with Chart Libraries

How ProvChart Works

Supported Chart Types

Why Pure CSS Charts Matter

Try It Yourself

Useful Links

Free vs Pro

Final Thoughts

FSCSS v1.1.25: pattern() is here 🎉

Basic example

Buttons

Dark theme surfaces

Animations

Content injection

What's shipped

What's coming

St-core.fscss Multi-Line Chart Pure CSS

How Multi-Line Charts Work

Complete Multi-Line Chart Example

Key Rules

Design Tokens (@st-root)

HTML Structure Summary

Runtime Data Updates (optional JS)

Sources

Introducing customizable.fscss - a pure CSS page-styling system

The core idea: components, not a template

What's in it

One token layer drives everything

Responsive by default, not by afterthought

Try it

open-source: https://github.com/fscss-ttr/customizable.fscss

MIT License

Creating modern forms with form.fscss — pure CSS

The two tricks doing all the work

Validation

Full example

Try it

github.com/fscss-ttr/form.fscss

How st-core.fscss "understands" your data without a single line of JavaScript

FSCSS never does math. It only writes variables.

The same trick shows up everywhere in the module

Two ways to ship it

Real data still works — because the output is just variables

Example:

Try it

GitHub Repository: github.com/fscss-ttr/st-core.fscss

Pure CSS 3D dice cube module: FSCSS

Why build this

How the geometry works

Dice pips, no font glyphs

It's not just dice

Try it

1. `@define` — Create your own shortcut

2. `pattern()` — Describe what you want in normal words

3. `@import` — Bring shortcuts from other files

ProvChart: Charts Made with `--css`, Not JavaScript

Design Tokens (`@st-root`)