[ @sdxc/u/size ]
width
Applies the physical width property, for an element whose sizing is tied to the physical viewport axis; u.is() (inline-size) covers sizing along the logical inline axis.
import { width } from "@sdxc/u/size";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.width("full") | css({ width: "100%" }) |
Examples
Basic example
Use width(n) with a step of the spacing scale, like width(32) or width(64), to set an element's physical width:
width(96)
width(80)
width(64)
width(48)
width(40)
width(32)
<div mix={[...]}>
<div mix={[width(96), ...]}>width(96)</div>
<div mix={[width(80), ...]}>width(80)</div>
<div mix={[width(64), ...]}>width(64)</div>
<div mix={[width(48), ...]}>width(48)</div>
<div mix={[width(40), ...]}>width(40)</div>
<div mix={[width(32), ...]}>width(32)</div>
</div>Percentages
Use width("full") to fill the container's width, or pass any CSS length as a string, like width("50%"):
width("full")
width("75%")
width("50%")
width("25%")
<div mix={[...]}>
<div mix={[width("full"), ...]}>width("full")</div>
<div mix={[width("75%"), ...]}>width("75%")</div>
<div mix={[width("50%"), ...]}>width("50%")</div>
<div mix={[width("25%"), ...]}>width("25%")</div>
</div>Applying on a state
Wrap the call in a state utility to scope it to one selector.
u.hover(u.width("full"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.width("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:
width(4)Signature
u.width(value: SizeValue)