Spacing

Spacing utilities follow a shared scale. Apply them to any element; add a breakpoint segment (sm, md, lg, xl, xxl) for responsive variants.

The steps read the --cffy-space-* tokens (--cffy-space-4 … --cffy-space-192, number = px at a 16px root), which derive from --cffy-space-unit, so changing --cffy-space-unit or the density rescales components and utilities together. px stays a 1px hairline.

The scale

Steps 1–10 are --cffy-space-4, --cffy-space-8, --cffy-space-16, --cffy-space-24, --cffy-space-48, --cffy-space-72, --cffy-space-96, --cffy-space-120, --cffy-space-144 and --cffy-space-192.

Margin & padding

{m|p}{side}-{step} — side is t, b, s (start), e (end), x, y, or none:

<div class="mt-3 mb-4">Margin-top 1rem, margin-bottom 1.5rem</div>
<div class="px-4 py-2">1.5rem horizontal, 0.5rem vertical padding</div>
<div class="m-0 p-5">Reset margin, 3rem padding</div>
<div class="mx-auto">Horizontally centered block</div>

Responsive:

<div class="p-2 p-md-4 p-xl-5">Padding grows with the viewport</div>

Gap (flex & grid)

gap-{0–10}, plus axis-specific gap-inline-* / gap-block-*. Gaps use a finer scale: step n is n times --cffy-space-unit, from --cffy-space-4 to --cffy-space-40 (gap-3 = --cffy-space-12 = 0.75rem, gap-10 = --cffy-space-40 = 2.5rem).

<div class="d-flex gap-3">…</div>
<div class="d-grid gap-inline-4 gap-block-2">…</div>

Flow & sections

• flow-{step} — adds top margin between sibling children (> * + *); great for prose.
• block-spacing-{step} — vertical section padding with scroll-margin for anchored sections.
• mt-section (+ mt-section-sm / -md / -lg / -xl) — semantic top spacing for content hierarchy.

<article class="flow-3">
  <h2>Heading</h2>
  <p>Sibling elements get even vertical rhythm automatically…</p>
  <p>…with no per-child margins.</p>
</article>