FSCSS Shorthands – Axis, Aliases & Layout Helpers (1.2.5+)

What are shorthands?

1.2.5+

Shorthands are compile-time expansions. You write a short property; FSCSS rewrites it to standard CSS before the browser sees the stylesheet. No runtime API for these names.

Axis spacing

mx, px, gap-x, inset-y, safe-area

Size & radius

w/h, size, rounded, corners

Layout helpers

stack, center, auto-fit, truncate

Border & bg

border-x, bw-*, bg, bg-x

Install: npm install fscss@1.2.5 · CDN: https://cdn.jsdelivr.net/npm/fscss@1.2.5/runtime.min.js

Processing order

Side-scoped blocks (top| … |)
Axis & size
Aliases & layout helpers
Border & radius
Background
ratio-fit()

Longer names win over shorter ones (e.g. scroll-mx before mx, bg-size before size).

Quick example

card.fscss

.card {
  stack: 12px;
  px: 16px;
  py: 14px;
  rounded: 12px;
  bg: #12121a;
  border-x: 1px solid rgba(255,255,255,.08);
  shadow: 0 8px 24px rgba(0,0,0,.35);
  max-w: 360px;
}

.card h3 {
  fs: 1.1rem;
  fw: 600;
  m: 0;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  border-radius: 12px;
  background: #12121a;
  border-left: 1px solid rgba(255,255,255,.08);
  border-right: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  max-width: 360px;
}
.card h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
}

Axis & spacing

Shorthand	Expands to
`inset-x` / `inset-y`	left+right / top+bottom
`margin-x` / `mx`	margin-left + margin-right
`margin-y` / `my`	margin-top + margin-bottom
`padding-x` / `px`	padding-left + padding-right
`padding-y` / `py`	padding-top + padding-bottom
`gap-x` / `gap-y`	column-gap / row-gap
`scroll-mx` · `scroll-my` · `scroll-px` · `scroll-py`	scroll-margin / scroll-padding axes
`safe-x` · `safe-y` · `inset-safe`	padding/inset with `env(safe-area-inset-*)`

Size

Shorthand	Expands to
`w` / `h`	width / height
`min-w` · `max-w` · `min-h` · `max-h`	min/max width/height
`size: A`	width + height = A
`size: A B`	width: A; height: B
`min-size` / `max-size`	same 1- or 2-value pattern

.icon { size: 24px; }
.panel { size: 100% 200px; max-w: 480px; }

Property aliases

Single-property renames (not axis pairs):

m mt mb ml mr · p pt pb pl pr · fs fw ff lh ls · ta td tt ws tsh · ov ovx ovy · z op cur pe us pos · jc ai ac ji js as pi · fdir fwrap grow shrink basis · trans anim tf fil · shadow aspect obj-fit obj-pos

.title {
  fs: 1.25rem;
  fw: 700;
  lh: 1.2;
  ta: center;
}

Layout helpers

Helper	Result
`center: x` / `y` / other	flex justify / align / grid place-items center
`stack: G` / `hstack: G`	column/row flex + gap
`fill` / `fill: fixed`	absolute or fixed + inset 0
`abs-center`	absolute; inset 0; margin auto
`truncate` / `line-clamp: N`	ellipsis / multi-line clamp
`cols` / `rows`	grid; numeric → `repeat(N, 1fr)`
`auto-fit: MIN`	`repeat(auto-fit, minmax(MIN, 1fr))`
`glass: BLUR` / `ring: W`	backdrop-filter / box-shadow ring

Place, origin, object

place-x → justify-content + justify-items
place-y → align-content + align-items
origin-x / origin-y → transform-origin axis
object-x / object-y → object-position axis

Side-scoped blocks

.card {
  top| padding: 8px; border-width: 1px; |
  left| margin: 12px; |
}

Sides: top, bottom, left, right, block-start, block-end, inline-start, inline-end.

Rewrites known props (padding, margin, border, border-width/style/color, inset, offset, border-radius pairs) to that side.

Border & radius

border-x / border-y — full border left/right or top/bottom
border-t border-b border-l border-r
bw / bw-x / bw-t … — border-width
bs-* — border-style · bc-* — border-color
rounded / radius — border-radius
rounded-t/b/l/r, rounded-tl …, radius-top …

Background

bg → background
bg-x / bg-y → background-position-x/y
bg-size-x / bg-size-y — partial background-size
bg-color bg-image bg-repeat bg-pos bg-attachment bg-clip bg-origin bg-size

ratio-fit()

.media {
  inset: ratio-fit(16 / 9);
}

Expands to absolute positioning, inset 0, margin auto, aspect-ratio, and width/height capped with container-query units so the box fits its container while keeping the ratio.

Notes

Shorthands are optional — longhand CSS is always valid.
Works with CLI and browser runtime; production should compile to CSS.
Older helpers such as %2() / %3() still work alongside 1.2.5 shorthands.
Hub teaser: hub.devtem.org/#shorthands

Related: @define · Docs · Hub tutorial