Utilities Cheat Sheet Guide
A quick reference to Vanduo's utility classes. These are pure CSS and work the same in static HTML and Vue templates. Spacing, gaps, and radii all follow the Fibonacci scale.
Spacing
| Class | Effect |
|---|---|
vd-p-fib-{1..13} / vd-m-fib-{1..13} | Fibonacci padding / margin (all sides) |
vd-pt / vd-pr / vd-pb / vd-pl-* | Padding per side (top/right/bottom/left) |
vd-mt / vd-mr / vd-mb / vd-ml-* | Margin per side |
vd-mx-auto | Centre horizontally with auto side margins |
vd-pad-xs … vd-pad-3xl | Named padding steps (3 / 5 / 8 / 13 / 21 / 34 / 55 px) |
Typography
| Class | Effect |
|---|---|
vd-text-xs … vd-text-xl | Font size (0.75 → 1.3125rem) |
vd-h1 … vd-h6 | Heading type scale |
vd-lead | Larger lead paragraph |
vd-text-center / -left / -right | Text alignment |
vd-text-muted / vd-text-primary | Text colour (semantic) |
vd-fw-bold / vd-fw-medium | Font weight |
Layout & display
| Class | Effect |
|---|---|
vd-container / -responsive / -fluid | Page containers |
vd-row / vd-col-{12} | 12-column grid |
vd-col-{sm,md,lg,xl,2xl}-* | Responsive column spans |
vd-d-flex / vd-d-block / vd-d-none | Display |
vd-justify-* / vd-align-* | Flex alignment |
vd-gap-fib-* | Flex/grid gap on the Fibonacci scale |
Colour, border & elevation
| Class | Effect |
|---|---|
vd-bg-primary / -secondary | Surface backgrounds |
vd-text-{success,warning,danger,info} | Semantic text colours |
vd-border / vd-border-color | Borders |
vd-rounded / vd-rounded-fib-* | Corner radius |
vd-shadow-fib-* / vd-glow-* | Elevation & glow |
Tip
Reach for utilities for one-off spacing and alignment; reach for component classes (vd-card, vd-btn) for recurring patterns. For deeper colour reference, see the colour palette.