FSCSS layout helpers: stack, hstack, center, size, rounded, ratio-fit, and friends

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:

1. Space along one axis (padding/margin x or y)
2. Stack children (column or row + gap)
3. Center content in a box
4. 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.

---