Größen 1.2.0

Setze Elementabmessungen mit Utilities für Breite, Höhe, Max-Breite und Seitenverhältnis. English: Sizing

Reifegrad: In VelinStyle 1.2.0 als stable dokumentiert. Studio und die vollständige Utility Engine bleiben geplant — ausgelieferte Utilities sind unter @layer utilities von Hand geschrieben, kein vollständiger Variantengenerator.

Wann verwenden

Setze Breite/Höhe/Max-Breite mit Größen-Utilities, die auf gängige Bruchteile und Tokens abgebildet sind.

Wann nicht

Bevorzuge Container + Grid für Seitenbreiten statt einzelner w-*-Klassen auf jedem Abschnitt.

Breite

<div class="velin-w-25">Breite 25%</div>
<div class="velin-w-50">Breite 50%</div>
<div class="velin-w-75">Breite 75%</div>
<div class="velin-w-100">Breite 100%</div>
<div class="velin-w-auto">Breite auto</div>

Breite 25%

Breite 50%

Breite 75%

Breite 100%

Breite auto

Maximale Breite

<div class="velin-mw-100">Maximale Breite 100%</div>
<div class="velin-mw-sm">Maximale Breite sm (540px)</div>
<div class="velin-mw-md">Maximale Breite md (720px)</div>
<div class="velin-mw-lg">Maximale Breite lg (960px)</div>

Maximale Breite 100%

Maximale Breite sm (540px)

Maximale Breite md (720px)

Maximale Breite lg (960px)

Höhe

<div class="velin-h-25">Höhe 25%</div>
<div class="velin-h-50">Höhe 50%</div>
<div class="velin-h-100">Höhe 100%</div>
<div class="velin-h-auto">Höhe auto</div>
<div class="velin-vh-100">100vh</div>
<div class="velin-min-vh-100">Min. 100vh</div>

Höhe 25%

Höhe 50%

Höhe 100%

Höhe auto

100vh

Min. 100vh

Seitenverhältnis

<div class="velin-ratio velin-ratio-1x1">1:1</div>
<div class="velin-ratio velin-ratio-4x3">4:3</div>
<div class="velin-ratio velin-ratio-16x9">16:9</div>
<div class="velin-ratio velin-ratio-21x9">21:9</div>

1:1

4:3

16:9

21:9