[ @sdxc/u/responsive ]

at

size compares against the nearest ancestor with container-type set.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { at } from "@sdxc/u/responsive";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.at("md", [u.p(6), u.hstack({ gap: 4 })])`	`css({ "@container (min-width: 36rem)": { padding: "...", display: "flex" } })`
`u.at("md", "sidebar", u.p(6))`	`css({ "@container sidebar (min-width: 36rem)": { padding: "..." } })`

Examples

Basic example

Use at(size, ...) to apply utilities only when the nearest container is at least that wide, from the container scale (xs, sm, md…). The box is a container declared with container(). Drag the handle at the box's bottom-right corner to resize it and watch the layout change:

Lakeside cabin

Sleeps four, with a dock on the water.

<div mix={[container("card"), resize("horizontal"), overflow(), minIs(48), ...]}>
	<article mix={[grid(), gap(4), at("sm", gridTemplate({ columns: "10rem 1fr" }))]}>
		<img src={...} alt="" mix={[is("100%"), bs(24), fit(), rounded("md")]} />
		<div>
			<h3 mix={[weight("semibold")]}>Lakeside cabin</h3>
			<p mix={[...]}>Sleeps four, with a dock on the water.</p>
		</div>
	</article>
</div>

Querying a named container

Pass a container name, like at("md", "panel", ...), to query that ancestor instead of the nearest container. Drag the handle at the box's bottom-right corner to resize it and watch the layout change:

Lakeside cabin

Sleeps four, with a dock on the water.

<div mix={[container("panel"), resize("horizontal"), overflow(), minIs(48), ...]}>
	<article mix={[grid(), gap(4), at("md", "panel", gridTemplate({ columns: "14rem 1fr" }))]}>
		<img src={...} alt="" mix={[is("100%"), bs(24), fit(), rounded("md")]} />
		<div>
			<h3 mix={[weight("semibold")]}>Lakeside cabin</h3>
			<p mix={[...]}>Sleeps four, with a dock on the water.</p>
		</div>
	</article>
</div>

Using a custom length

Pass any length, like at("30rem", ...), for a breakpoint off the container scale. Drag the handle at the box's bottom-right corner to resize it and watch the layout change:

Lakeside cabin

Sleeps four, with a dock on the water.

<div mix={[container("card"), resize("horizontal"), overflow(), minIs(48), ...]}>
	<article mix={[grid(), gap(4), at("30rem", gridTemplate({ columns: "1fr 2fr" }))]}>
		<img src={...} alt="" mix={[is("100%"), bs(24), fit(), rounded("md")]} />
		<div>
			<h3 mix={[weight("semibold")]}>Lakeside cabin</h3>
			<p mix={[...]}>Sleeps four, with a dock on the water.</p>
		</div>
	</article>
</div>

Using a custom value

Every scale argument also takes a raw CSS value, which passes through untouched.

u.at("md", [u.p("2.75rem"), u.hstack({ gap: 4 })])

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.at("md", [u.p(6), u.hstack({ gap: 4 })]))

Customizing your theme

Customizing container sizes

Redefine a --ui-container-* variable to move a breakpoint, or declare a new one:

:root {
	--ui-container-3xl: 96rem;
}

declare module "@sdxc/u" {
	interface Containers {
		"3xl": true;
	}
}

The new name is then accepted wherever the scale is:

at("3xl", p(8))

Signature

u.at(size: ContainerName | (string & {}), input: UtilityInput<Node>)