Slates grid system is based on the Profound Grid. For the most part, Profound's documentation is compatible, but we have made a few modifications and enhancements.

Grid helpers

@include generate-helper-classes($bp-medium);

Whilst this isn't recommended due to the amount of code it will add to the style sheet, you can generate a set of column, push and pull classes. However, it's recommended that you use a tool on your production build that will strip out unused classes to save space.

The example above will generate 12 columns with row classes to separate them. It will also stack them up at the $bp-medium breakpoint. You can use these to construct your layout:

<div class="row">
  <div class="col col1">1</div>
  <div class="col col5 push1">5</div>
  <div class="col col5 push6">5</div>
  <div class="col col1 push11">1</div>
</div>

Custom Grids

There are a number of helpers built in that can help you create custom layouts that don't necessarily fall into the usual 12 column grid structure.

Container Mixin

It is useful to be able to create a container in which to place elements. By default, the mixin uses the settings declared in the grid config, so this is enough:

@include container;

This will centre the container in the browser window, and put a small margin on the sides so that it does not touch the edge on small screens.

You might want to reset this for a specific use case. You can do this on the fly by passing extra values to the mixin:

@include container (768px, true, %4);

The example above will create a container that has a maximum width of 768px, centering is true and the margin up the sides is 4%.

Column Mixin

You can set elements as columns using the column mixin. To make the element span 6 columns:

@include column(6);

You can also push the column across the page by a set number of columns by passing a second number. The example below will make the element span 6 columns and push it over by 3.:

@include column(6,3);

Real usage might go something like this:

<div class="grid-custom">
  <div class="row">
    <div class="col coltwoa">1</div>
    <div class="col colfoura">2</div>
    <div class="col colfourb">3</div>
    <div class="col coltwob">4</div>
  </div>
</div>

.coltwoa   {@include column(2);}
.coltwob   {@include column(2,10);}
.colfoura  {@include column(4,2);}
.colfourb  {@include column(4,6);}