@psp-asia/layout — PSP Rack & Rail grid + debug tools

Layout system for PSP development. v1.2.0 rebuilds grid.css from the Figma spec (Foundations → Rack & Rail) as plain CSS — flexbox + calc(), no Tailwind build required.

Package Contents

• grid.css — Rack (wrapping flex grid) + Rail (horizontal scroll)
• debug.css, debug.js — visual debugging overlay (dev only)

Installation

npm install @psp-asia/layout

Usage

Plain CSS — either works:

<link rel="stylesheet" href="node_modules/@psp-asia/layout/grid.css">

/* inside a Tailwind/PostCSS build */
@import "@psp-asia/layout/grid.css";

Debug tools (development only):

<link rel="stylesheet" href="node_modules/@psp-asia/layout/debug.css">
<script src="node_modules/@psp-asia/layout/debug.js"></script>

The system

Two containers, one column scale, no responsive prefixes — breakpoint behavior is built in. Never write md:col-6; just col-6.

<div class="rack">
  <div class="col-8">Main content</div>
  <div class="col-4">Sidebar</div>
</div>

<div class="rail">
  <div class="col-3">Card 1</div>
  <div class="col-3">Card 2</div>
  <div class="col-3">Card 3</div>
</div>

Rack (wrapping grid)

Column widths follow the design theory exactly, at every viewport width:

• sm (0–767px) — col-1 = half row (two fit side by side); col-2…col-12 = full row.
• md (768–1023px) — complementary pairs each fill a row: col-1+col-6, col-2+col-5, col-3+col-4 (equal halves); col-7…col-12 = full row.
• lg+ (1024px+) — true 12-column grid: col-N = N × unit + (N−1) × 16px gap, computed live with calc().

Offsets (self-centering)

offset-N centers the complementary column col-(12−N): margin-left = (100% − col-(12−N)) / 2. Because it derives from the actual column width, it can never drift out of sync.

<div class="rack">
  <div class="offset-3 col-6">Centered (3 + 6 + 3 = 12)</div>
</div>

On sm/md, offsets whose complement is full-width resolve to 0 automatically.

Rail (horizontal scroll)

Fixed-width cards, never wraps, scrollbar hidden:

• col-1…col-7: fixed card sizes per breakpoint (e.g. lg: 260, 320, 364, 400, 470, 512, 555px)
• col-8…col-11 (lg+): rack column width minus 32px peek
• col-12: full width minus 32px peek — slide mode with the next slide peeking in

Tokens

:root {
  --psp-gap: 16px;      /* column gap */
  --psp-gutter: 20px;   /* container side padding: 20 sm / 40 md / 32 lg+ */
  --psp-peek: 32px;     /* rail slide peek */
}

Rules

1. No responsive prefixes (lg:col-6) — the system owns breakpoints.
2. col-* must sit directly inside .rack or .rail.
3. Think in 12 columns; use offset-N for centering.
4. rail only when you want horizontal scrolling.

Changelog

• 1.2.0 — rebuilt from Figma spec: flexbox + calc (was CSS Grid tracks); exact at all viewport widths; self-centering offsets; rail peek; plain CSS (no @apply, raw <link> now works); fixed broken offsets and missing gap.
• 1.1.2 — CSS Grid track system.