Fluid Scale

vel-src: tokens.css

VeloraCSS uses clamp() for spacing and typography tokens so sizes scale smoothly between viewport widths — no breakpoints, no JavaScript, no sudden jumps.

Class	Properties
--vel-space-1	clamp(0.2rem, 0.5vw, 0.25rem)
--vel-space-2	clamp(0.4rem, 1vw, 0.5rem)
--vel-space-4	clamp(0.75rem, 2vw, 1rem)
--vel-space-8	clamp(1.5rem, 4vw, 2rem)
--vel-space-16	clamp(3rem, 6vw, 4rem)
--vel-size-sm	clamp(0.8rem, 1.5vw, 0.875rem)
--vel-size-base	clamp(0.9rem, 2vw, 1rem)
--vel-size-lg	clamp(1rem, 2.5vw, 1.125rem)
--vel-size-xl	clamp(1.1rem, 3vw, 1.25rem)
--vel-size-2xl	clamp(1.25rem, 4vw, 1.5rem)
--vel-size-3xl	clamp(1.5rem, 5vw, 1.875rem)
--vel-size-4xl	clamp(1.75rem, 6vw, 2.25rem)
--vel-size-5xl	clamp(2rem, 7vw, 3rem)

Examples

Fluid headings — resize the window to see smooth scaling

--vel-size-5xl · clamp(2rem, 7vw, 3rem)

Hero Title

--vel-size-3xl · clamp(1.5rem, 5vw, 1.875rem)

Section Heading

--vel-size-xl · clamp(1.1rem, 3vw, 1.25rem)

Card Heading

--vel-size-base · clamp(0.9rem, 2vw, 1rem)

Body text that scales fluidly between mobile and desktop without any media queries or JavaScript.

example.html

<div class="vel-card vel-p-6" style="display:grid;gap:1rem">
  <div>
    <div class="vel-text-muted vel-text-xs vel-mb-1" style="font-family:Cascadia Code,Consolas,monospace">--vel-size-5xl · clamp(2rem, 7vw, 3rem)</div>
    <div style="font-size:var(--vel-size-5xl,3rem);font-weight:900;line-height:1;color:var(--vel-text-base,#e2e8f0)">Hero Title</div>
  </div>
  <div>
    <div class="vel-text-muted vel-text-xs vel-mb-1" style="font-family:Cascadia Code,Consolas,monospace">--vel-size-3xl · clamp(1.5rem, 5vw, 1.875rem)</div>
    <div style="font-size:var(--vel-size-3xl,1.875rem);font-weight:700;line-height:1.2;color:var(--vel-text-base,#e2e8f0)">Section Heading</div>
  </div>
  <div>
    <div class="vel-text-muted vel-text-xs vel-mb-1" style="font-family:Cascadia Code,Consolas,monospace">--vel-size-xl · clamp(1.1rem, 3vw, 1.25rem)</div>
    <div style="font-size:var(--vel-size-xl,1.25rem);font-weight:600;line-height:1.4;color:var(--vel-text-base,#e2e8f0)">Card Heading</div>
  </div>
  <div>
    <div class="vel-text-muted vel-text-xs vel-mb-1" style="font-family:Cascadia Code,Consolas,monospace">--vel-size-base · clamp(0.9rem, 2vw, 1rem)</div>
    <div style="font-size:var(--vel-size-base,1rem);line-height:1.6;color:var(--vel-text-muted,#64748b)">Body text that scales fluidly between mobile and desktop without any media queries or JavaScript.</div>
  </div>
</div>

Fluid spacing — padding and gaps scale with the viewport

padding: var(--vel-space-4) — clamp(0.75rem, 2vw, 1rem)

Fluid Padding Card

This card's padding scales between 0.75rem (mobile) and 1rem (wide screen) based on viewport width — no breakpoints needed.

Primary

Secondary

gap: var(--vel-space-2)

example.html

<div style="display:grid;gap:var(--vel-space-4,1rem)">
  <div class="vel-card" style="padding:var(--vel-space-4,1rem)">
    <div class="vel-text-xs vel-text-muted vel-mb-2" style="font-family:Cascadia Code,Consolas,monospace">padding: var(--vel-space-4) — clamp(0.75rem, 2vw, 1rem)</div>
    <div class="vel-font-bold vel-mb-2">Fluid Padding Card</div>
    <div class="vel-text-muted vel-text-sm">This card's padding scales between 0.75rem (mobile) and 1rem (wide screen) based on viewport width — no breakpoints needed.</div>
  </div>
  <div class="vel-flex vel-items-center" style="gap:var(--vel-space-2,0.5rem)">
    <div class="vel-btn vel-btn-primary">Primary</div>
    <div class="vel-btn vel-btn-secondary">Secondary</div>
    <div class="vel-text-xs vel-text-muted" style="font-family:Cascadia Code,Consolas,monospace">gap: var(--vel-space-2)</div>
  </div>
</div>