Sizing 1.2.2

Set element dimensions with width, height, max-width, and aspect-ratio utilities. Deutsch: Gr??en

Maturity: Documented as stable in VelinStyle 1.2.0. Studio and the complete Utility Engine remain planned — shipping utilities are hand-authored under @layer utilities, not a full variant generator.

When to use

Set width/height/max-width with sizing utilities mapped to common fractions and tokens.

When not

Prefer containers + grid for page width rather than one-off w-* on every section.

Width

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

Width 25%

Width 50%

Width 75%

Width 100%

Width auto

Max Width

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

Max width 100%

Max width sm (540px)

Max width md (720px)

Max width lg (960px)

Height

<div class="velin-h-25">Height 25%</div>
<div class="velin-h-50">Height 50%</div>
<div class="velin-h-100">Height 100%</div>
<div class="velin-h-auto">Height auto</div>
<div class="velin-vh-100">100vh</div>
<div class="velin-min-vh-100">Min 100vh</div>

Height 25%

Height 50%

Height 100%

Height auto

100vh

Min 100vh

Aspect Ratio

<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