Installation

npm install gutter-grid --save

A dependency that Gutter Grid has is mq-scss. This is used for the media queries.

After npm installing Gutter Grid, add the following code to the top of your main Sass file (Please select weather you would prefer to use the class based system, mixin based system, or both).

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-classes';

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-mixin';

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-mixin';
@import '../node_modules/gutter-grid/grid-classes';

Things to note:

• mq-scss will automatically install when installing Gutter Grid
• I've purposly not put the mq-scss include in the grid Sass file so that users will more likely see that mq-scss is available for them to use
• Make sure that the import paths are actually correct. They will differ depending on your folder structure.

At this point, you are able to use the grid system and it will work well in all modern browsers and also in IE 11. Browsers that are most likely to cause you issues are IE10 and below, Opera Mini, and Android 4 browser. Check caniuse.com and the browser statistics for your site to see if you need to support any of those browsers.

If your site needs to support any of those old browsers, there are a few more steps that you need to take.

Read how to support legacy browsers to get a run down on how to achieve maximum browser compatibility.

If using the class based system and there is a conflict with another grid class, you can edit the $grid-prefix variable to resolve the conflict.

$grid-prefix: 'gutter';

@import '../node_modules/mq-scss/mq';
@import '../node_modules/gutter-grid/grid-classes';

That will add gutter- to the front of all the grid classes. So .grid will turn into .gutter-grid. This will affect all grid classes. for example .grid__cell will become .gutter-grid__cell.