Breakpoints
There are 3 breakpoints named SM, MD, and LG.
A .container has a maximum width of 1400px.
sm
md
600px
lg
1000px
& Beyond
1400px
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 1400px 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 | Beyond | |
|---|---|---|---|---|
| Viewport Range | 0px–599px | 600px–999px | 1000px–1400px | 1401px + |
| Columns | 4 | 8 | 12 | 12 |
| Gutters | 8px | 12px | 12px | 12px |
| Outer Margins | 16px | 24px | 48px | 48px minimum |
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)