DEV Community

Cover image for FSCSS 1.2.5: size, padding-x, inset-x, and ratio-fit — without the usual CSS gymnastics
FSCSS tutorial profile image FSCSS tutorial
FSCSS tutorial for FSCSS tutorial

Posted on

FSCSS 1.2.5: size, padding-x, inset-x, and ratio-fit — without the usual CSS gymnastics

#css #fscss #opensource #frontend

Who else was waiting for CSS that could say size both axes, pad left and right, inset horizontally, or fit a ratio in a box — without stacking four properties or reaching for a utility framework?

FSCSS 1.2.5 ships compile-time property shorthands. You write short names; the CLI/runtime expands them to plain CSS. No runtime polyfill for these names in production if you compile ahead of time.

npm install fscss@1.2.5
fscss input.fscss output.css
Enter fullscreen mode Exit fullscreen mode

The pain these replace

Native CSS is powerful but often verbose for pairs:

/* “Make a square icon” */
width: 32px;
height: 32px;

/* “Horizontal padding only” */
padding-left: 16px;
padding-right: 16px;

/* “Pin left and right, leave top/bottom alone” */
left: 45px;
right: 45px;
/* not the same as inset: auto 45px — that sets all four */
Enter fullscreen mode Exit fullscreen mode

People solve this with design systems, Tailwind-style utilities, or copy-paste. FSCSS 1.2.5 puts the same idea in the stylesheet language, then emits standard CSS.

size / max-size — width and height together

FSCSS:

.icon-btn { size: 32px; }
.panel    { size: 100% 200px; max-size: 480px; }
Enter fullscreen mode Exit fullscreen mode

CSS:

.icon-btn { width: 32px; height: 32px; }
.panel {
  width: 100%;
  height: 200px;
  max-width: 480px;
  max-height: 480px;
}
Enter fullscreen mode Exit fullscreen mode

One value → both axes. Two values → width then height. Same idea for min-size / max-size.

padding-x / px, margin-x / mx, inset-x / inset-y

Horizontal and vertical pairs, without touching the other axis:

FSCSS:

.card {
  px: 16px;   /* or padding-x 16px */
  py: 14px;
  mx: auto;
  max-w: 360px;
}

.overlay-side {
  pos: absolute;
  inset-x: 45px;  /* left + right only */
  top: 0;
  h: 4px;
}
Enter fullscreen mode Exit fullscreen mode

CSS:

.card {
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 14px;
  padding-bottom: 14px;
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

.overlay-side {
  position: absolute;
  left: 45px;
  right: 45px;
  top: 0;
  height: 4px;
}
Enter fullscreen mode Exit fullscreen mode

That’s the “without invoking the other axis” story: not inset: auto 45px (which sets top/bottom too), but inset-x when you only mean left and right.

Also in the family: gap-x / gap-y, scroll margin/padding axes, safe-area helpers.

ratio-fit() — ratio inside a container

Fitting media to a box while keeping aspect ratio usually means absolute positioning, inset: 0, margin: auto, aspect-ratio, and careful width/height caps. ratio-fit() packages that expansion:

.media > img {
  inset: ratio-fit(16 / 9);
  obj-fit: cover;
}
Enter fullscreen mode Exit fullscreen mode

You get a compile-time expansion aimed at “fill the containing block, keep the ratio.” Details and exact formula: shorthands docs.

In a real template

The dual-phone budget UI (budget.fscss) mixes st-core@v2 charts, icon-mask, and 1.2.5 sugar:

body {
  ff: 'Inter', system-ui, sans-serif;
  bg: #e8eaf0;
  min-h: 100vh;
  center: both;
  gap: 40px;
  py: 40px;
  px: 20px;
  fwrap: wrap;
}

.icon-btn {
  size: 32px;
  rounded: 10px;
  bg: rgba(255,255,255,0.06);
  center: both;
}

.loan-card {
  mx: 22px;
  mb: 18px;
  rounded: 16px;
  px: 16px;
  py: 14px;
  hstack: 12px;
  ai: center;
}
Enter fullscreen mode Exit fullscreen mode

Preview / template folder: st-core templates · budget-app ui.

What else ships in the same release

  • Layout helpers: stack, hstack, center, auto-fit, truncate, line-clamp
  • Borders: border-x, rounded, corner variants
  • Background: bg, bg-x / bg-y
  • Aliases: fs, fw, jc, ai, pos, shadow, …
  • Side blocks: top| padding: 8px; |

Older value multiplexing (%2, %3) still works; 1.2.5 is about named properties that expand to longhands.

Takeaway

If you’ve been typing the same width/height or padding-left/right pairs for years — or wishing inset could mean only the x axis — FSCSS 1.2.5 is aimed at that. Write the short form, compile once, ship CSS the browser already understands.

Links

Top comments (0)