[ @sdxc/u/responsive ]

atMax

The max-width counterpart to at: applies while the nearest container's inline size is at most size.

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

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

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.atMax("md", [u.p(2), u.flexCol()])`	`css({ "@container (max-width: 36rem)": { padding: "...", flexDirection: "column" } })`
`u.atMax("40rem", "ui-dialog", u.flexCol())`	`css({ "@container ui-dialog (max-width: 40rem)": { flexDirection: "column" } })`

Examples

Basic example

Use atMax(size, ...) to apply utilities only while the nearest container is at most that wide, the way a toolbar drops its labels when space runs short. Drag the handle at the box's bottom-right corner to resize it and watch the layout change:

<div mix={[container("toolbar"), resize("horizontal"), overflow(), minIs(48), ...]}>
	<div mix={[hstack({ gap: 2 })]}>
		<button
			type="button"
			mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
		>
			✎ <span mix={[atMax("sm", hidden())]}>Edit</span>
		</button>
		<button
			type="button"
			mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
		>
			⧉ <span mix={[atMax("sm", hidden())]}>Duplicate</span>
		</button>
		<button
			type="button"
			mix={[bg("neutral.tint"), fg("neutral.emphasis"), cursor("pointer"), ...]}
		>
			⌫ <span mix={[atMax("sm", hidden())]}>Delete</span>
		</button>
	</div>
</div>

Querying a named container

Pass a container name, like atMax("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),
			gridTemplate({ columns: "10rem 1fr" }),
			atMax("md", "panel", gridTemplate({ columns: "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 value

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

u.atMax("md", [u.p("2.75rem"), u.flexCol()])

Applying on a state

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

u.hover(u.atMax("md", [u.p(2), u.flexCol()]))

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:

atMax("3xl")

Signature

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