Breakpoint

Calibrate’s breakpoints mark the viewport widths where layouts adapt. Reference these tokens in custom media and container queries; design from the smallest up.

var(--clbr-breakpoint-baseline)

Baseline breakpoint. The smallest viewport the system targets. Layouts should be functional at this width.

var(--clbr-breakpoint-mobile)

Mobile breakpoint. Use as the boundary between baseline and mobile-class layouts.

var(--clbr-breakpoint-tablet)

Tablet breakpoint. Use as the boundary at which tablet-class layouts engage.

var(--clbr-breakpoint-notebook)

Notebook breakpoint. Use as the boundary at which compact-laptop-class layouts engage.

var(--clbr-breakpoint-laptop)

Laptop breakpoint. Use as the boundary at which standard-laptop-class layouts engage.

var(--clbr-breakpoint-desktop)

Desktop breakpoint. Use as the boundary at which desktop-class layouts engage.

var(--clbr-breakpoint-widescreen)

Widescreen breakpoint. Use as the boundary at which widescreen-class layouts engage.