Primitives
Primitives are unstyled, single-responsibility layout containers. They express an intent — vertical rhythm, a wrapping row, a centered column — instead of one CSS property, and sit between utilities and components: tokens → (utilities | primitives) → components. Every primitive consumes the same Fibonacci spacing tokens, so layouts stay in proportion. Configure each through its Vue props — pad, gap, max, min, ratio, threshold.
Box — padding & surface
A blank surface with Fibonacci padding via the pad prop.
<VdBox pad="fib-13">Padded surface</VdBox>Stack — vertical rhythm
Stacks children vertically with a consistent gap prop between them.
<VdStack gap="fib-8">
<div>First</div>
<div>Second</div>
<div>Third</div>
</VdStack>Inline — wrapping row
Lays items in a row that wraps, with an even gap prop in both directions.
<VdInline gap="fib-5">
<span class="vd-chip">Vue</span>
<span class="vd-chip">CSS</span>
<span class="vd-chip">Tokens</span>
</VdInline>Center — measure
Caps content width with the max prop and centers it horizontally — keeping line lengths readable.
<VdCenter max="fib-377">Readable, centered column.</VdCenter>Cover — fill & center
Fills a minimum height (the min prop) and centers its content vertically — ideal for heroes. Shown shorter here for space.
Vertically centered content
<VdCover min="half" gap="fib-5">
<p>Vertically centered content</p>
</VdCover>Frame — aspect ratio
Locks media to an aspect ratio with the ratio prop and crops to fit — no layout shift.
<VdFrame ratio="16-9">
<img src="/images/mountains-and-fog.jpg" alt="" />
</VdFrame>Switcher — auto row/stack
Lays children in a row, then flips them to a stack once the container drops below the threshold prop — responsive with no media query. Resize the window to see it switch.
<VdSwitcher threshold="fib-610" gap="fib-5">
<div>One</div>
<div>Two</div>
<div>Three</div>
</VdSwitcher>