FSCSS layout helpers: stack, hstack, center, size, rounded, ratio-fit(), and friends
From version 1.2.5 FSCSS added a set of property shorthands aimed at everyday layout and chrome—spacing axes, flex stacks, sizing, and aspect boxes—without inventing a new component system. They compile to ordinary CSS. Use them in .fscss (CLI, runtime, or IDE); production can ship the compiled sheet only.
Full list and expansions: fscss.devtem.org/shorthands · language: fscss@1.2.5 - 1.2.6+
Why these exist
A lot of UI CSS is the same four ideas:
- Space along one axis (padding/margin x or y)
- Stack children (column or row + gap)
- Center content in a box
- Size a box (square, both axes, or fit a ratio)
Native CSS can do all of that, but the typing is noisy (display: flex; flex-direction: column; gap: … every time). These helpers expand at compile time so the mental model stays short.
Spacing axes
| Shorthand | Idea | Typical expansion |
|---|---|---|
mx / my | margin on x / y | margin-left + margin-right / top + bottom |
px / py | padding on x / y | same pattern for padding |
inset-x / inset-y | positioned inset on one axis | without forcing the other axis to 0 |
.card { px: 20px; py: 16px; mx: auto; max-w: 420px; } Use these when you only care about one axis. Prefer full margin / padding when all four sides share one value.
stack and hstack
Vertical and horizontal flex stacks with gap:
.panel { stack: 12px; /* column + gap */ } .toolbar { hstack: 8px; /* row + gap */ fwrap: wrap; /* if you also use wrap helpers */ } Roughly: display: flex, direction column or row, and gap from the value. Ideal for forms, toolbars, and card bodies where “children in a line with space between them” is the whole layout story.
center
Center children in the box (axis or both, depending on the form your build supports—commonly flex centering):
.hero { min-h: 40vh; center: both; /* or center: true — see docs */ } Handy for empty states, icon wells, and hero blocks without repeating align-items / justify-content every time.
size and friends
| Helper | Role |
|---|---|
size | width and height (one value → square, or two values) |
max-size / min-size | both axes’ max/min |
insert: ratio-fit(); | size a box to a ratio inside a container |
.avatar { size: 48px; rounded: 999px; } .thumb { size: 100% 180px; } .media { inset: ratio-fit(16 / 9); } ratio-fit is for the common “keep 16:9 (or any ratio) without a padding-hack essay.” Exact expansion is in the shorthands reference—treat it as the declarative cousin of aspect-ratio + constrained width/height patterns.
rounded and surface chrome
.card { rounded: 16px; bg: #121a30; shadow: 0 10px 30px #0003; } rounded maps to border-radius. Together with color/spacing shorthands (bg, p, m, …) you can sketch a card shell in a few lines and still compile to standard properties.
Small composed example
.page { min-h: 100vh; p: 24px; bg: #0b1020; color: #e6edf7; ff: system-ui, sans-serif; } .wrap { max-w: 960px; mx: auto; stack: 20px; } .row { hstack: 16px; fwrap: wrap; } .card { flex: 1; min-w: 240px; p: 20px; rounded: 16px; bg: #121a30; border: 1px solid #22304f; stack: 12px; } .icon { size: 40px; rounded: 12px; center: true; bg: #1b2745; } Read it top to bottom: page padding → centered column → horizontal row of cards → each card is a vertical stack. No design-system runtime—only CSS the browser already understands after compile.
Runtime note: fscss-props
If you only need property shorthands in the browser (not full @arr / @define / pattern()), fscss-props expands a similar surface at runtime and exposes JS APIs (element.fscssProp, fscssPropText) for live updates. Full language features still go through the FSCSS compiler (CLI, runtime.js / esm.js, or the IDE).
When to use what
| Goal | Prefer |
|---|---|
| One-off page / prototype | Shorthands in .fscss + CDN runtime or IDE |
| Design tokens + charts + modules | @import packs (st-core@v2, etc.) and shorthands for local layout |
| Production | Compile with CLI; ship the CSS file |
| JS-driven tweaks of padding/size only | fscss-props or set CSS variables / longhands from JS |
Shorthands do not replace modules. They remove friction between modules—nav bars, card grids, toolbars—where flex + gap + radius is enough.
Try it
npm install fscss@latest <script src="https://cdn.jsdelivr.net/npm/fscss@1.2.6/runtime.min.js" defer></script> Or open the FSCSS IDE, paste a .card { stack: 12px; rounded: 16px; p: 20px; } block, and hit compile.
