Basic Grid Usage

One grid to rule them all. Slates grid system is really powerful and adaptable to any design you can dream up. Coding complex layouts has never been easier.

Slate packs a punch in the grid department, it's grid can handle any style and comes with a set of helpful mixins that allow you to very quickly build common layouts in just one line of Sass.

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

Configuring

Slate's grid is controlled by a set of variables in _config-grid.scss. The effects of these variables is explained here.

Grid helpers

@include generate-helper-classes(medium)

This will generate a raft of CSS in your output that lets you use class names on elements that lets you set column widths and push them around. The option on the mixin is the point at which the columns will stack and run full width.

.row {
  margin: 0 auto;
  width: 100%;
  max-width: 1140px; }
  .row:after {
    content: "";
    display: table;
    clear: both; }

.col1 {
  float: left;
  margin-right: -100%;
  width: 5.58%; }

.col2 {
  float: left;
  margin-right: -100%;
  width: 14.17%; }

.push0 {
  margin-left: 0%;
  margin-bottom: 3%; }

.push1 {
  margin-left: 8.58%;
  margin-bottom: 3%; }

.push2 {
  margin-left: 17.17%;
  margin-bottom: 3%; }
...

To use this in your HTML, you might do something like this:

<div class="row">
    <div class="col2 push0"><p>1</p></div>
    <div class="col4 push2"><p>2</p></div>
    <div class="col4 push6"><p>3</p></div>
    <div class="col2 push10"><p>4</p></div>
</div>

Which will yield the following:

1

2

3

4

This is, however, not the recommended way to work with the grid, purely because it adds weight to you CSS and you may not use all the classes. This approach is also not semantic.

Recommended Usage

You can use the mixins to create the desired layout. Lets take the class based layout above and reproduce it to so that the columns do stack up on small screens, and you can use your own semantic class names:

<div class="grid-example-mixins">
    <div class="col coltwoa"><p>1</p></div>
    <div class="col colfoura"><p>2</p></div>
    <div class="col colfourb"><p>3</p></div>
    <div class="col coltwob"><p>4</p></div>
</div>

Then we can use following SASS to make it happen:

.grid-example-mixins {
    @include container;
    .col {
      @include column(12);
      @include minbreak($bp-medium) {
        clear: none;
      }
      @include rem(margin-bottom, $column-bottom-spacing);
      clear: both;
    }
    @include minbreak($bp-medium) {
        .coltwoa  {@include column(2);}
        .coltwob  {@include column(2,10);}
        .colfoura {@include column(4,2);}
        .colfourb {@include column(4,6);}
    }
}

1

2

3

4

Whilst that looks like a lot of SASS, its actually pretty simple and results in much cleaner CSS that adapts far better to the screen, and of course you can use whatever class names you like.

Lets step through it in a little more detail:

The container mixin does what it says on the tin - it tells Slate that this element will contain columns:

@include container;

If you want to control the maximum width of the container, wether or not it is centred on the page or within its parent, and lastly the margin around the outside you can do it like this:

@include container ($center-container-max-width, $center-containers, $container_margin);

You can also use your own values instead of the built in grid defaults variables:

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

After that, we tell all the columns inside to span across the total columns for the site. By default this is 12 columns:

.col {
   @include column(12);
}

Next, we use the minbreak media query mixin to turn them into columns if the device or browser window is as wide as the medium break point.

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

The first parameter is the number of columns the element should span. The second is how many columns to push the element over by:

@include column(2,10);

As you can see, this is quite powerful. By combining media queries, and setting the column mixin appropriately, you can achieve just about any layout you can dream of.

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.