[ @sdxc/u/size ]
inline-size
Applies inline-size — the logical width, which is the physical height in a vertical writing mode.
import { is } from "@sdxc/u/size";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.is("full") | css({ inlineSize: "100%" }) |
Examples
Basic example
Use is(n) with a step of the spacing scale, like is(32) or is(64), to set an element's inline size, its width in horizontal text:
<div mix={[...]}>
<div mix={[is(96), ...]}>is(96)</div>
<div mix={[is(80), ...]}>is(80)</div>
<div mix={[is(64), ...]}>is(64)</div>
<div mix={[is(48), ...]}>is(48)</div>
<div mix={[is(40), ...]}>is(40)</div>
<div mix={[is(32), ...]}>is(32)</div>
</div>Percentages
Use is("full") to fill the container's inline size, or pass any CSS length as a string, like is("50%"):
<div mix={[...]}>
<div mix={[is("full"), ...]}>is("full")</div>
<div mix={[is("75%"), ...]}>is("75%")</div>
<div mix={[is("50%"), ...]}>is("50%")</div>
<div mix={[is("25%"), ...]}>is("25%")</div>
</div>Vertical writing modes
is() sizes the inline axis, so in a vertical writing mode like vertical-rl it sets the element's height instead of its width:
<div mix={[...]}>
<div mix={[is(40), bs(16), ...]}>horizontal-tb</div>
<div mix={[is(40), bs(16), raw({ writingMode: "vertical-rl" }), ...]}>
vertical-rl
</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.is("full"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.is("full"))Customizing your theme
Customizing spacing
Every numeric step multiplies --ui-spacing, so redefining it rescales every spacing and sizing utility at once:
:root {
--ui-spacing: 0.25rem;
}Every call that names the step now reads the new value:
is(4)Signature
u.is(value: SizeValue)