Variables

Canonical Breakpoints

We have five primary breakpoint variables. Each of these is supported by generated style utilities for common uses like margin and padding and display.

Each variable has a "max" counterpart, which applies to any screen sizes below the breakpoint. The "max" versions use the suffix Max. For example, the "max" version of --breakpointLg is --breakpointLgMax.

Inactive
--breakpointXs(>= 375px)
Inactive
--breakpointSm(>= 480px)
Inactive
--breakpointMd(>= 768px)
Inactive
--breakpointLg(>= 1024px)
Inactive
--breakpointXl(>= 1280px)
Inactive
--breakpointXxl(>= 1600px)

Functional Breakpoints

Functional breakpoints are aliases for the canonical versions tied to particular UI components.

Each variable has a "max" counterpart, which applies to any screen sizes below the breakpoint. The "max" versions use the suffix Max. For example, the "max" version of --breakpointCrateLayout is --breakpointCrateLayoutMax.

Inactive
--breakpointCrateLayout(>= 1024px)

The point at which the layout crates flip from a stacked to a two-column design. Alias of --breakpointLg.

Inactive
--breakpointMaxWidthExternalGutters(>= 1520px)

Site max width plus the size of the standard global gutters at this breakpoint Alias of --.