Yumma CSS 3.23

Logical Sizing Utilities

Yumma CSS 3.23 introduces inline-size & block-size logical properties. These utilities specify dimensions relative to the writing mode, ensuring your layout remains consistent across different languages & orientations.

Inline Size

Use the xs- utility to control the logical inline size of an element. For horizontal writing modes, this is equivalent to width.

<div class="xs-(value)"></div>

Block Size

Use the ys- utility to control the logical block size of an element. This is equivalent to height in standard layouts.

<div class="ys-(value)"></div>

Min & Max Variants

We added the corresponding min- & max- variants for both properties. Use min-xs-, max-xs-, min-ys-, & max-ys- to define precise sizing constraints.

Upgrade

Check the Upgrading Guide for a full list of utility renames & removals.

pnpm up yummacss@latest