A short walkthrough: HTML structure, FSCSS for layout and chrome, then optional polish with tokens and the form module. Everything compiles to plain CSS.

1. Markup first

Keep the form boring and accessible. FSCSS does not replace labels or name attributes.

<form class="contact" action="#" method="post"> <h1 class="contact__title">Contact</h1> <p class="contact__lead">We’ll reply within one business day.</p> <label class="field"> <span class="field__label">Name</span> <input class="field__input" type="text" name="name" autocomplete="name" required> </label> <label class="field"> <span class="field__label">Email</span> <input class="field__input" type="email" name="email" autocomplete="email" required> </label> <label class="field"> <span class="field__label">Message</span> <textarea class="field__input field__input--area" name="message" rows="4" required></textarea> </label> <button class="btn" type="submit">Send</button> </form>

2. Load FSCSS

Prototype (CDN runtime):

<script src="https://cdn.jsdelivr.net/npm/fscss@1.2.6/runtime.min.js" defer></script> <link type="text/fscss" href="form-page.fscss">

Or compile:

npm install -g fscss@1.2.6 fscss form-page.fscss form-page.css 
<link rel="stylesheet" href="form-page.css">

3. Style with layout helpers and tokens

stack, px / py, rounded, and friends (1.2.5+) keep the sheet short. See shorthands.

/* form-page.fscss */ :root { --bg: #0b1020; --surface: #121a30; --border: #22304f; --text: #e6edf7; --muted: #9fb0d0; --accent: #6366f1; --radius: 12px; } body { m: 0; min-h: 100vh; center: both; p: 24px; bg: var(--bg); color: var(--text); ff: system-ui, sans-serif; } .contact { w: 100%; max-w: 400px; stack: 16px; p: 24px; bg: var(--surface); border: 1px solid var(--border); rounded: 16px; } .contact__title { m: 0; fs: 1.35rem; } .contact__lead { m: 0; color: var(--muted); fs: 0.9rem; } .field { stack: 6px; } .field__label { fs: 0.8rem; color: var(--muted); } .field__input { w: 100%; px: 12px; py: 10px; rounded: var(--radius); border: 1px solid var(--border); bg: #0a0f1e; color: var(--text); font: inherit; } .field__input:focus { outline: 2px solid var(--accent); outline-offset: 2px; } .field__input--area { resize: vertical; min-h: 100px; } .btn { mt: 4px; px: 16px; py: 10px; border: 0; rounded: var(--radius); bg: var(--accent); color: #fff; font: inherit; fw: 600; cur: pointer; } .btn:hover { filter: brightness(1.08); }

What you get after compile: normal flex column + gap, axis padding, radius, and colors—no framework runtime.

4. Optional: reusable button with @define 

@define btn(bg: #6366f1){` display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border: 0; border-radius: var(--radius, 12px); background: @use(bg); color: #fff; font-weight: 600; cursor: pointer; `} .btn { @btn(var(--accent)) } .btn-ghost { @btn(transparent) border: 1px solid var(--border); color: var(--text); }

5. Optional: form.fscss module

When you want float labels and shared field chrome instead of hand-rolled classes:

@import((form-root, form-group, form-input, form-label, form-float, form-btn-primary) from form) @form-root() @form-float(.form-group, .form-input, .form-label)

Markup pattern (input before label, placeholder=" " for :placeholder-shown tricks) is documented with the module. Use selective imports so you only pull what the page needs.

6. Optional: semantic styling with pattern() (1.2.4+) 

pattern(0.55: "soft dark form card", ` background: #121a30; border: 1px solid #22304f; border-radius: 16px; padding: 24px; `) .contact { soft dark form card stack: 16px; max-w: 400px; }

Good for role-based phrases; keep critical layout in explicit rules so the form stays predictable.

7. Try it in the IDE

  1. Open fscss.devtem.org/ide
  2. Paste the HTML into an index.html and the FSCSS into form-page.fscss
  3. Ctrl+Enter to compile, preview to check focus states
  4. Export when you’re ready

Checklist

  • Labels associated with controls (wrapping <label> or for / id)
  • :focus styles visible on keyboard
  • Tokens on :root so themes don’t require rewriting fields
  • Production: compiled CSS only, not the runtime

A simple contact form is a good first FSCSS page: one column (stack), a few fields, one button—and the same file can grow into tokens, @define, or a form module without changing the HTML structure.