[ @sdxc/u/size ]
block-size
Applies block-size — the logical height, which is the physical width in a vertical writing mode.
import { bs } from "@sdxc/u/size";Quick reference
Every documented call, beside the CSS it emits.
| Call | CSS |
|---|---|
u.bs("full") | css({ blockSize: "100%" }) |
Examples
Basic example
Use bs(n) with a step of the spacing scale, like bs(16) or bs(32), to set an element's block size, its height in horizontal text:
<div mix={[hstack({ gap: 4, align: "end" })]}>
<div mix={[bs(12), is(20), ...]}>bs(12)</div>
<div mix={[bs(20), is(20), ...]}>bs(20)</div>
<div mix={[bs(28), is(20), ...]}>bs(28)</div>
<div mix={[bs(36), is(20), ...]}>bs(36)</div>
<div mix={[bs(44), is(20), ...]}>bs(44)</div>
</div>Filling the parent
Use bs("full") to fill the block size of a parent that sets one, or pass any CSS length as a string, like bs("50%"):
<div mix={[hstack({ gap: 4, align: "start" }), bs(48), p(4), ...]}>
<div mix={[bs("full"), is(28), ...]}>bs("full")</div>
<div mix={[bs("50%"), is(28), ...]}>bs("50%")</div>
</div>Vertical writing modes
bs() sizes the block axis, so in a vertical writing mode like vertical-rl it sets the element's width instead of its height:
<div mix={[...]}>
<div mix={[bs(16), is(40), ...]}>horizontal-tb</div>
<div mix={[bs(16), is(40), 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.bs("full"))Responsive design
Wrap the call in a container query to scope it to one width.
u.at("md", u.bs("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:
bs(4)Signature
u.bs(value: SizeValue)