The padding and margin utility classes in Skeletonic share a single
five-step golden-ratio scale. Each step is rooted at
--gr-fsb (1.62 rem, the body font size) and scales up or down by
factors of Φ. The result is layout that breathes consistently from
inline buttons all the way to hero sections.
The five steps
| Class | Value | Token | Use it for |
|---|---|---|---|
xs |
~0.38 rem | var(--gr-small)rem |
Pill icons, badge inset, very tight clusters |
sm |
~0.62 rem | var(--gr-large)rem |
Inline form gaps, button-group separators |
md |
1.62 rem | var(--gr-fsb)rem |
Default body / card padding |
lg |
~2.62 rem | calc(var(--gr-fsb) × Φ) |
Section breathing room |
xl |
~4.24 rem | calc(var(--gr-fsb) × Φ²) |
Hero / landmark separation |
Values are emitted as rem units so they scale with the user's
root font-size — perfect for accessibility and for matching the type
scale exactly.
Visual ladder
Available class forms
For every step (xs / sm / md / lg / xl) the library emits:
.padding-{size} .margin-{size}
.padding-top-{size} .margin-top-{size}
.padding-bottom-{size} .margin-bottom-{size}
.padding-start-{size} .margin-start-{size} ← logical, RTL-aware
.padding-end-{size} .margin-end-{size} ← logical, RTL-aware
.margin-auto ← centring helper
The logical (-start / -end) forms compile to padding-inline-start
/ padding-inline-end (or margin-inline-*) so they auto-flip in
<html dir="rtl">. Pair them with the t-shirt size to get
padding-start-md, margin-end-lg, etc.
v1.x → v2.0 migration. The numeric scale (
.padding-0through.padding-11, percentage-based) was replaced with this five-step rem-based scale. The new system is shorter, more predictable, and easier to reason about. See the changelog for the full migration list.