Introduction

McGriddle is a get-out-of-your-way Sass grid library. Supports flexbox (by default, the grid is based on floats). Set up your grid system…

$grid-width  : 64em;
$grid-gutter : 1.875em;
$grid-columns: 12;

…and you’re ready to build.

<section class="container">
  <article class="article"></article>
  <div class="sidebar"></div>
</section>

…

.container { @include container; }
.article   { @include columns(8); }
.sidebar   { @include columns(4, last); }

Installation

  1. Install via npm, yarn or Bower.

    npm install mcgriddle
yarn add mcgriddle
bower install mcgriddle

    Also available as a Ruby gem to use within your Rails application—see below for more information.

    Or to manually install it, download and unzip the source files. Then copy the files from the _sass/mcgriddle directory into your project.

  2. Import the _mcgriddle.scss file in your Sass manifest file:

    @import "mcgriddle";

Install for Ruby on Rails

  1. Add Hamburgers to your Gemfile.

    gem 'mcgriddle'

  2. Run bundle install.

  3. Include McGriddle by using Sass’s native @import**:

    // application.scss
@import "mcgriddle";

** More information on why Sass’s native @import + why you should ditch Sprockets directives altogether.

Usage

First, create a separate settings file (e.g. _mcgriddle-settings.scss) and import it before importing McGriddle.

@import "mcgriddle-settings";
@import "mcgriddle";

Then edit the settings file to configure/override default grid settings. The following is a list of settings and its defaults:

$grid-width           : 64em;
$grid-gutter          : 1.875em;
$grid-columns         : 12;
$grid-minor           : 1/3;
$grid-collapse        : false;
$grid-rtl             : false;

$grid-flexbox         : false;
$grid-flexbox-wrap    : wrap;
$grid-flexbox-justify : flex-start;

Features

Features that come with McGriddle.

  1. Containers
  2. Columns
  3. Minor/Major columns
  4. Shift columns
  5. Center columns
  6. Relative columns
  7. Nest columns
  8. Collapse gutters
  9. Right-to-left support
  10. Flexbox support
  11. Functions

Containers

Create containers to wrap columns using the container() mixin. Pass false as the optional argument when you don’t want the container to have a max-width.

@include container;
@include container(false);

Columns

Create grid-based columns using the columns() mixin and passing the number of columns to span as the first argument. Pass last as the second argument for the last column of a row to remove excess gutters (not necessary with flexbox).

@include container;
@include columns(6);
@include columns(6, last);

Column values can also be decimals when you want to break out of your grid.

@include container;
@include columns(3.2);
@include columns(4.2);
@include columns(4.6, last);

Minor/Major columns

Create major and minor-based columns with the columns() mixin. Set the size of minor $grid-minor: 1/3 (where 1/3 is 33% of your grid) and the size of major is calculated based on the remainder.

$grid-minor: 1/3;
@include container;
@include columns(minor);
@include columns(major, last);

Shift columns

Offset columns with the shift() mixin. The gutter is excluded if gutters are collapsed.

@include container;
@include columns(7);
@include shift(2);

Center columns

Center columns by passing center as the second argument of columns(). Centered columns have percentage-based widths by default but can be set to max-width by passing max as the third argument.

@include container;
@include columns(8, center); // width: 65.6901%;
@include columns(8, center, max); // max-width: 42.04167em;

Relative columns

Create relative columns to break out of your grid with the columns() mixin and passing a value in the # of # format as the first argument (e.g. 2 of 9 tells the element to span 2 columns in a 9-column grid). Values can also be written in shorthand by eliminating “of”: @include columns(2 9);

@include container;
@include columns(2 of 9);
@include columns(3 of 9);
@include columns(4 of 9, last);

Nest columns

Nest columns by wrapping nested columns in a container.

@include container;
@include columns(8);
@include container;
@include columns(6);
@include columns(6, last);
@include columns(4, last);

Collapse gutters

Collapse gutters by setting $grid-collapse: true.

$grid-collapse: true;
@include container;
@include columns(3);
@include columns(4);
@include columns(5);

Right-to-Left support

Enable RTL support for right-to-left languages by setting $grid-rtl: true.

$grid-rtl: true;
@include container;
@include columns(3);
@include columns(4);
@include columns(5, last);

Flexbox support

Columns are floats by default, but if you want or prefer Flexbox, set $grid-flexbox: true.

$grid-flexbox: true;
@include container;
@include columns(4);
height: 7em;
@include columns(4);
align-self: center;
@include columns(4, last);
align-self: flex-end;

When flexbox is enabled, the container’s flex-wrap and justify-content properties are set to wrap and flex-start respectively.

You can change the default property values by setting the values of $grid-flex-wrap and $grid-flex-justify to their appropriate, CSS-valid values (e.g. $grid-flex-wrap: nowrap; $grid-flex-justify: space-between;).

Functions

column-width()

Return the width of a number of columns (based on the # of columns in your grid). Optionally get the value in absolute/relative values (based on grid and gutter width units) instead of percent by passing in false as the second argument.

.a { width: column-width(5); }        // width: 39.95768%
.b { width: column-width(5, false); } // width: 25.57292em

gutter-width()

Return the width of a gutter. Optionally get the value in absolute/relative values (based on grid and gutter width units) instead of percent by passing in false as the argument.

.a { margin-right: gutter-width(); }      // margin-right: 2.92969%
.b { margin-right: gutter-width(false); } // margin-right: 1.875em

That’s it?

The documentation is still a work-in-progress, so there are features and functionality that have yet to be properly documented. I also have a couple more features I’d like to build (when and if I decide to), but aside from that… yep, that’s it.

I originally created McGriddle for me—I wanted something stupid simple and straight forward. Therefore if you’re looking for something more robust, I’d suggest Bourbon Neat or Susy.