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.
The basic structure looks like this:
<div class="wrapper wrapper--v1">
<div class="grid grid--columns">
Below is a responsive demo of the grid, where the number of elements you see changes according to the width of the viewport.
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">
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.
A Responsive, Asymetrical Example
Here's an example of how all this might be used:
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:
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
or targeting #overlayGrid in your user agent stylesheet.