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.

sm
md
600px
lg
840px
xl
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–839px 840–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)