Our grid system has 4 breakpoints and is divided into a number of columns with a corresponding gutter, depending on the breakpoint. A wrapper outside the grid element sets the max-width and outer margins.
| Size | Breakpoint | Columns | Gutter Size | Outer Margin |
|---|---|---|---|---|
| sml | 0px | 4 columns | 16px | 24px |
| med | 600px | 12 columns | 24px | 32px |
| lrg | 900px | 12 columns | 24px | 32px |
| xlg | 1200px | 16 columns | 24px | 32px |
The basic structure looks like this:
<div class="wrapper wrapper--v1">
<div class="grid grid--columns">
<div class="grid__item"></div>
</div>
</div>
Below is a responsive demo of the grid, where the number of elements you see changes according to the width
of the viewport.
Col. 1
Col. 2
Col. 3
Col. 4
Col. 1
Col. 2
Col. 3
Col. 4
Col. 5
Col. 6
Col. 7
Col. 8
Col. 9
Col. 10
Col. 11
Col. 12
Col. 1
Col. 2
Col. 3
Col. 4
Col. 5
Col. 6
Col. 7
Col. 8
Col. 9
Col. 10
Col. 11
Col. 12
Col. 13
Col. 14
Col. 15
Col. 16
Defining Placement and Width
Additional classes on the grid__items control the start point and width using this formula:
grid__item--[BREAKPOINT NAME]-[ACTION]-[COL VALUE]
For example, the grid item below will, starting at 0px viewport width, span 4 columns and then, at viewports wider
than 600px, will start at the 6th column in the grid:
<div class="grid__item grid__item--sml-spans-4 grid__item--med-start-6">
Example: 4 columns wide, starts at column 6 at med. vp's
All our media queries are mobile first via min-width, so once a start position or width has been declared for an element at a breakpoint, it will hold true for that element at all viewport widths beyond the breakpoint that has been declared until it is overwritten by a class that uses a wider viewport width. In this way, an element's position and width cascade from smallest viewport widths to largest.
You can also force grid items that have not taken up the full width of the grid yet with --[BREAKPOINT NAME]-start-1, which causes that grid__item to start on the first column of a grid below the previous grid__items. This allows for a grid__item to start at any column at multiple breakpoints.
grid__item--[SIZE NAME]-start-1
A Responsive, Asymetrical Example
Here's an example of how all this might be used:
Theme Versioning
There is some overlap between the class names of our current grid and this new grid system so, to avoid
conflicts, the new classes exist only in a separate stylesheet. This is set via a theme setting in Shopify:
cdn.shopify.com/s/files/1/0951/7126/t/1422/assets/stylesheet-v1.css
Grid Overlay
In order to confirm that elements are aligning to the grid, we've created a grid overlay. It's responsive and
changes color with our new breakpoints. It's also controlled via a setting in Shopify and will always be turned
on in your preview theme, but you can also hide with document.getElementById('overlayGrid').style.display='none';
or targeting #overlayGrid in your user agent stylesheet.
