Breakpoints

There are 4 breakpoints named SM, MD, LG, and XL. By default, a .container has a maximum width of 1120px so there will be no use for the XL breakpoint. When a .u-enable-xl class is added to the body, the XL breakpoint will then take effect and cause all .containers to have a maximum width of 1600px.

600px

1000px

1120px

& Beyond

1600px

Grid

The grid is built with 24 columns in order to satisfy the constraint of the number of available columns in each breakpoint. The container for the grid maxes out at 1120px (1600px when .u-enable-xl is activated) with the exception of certain design elements that require full width (e.g. banners, images). See Design Specs below for more information.

Design Specs

	SM	MD	LG	XL	Beyond
Viewport Range	0–599px	600–999px	1000–1119px	1120–1600px	1601px +
Columns	4	8	12
Gutters	8px	24px
Outer Margins	16px 12px + 4px half-gutter	24px 12px + 12px half-gutter	48px 36px + 12px half-gutter		48px minimum 36px + 12px half-gutter

Sample Usage

The following illustrates an example layout that responds to the different grid configurations.

Product Page Layout

Full Width Images (###)

There are scenarios where full width images are used and they will extend beyond the container's width. The methods of handling these is:

Fit to height

Maintain aspect ratio and width while conforming to a specified height (e.g. box page banner)

Fit to width

Maintain width but is cropped at a specified height, altering the aspect ratio as it scales (e.g. collection page banner)

Scale

Maintain aspect ratio, width, and height (e.g. box page lifestyle image)