Using the grid

Basics

Assuming that the variables are left as they are by default, here is how you would use the grid:

• use the .grid class for defining the grid
• use the .row class for defining a row
• use the .col class for defining a column
• use a .col-n-of-p class to define the width, where n-of-p defines how wide the column should be

example:

<div class="grid">
  <div class="row">
    <div class="col col-1-of-4"></div>
    <div class="col col-1-of-8"></div>
    <div class="col col-3-of-8"></div>
    <div class="col col-1-of-4"></div>
  </div>
</div>

Pulls and pushes

Pulls and pushes allow you to add space between a column and its neighbouring columns. A .push will push the element to the right, while a pull will pull it to the right. They are basically left and right margin added on top of the gutter. They work in a pretty similar fashion to the defining of column width:

<div class="grid">
  <div class="row">
    <div class="col col-1-of-8"></div>
    <div class="col col-2-of-8 pull-2-of-12"></div>
    <div class="col col-3-of-8 push-1-of-12"></div>
  </div>
</div>

Responsiveness

The waffle grid allows you to resize your columns according to the device size. By default, the two breakpoints are 840px for medium devices and 480px for small devices. You can define the different behaviours depending on the device size by adding an m or an s to the class, like:

• .col-m-3-of-8: the column will be 3/8 of the width for devices under 840px wide
• .push-s-1-of-4: the column will be pushed 1/4 of the way on any device under 480px wide
• v1.3.5 .m-un-push: the column will not be pushed on devices under 840px wide

<div class="grid">
  <div class="row">
    <div class="col col-2-of-8 col-m-1-of-4 col-s-1-of-2"></div>
    <div class="col col-3-of-8 col-m-2-of-4 col-s-2-of-4"></div>
    <div class="col col-1-of-8 m-hide"></div>
    <div class="col col-2-of-8 col-m-1-of-4 s-hide"></div>
  </div>
</div>

Helper classes

The waffle grid includes a bunch of helper classes, like: .center, .m-hide, .s-hide, .m-only, .s-only... These classes pretty much do what they say. Feel free to read the source code, as it is under 150 lines and it might help you better understand the grid.

Customising the grid

The waffle grid features variables at the top of the .scss file, which all have the !default tag so that they can easily be overwritten in your own .scss file.

Variable name	Default value	Description
$grid-classname	"grid"	Class used to identify the grid
$row-classname	"row"	Class used to identify a row
$column-classname	"col"	Class used to identify a column
$helper-prefix	""	Prefix for the helper classes
$container-classname	"col"	Class used to identify a column
$grid-columns	(4, 8, 12)	Column amounts, results in: .col-n-of-4, or .col-n-of-8
$gutter-width	20px	Gutter width
$grid-width	960px	Grid width, it will be automatically centered on the page
$grid-max-width	80%	Grid max width, in case $grid-width is to large
$pushes	true	If true, push classes are generated
$pulls	true	If true, pull classes are generated
$breakpoints	(m: (840px, (4, 6, 8)) ...)	Breakpoint object. Structure: name: (screen-width, column-amounts)