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;

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.