bourbon neat grid utility classes

grids.scss

.is-clearfix {
    @include clearfix;
}

.is-clear {
    clear: both;
}

.is-container {
    @include outer-container;
}

.is-width-container {
    // omit px-rem to match mixin outer-container
    // it's unneeded here anyway: http://caniuse.com/#feat=rem
    width: $max-width;
}

[class*="is-grid-x"],
.is-sibling-grid {
    margin-left: auto;
    margin-right: auto;
    padding-left: 0;
    padding-right: 0;
    > * {
        display: block;
        float: left;
    }
}

.is-sibling-grid > :only-child {
    display: block;
    width: 100%;
}

@each $n in (2, 3, 4, 5, 6) {
    //gist.github.com/ryanve/3ea0d73079794c0955dc
    .is-sibling-grid > :first-child:nth-last-child(#{$n}),
    .is-sibling-grid > :first-child:nth-last-child(#{$n}) ~ * {
        width: percentage(1 / $n);
    }
    .is-sibling-gutter > :first-child:nth-last-child(#{$n}),
    .is-sibling-gutter > :first-child:nth-last-child(#{$n}) ~ * {
        width: flex-grid($grid-columns/$n);
    }
}

.is-grid-gutter > *,
.is-sibling-gutter > :not(:last-child) {
    margin-right: flex-gutter();
}

@each $n in (2, 3, 4, 5, 6) {
    .is-grid-x#{$n} > * {
        width: percentage(1 / $n);
    }
    .is-grid-x#{$n}.is-grid-gutter > * {
        width: flex-grid($grid-columns/$n);
        @include omega(#{$n}n);
    }
}

.is-span,
%span-columns {
    @include span-columns(0);
}

@for $i from 1 through 12 {
    .is-span-#{$i},
    .is-span-#{$i - 1}\.5 {
        @extend %span-columns;
    }
}

@for $i from 1 through 12 {
    .is-span-,
    [class].is-flex- {
        &#{$i} {
            width: flex-grid($i);
        }
        &#{$i - 1}\.5 {
            width: flex-grid($i - .5);
        }
    }
}

@for $i from 1 through 12 {
    [class].is-full- {
        &#{$i} {
            width: percentage($i / $grid-columns);
        }
        &#{$i - 1}\.5 {
            width: percentage(($i - .5) / $grid-columns);
        }
    }
}

// Override to auto to play nice with .is-auto-center
// Otherwise this acts like 0
[class*="is-full-"].is-span {
    margin-right: auto;
}

// is-min-width-* (minimum grid spans)
// is-max-width-* (maximum grid spans)
@each $property in (min-width, max-width) {
    @for $i from 1 through 12 {
        .is-#{$property}-#{$i} {
            #{$property}: flex-grid($i);
        }
        .is-#{$property}-#{$i - 1}\.5 {
            #{$property}: flex-grid($i - .5);
        }
    }
}

$width-blocks: (width: width, max-width: max-width, min-width: min-width) !default;
$width-values: (
    1rem, 2rem, 3rem, 4rem, 5rem, 6rem, 7rem, 8rem, 9rem, 10rem,
    1em, 2em, 3em, 4em, 5em, 6em, 7em, 8em, 9em, 10em,
    none
) !default;

@each $property, $block in $width-blocks {
    @each $value in $width-values {
        .#{$block}--#{$value} {
            #{$property}: $value;
        }
    }
}

// .is-max-height-none
// .is-max-width-none
@each $property in (max-height, max-width) {
    .is-#{$property}-none[class] {
        #{$property}: none;
    }
}

// .is-shift-*
@for $i from 1 through 12 {
    .is-shift-#{$i} {
        @include shift($i);
    }
    .is-shift-#{$i - 1}\.5 {
        @include shift($i - .5);
    }
    .is-shift--#{$i} {
        @include shift(-$i);
    }
    .is-shift--#{$i - 1}\.5 {
        @include shift(-$i - .5);
    }
}

.is-omega {
    @include omega;
}

// .is-omega-odd
// .is-omega-even
@each $child in (odd, even) {
    .is-omega-#{$child} {
        @include omega($child);
    }
}

grids.scss.css

.is-clearfix {
  *zoom: 1; }
  .is-clearfix::before, .is-clearfix::after {
    content: " ";
    display: table; }
  .is-clearfix::after {
    clear: both; }

.is-clear {
  clear: both; }

.is-container {
  *zoom: 1;
  max-width: 76rem;
  margin-left: auto;
  margin-right: auto; }
  .is-container::before, .is-container::after {
    content: " ";
    display: table; }
  .is-container::after {
    clear: both; }

.is-width-container {
  width: 76rem; }

[class*="is-grid-x"],
.is-sibling-grid {
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0; }
  [class*="is-grid-x"] > *,
  .is-sibling-grid > * {
    display: block;
    float: left; }

.is-sibling-grid > :only-child {
  display: block;
  width: 100%; }

.is-sibling-grid > :first-child:nth-last-child(2),
.is-sibling-grid > :first-child:nth-last-child(2) ~ * {
  width: 50%; }

.is-sibling-gutter > :first-child:nth-last-child(2),
.is-sibling-gutter > :first-child:nth-last-child(2) ~ * {
  width: 47.82609%; }

.is-sibling-grid > :first-child:nth-last-child(3),
.is-sibling-grid > :first-child:nth-last-child(3) ~ * {
  width: 33.33333%; }

.is-sibling-gutter > :first-child:nth-last-child(3),
.is-sibling-gutter > :first-child:nth-last-child(3) ~ * {
  width: 30.43478%; }

.is-sibling-grid > :first-child:nth-last-child(4),
.is-sibling-grid > :first-child:nth-last-child(4) ~ * {
  width: 25%; }

.is-sibling-gutter > :first-child:nth-last-child(4),
.is-sibling-gutter > :first-child:nth-last-child(4) ~ * {
  width: 21.73913%; }

.is-sibling-grid > :first-child:nth-last-child(5),
.is-sibling-grid > :first-child:nth-last-child(5) ~ * {
  width: 20%; }

.is-sibling-gutter > :first-child:nth-last-child(5),
.is-sibling-gutter > :first-child:nth-last-child(5) ~ * {
  width: 16.52174%; }

.is-sibling-grid > :first-child:nth-last-child(6),
.is-sibling-grid > :first-child:nth-last-child(6) ~ * {
  width: 16.66667%; }

.is-sibling-gutter > :first-child:nth-last-child(6),
.is-sibling-gutter > :first-child:nth-last-child(6) ~ * {
  width: 13.04348%; }

.is-grid-gutter > *,
.is-sibling-gutter > :not(:last-child) {
  margin-right: 4.34783%; }

.is-grid-x2 > * {
  width: 50%; }

.is-grid-x2.is-grid-gutter > * {
  width: 47.82609%; }
  .is-grid-x2.is-grid-gutter > *:nth-child(2n) {
    margin-right: 0; }

.is-grid-x3 > * {
  width: 33.33333%; }

.is-grid-x3.is-grid-gutter > * {
  width: 30.43478%; }
  .is-grid-x3.is-grid-gutter > *:nth-child(3n) {
    margin-right: 0; }

.is-grid-x4 > * {
  width: 25%; }

.is-grid-x4.is-grid-gutter > * {
  width: 21.73913%; }
  .is-grid-x4.is-grid-gutter > *:nth-child(4n) {
    margin-right: 0; }

.is-grid-x5 > * {
  width: 20%; }

.is-grid-x5.is-grid-gutter > * {
  width: 16.52174%; }
  .is-grid-x5.is-grid-gutter > *:nth-child(5n) {
    margin-right: 0; }

.is-grid-x6 > * {
  width: 16.66667%; }

.is-grid-x6.is-grid-gutter > * {
  width: 13.04348%; }
  .is-grid-x6.is-grid-gutter > *:nth-child(6n) {
    margin-right: 0; }

.is-span,
.is-span-1,
.is-span-0\.5,
.is-span-2,
.is-span-1\.5,
.is-span-3,
.is-span-2\.5,
.is-span-4,
.is-span-3\.5,
.is-span-5,
.is-span-4\.5,
.is-span-6,
.is-span-5\.5,
.is-span-7,
.is-span-6\.5,
.is-span-8,
.is-span-7\.5,
.is-span-9,
.is-span-8\.5,
.is-span-10,
.is-span-9\.5,
.is-span-11,
.is-span-10\.5,
.is-span-12,
.is-span-11\.5 {
  float: left;
  display: block;
  margin-right: 4.34783%;
  width: -4.34783%; }
  .is-span:last-child,
  .is-span-1:last-child,
  .is-span-0\.5:last-child,
  .is-span-2:last-child,
  .is-span-1\.5:last-child,
  .is-span-3:last-child,
  .is-span-2\.5:last-child,
  .is-span-4:last-child,
  .is-span-3\.5:last-child,
  .is-span-5:last-child,
  .is-span-4\.5:last-child,
  .is-span-6:last-child,
  .is-span-5\.5:last-child,
  .is-span-7:last-child,
  .is-span-6\.5:last-child,
  .is-span-8:last-child,
  .is-span-7\.5:last-child,
  .is-span-9:last-child,
  .is-span-8\.5:last-child,
  .is-span-10:last-child,
  .is-span-9\.5:last-child,
  .is-span-11:last-child,
  .is-span-10\.5:last-child,
  .is-span-12:last-child,
  .is-span-11\.5:last-child {
    margin-right: 0; }

.is-span-1,
[class].is-flex-1 {
  width: 4.34783%; }
.is-span-0\.5,
[class].is-flex-0\.5 {
  width: 0%; }

.is-span-2,
[class].is-flex-2 {
  width: 13.04348%; }
.is-span-1\.5,
[class].is-flex-1\.5 {
  width: 8.69565%; }

.is-span-3,
[class].is-flex-3 {
  width: 21.73913%; }
.is-span-2\.5,
[class].is-flex-2\.5 {
  width: 17.3913%; }

.is-span-4,
[class].is-flex-4 {
  width: 30.43478%; }
.is-span-3\.5,
[class].is-flex-3\.5 {
  width: 26.08696%; }

.is-span-5,
[class].is-flex-5 {
  width: 39.13043%; }
.is-span-4\.5,
[class].is-flex-4\.5 {
  width: 34.78261%; }

.is-span-6,
[class].is-flex-6 {
  width: 47.82609%; }
.is-span-5\.5,
[class].is-flex-5\.5 {
  width: 43.47826%; }

.is-span-7,
[class].is-flex-7 {
  width: 56.52174%; }
.is-span-6\.5,
[class].is-flex-6\.5 {
  width: 52.17391%; }

.is-span-8,
[class].is-flex-8 {
  width: 65.21739%; }
.is-span-7\.5,
[class].is-flex-7\.5 {
  width: 60.86957%; }

.is-span-9,
[class].is-flex-9 {
  width: 73.91304%; }
.is-span-8\.5,
[class].is-flex-8\.5 {
  width: 69.56522%; }

.is-span-10,
[class].is-flex-10 {
  width: 82.6087%; }
.is-span-9\.5,
[class].is-flex-9\.5 {
  width: 78.26087%; }

.is-span-11,
[class].is-flex-11 {
  width: 91.30435%; }
.is-span-10\.5,
[class].is-flex-10\.5 {
  width: 86.95652%; }

.is-span-12,
[class].is-flex-12 {
  width: 100%; }
.is-span-11\.5,
[class].is-flex-11\.5 {
  width: 95.65217%; }

[class].is-full-1 {
  width: 8.33333%; }
[class].is-full-0\.5 {
  width: 4.16667%; }

[class].is-full-2 {
  width: 16.66667%; }
[class].is-full-1\.5 {
  width: 12.5%; }

[class].is-full-3 {
  width: 25%; }
[class].is-full-2\.5 {
  width: 20.83333%; }

[class].is-full-4 {
  width: 33.33333%; }
[class].is-full-3\.5 {
  width: 29.16667%; }

[class].is-full-5 {
  width: 41.66667%; }
[class].is-full-4\.5 {
  width: 37.5%; }

[class].is-full-6 {
  width: 50%; }
[class].is-full-5\.5 {
  width: 45.83333%; }

[class].is-full-7 {
  width: 58.33333%; }
[class].is-full-6\.5 {
  width: 54.16667%; }

[class].is-full-8 {
  width: 66.66667%; }
[class].is-full-7\.5 {
  width: 62.5%; }

[class].is-full-9 {
  width: 75%; }
[class].is-full-8\.5 {
  width: 70.83333%; }

[class].is-full-10 {
  width: 83.33333%; }
[class].is-full-9\.5 {
  width: 79.16667%; }

[class].is-full-11 {
  width: 91.66667%; }
[class].is-full-10\.5 {
  width: 87.5%; }

[class].is-full-12 {
  width: 100%; }
[class].is-full-11\.5 {
  width: 95.83333%; }

[class*="is-full-"].is-span {
  margin-right: auto; }

.is-min-width-1 {
  min-width: 4.34783%; }

.is-min-width-0\.5 {
  min-width: 0%; }

.is-min-width-2 {
  min-width: 13.04348%; }

.is-min-width-1\.5 {
  min-width: 8.69565%; }

.is-min-width-3 {
  min-width: 21.73913%; }

.is-min-width-2\.5 {
  min-width: 17.3913%; }

.is-min-width-4 {
  min-width: 30.43478%; }

.is-min-width-3\.5 {
  min-width: 26.08696%; }

.is-min-width-5 {
  min-width: 39.13043%; }

.is-min-width-4\.5 {
  min-width: 34.78261%; }

.is-min-width-6 {
  min-width: 47.82609%; }

.is-min-width-5\.5 {
  min-width: 43.47826%; }

.is-min-width-7 {
  min-width: 56.52174%; }

.is-min-width-6\.5 {
  min-width: 52.17391%; }

.is-min-width-8 {
  min-width: 65.21739%; }

.is-min-width-7\.5 {
  min-width: 60.86957%; }

.is-min-width-9 {
  min-width: 73.91304%; }

.is-min-width-8\.5 {
  min-width: 69.56522%; }

.is-min-width-10 {
  min-width: 82.6087%; }

.is-min-width-9\.5 {
  min-width: 78.26087%; }

.is-min-width-11 {
  min-width: 91.30435%; }

.is-min-width-10\.5 {
  min-width: 86.95652%; }

.is-min-width-12 {
  min-width: 100%; }

.is-min-width-11\.5 {
  min-width: 95.65217%; }

.is-max-width-1 {
  max-width: 4.34783%; }

.is-max-width-0\.5 {
  max-width: 0%; }

.is-max-width-2 {
  max-width: 13.04348%; }

.is-max-width-1\.5 {
  max-width: 8.69565%; }

.is-max-width-3 {
  max-width: 21.73913%; }

.is-max-width-2\.5 {
  max-width: 17.3913%; }

.is-max-width-4 {
  max-width: 30.43478%; }

.is-max-width-3\.5 {
  max-width: 26.08696%; }

.is-max-width-5 {
  max-width: 39.13043%; }

.is-max-width-4\.5 {
  max-width: 34.78261%; }

.is-max-width-6 {
  max-width: 47.82609%; }

.is-max-width-5\.5 {
  max-width: 43.47826%; }

.is-max-width-7 {
  max-width: 56.52174%; }

.is-max-width-6\.5 {
  max-width: 52.17391%; }

.is-max-width-8 {
  max-width: 65.21739%; }

.is-max-width-7\.5 {
  max-width: 60.86957%; }

.is-max-width-9 {
  max-width: 73.91304%; }

.is-max-width-8\.5 {
  max-width: 69.56522%; }

.is-max-width-10 {
  max-width: 82.6087%; }

.is-max-width-9\.5 {
  max-width: 78.26087%; }

.is-max-width-11 {
  max-width: 91.30435%; }

.is-max-width-10\.5 {
  max-width: 86.95652%; }

.is-max-width-12 {
  max-width: 100%; }

.is-max-width-11\.5 {
  max-width: 95.65217%; }

.width--1rem {
  width: 1rem; }

.width--2rem {
  width: 2rem; }

.width--3rem {
  width: 3rem; }

.width--4rem {
  width: 4rem; }

.width--5rem {
  width: 5rem; }

.width--6rem {
  width: 6rem; }

.width--7rem {
  width: 7rem; }

.width--8rem {
  width: 8rem; }

.width--9rem {
  width: 9rem; }

.width--10rem {
  width: 10rem; }

.width--1em {
  width: 1em; }

.width--2em {
  width: 2em; }

.width--3em {
  width: 3em; }

.width--4em {
  width: 4em; }

.width--5em {
  width: 5em; }

.width--6em {
  width: 6em; }

.width--7em {
  width: 7em; }

.width--8em {
  width: 8em; }

.width--9em {
  width: 9em; }

.width--10em {
  width: 10em; }

.width--none {
  width: none; }

.max-width--1rem {
  max-width: 1rem; }

.max-width--2rem {
  max-width: 2rem; }

.max-width--3rem {
  max-width: 3rem; }

.max-width--4rem {
  max-width: 4rem; }

.max-width--5rem {
  max-width: 5rem; }

.max-width--6rem {
  max-width: 6rem; }

.max-width--7rem {
  max-width: 7rem; }

.max-width--8rem {
  max-width: 8rem; }

.max-width--9rem {
  max-width: 9rem; }

.max-width--10rem {
  max-width: 10rem; }

.max-width--1em {
  max-width: 1em; }

.max-width--2em {
  max-width: 2em; }

.max-width--3em {
  max-width: 3em; }

.max-width--4em {
  max-width: 4em; }

.max-width--5em {
  max-width: 5em; }

.max-width--6em {
  max-width: 6em; }

.max-width--7em {
  max-width: 7em; }

.max-width--8em {
  max-width: 8em; }

.max-width--9em {
  max-width: 9em; }

.max-width--10em {
  max-width: 10em; }

.max-width--none {
  max-width: none; }

.min-width--1rem {
  min-width: 1rem; }

.min-width--2rem {
  min-width: 2rem; }

.min-width--3rem {
  min-width: 3rem; }

.min-width--4rem {
  min-width: 4rem; }

.min-width--5rem {
  min-width: 5rem; }

.min-width--6rem {
  min-width: 6rem; }

.min-width--7rem {
  min-width: 7rem; }

.min-width--8rem {
  min-width: 8rem; }

.min-width--9rem {
  min-width: 9rem; }

.min-width--10rem {
  min-width: 10rem; }

.min-width--1em {
  min-width: 1em; }

.min-width--2em {
  min-width: 2em; }

.min-width--3em {
  min-width: 3em; }

.min-width--4em {
  min-width: 4em; }

.min-width--5em {
  min-width: 5em; }

.min-width--6em {
  min-width: 6em; }

.min-width--7em {
  min-width: 7em; }

.min-width--8em {
  min-width: 8em; }

.min-width--9em {
  min-width: 9em; }

.min-width--10em {
  min-width: 10em; }

.min-width--none {
  min-width: none; }

.is-max-height-none[class] {
  max-height: none; }

.is-max-width-none[class] {
  max-width: none; }

.is-shift-1 {
  margin-left: 8.69565%; }

.is-shift-0\.5 {
  margin-left: 4.34783%; }

.is-shift--1 {
  margin-left: -8.69565%; }

.is-shift--0\.5 {
  margin-left: -13.04348%; }

.is-shift-2 {
  margin-left: 17.3913%; }

.is-shift-1\.5 {
  margin-left: 13.04348%; }

.is-shift--2 {
  margin-left: -17.3913%; }

.is-shift--1\.5 {
  margin-left: -21.73913%; }

.is-shift-3 {
  margin-left: 26.08696%; }

.is-shift-2\.5 {
  margin-left: 21.73913%; }

.is-shift--3 {
  margin-left: -26.08696%; }

.is-shift--2\.5 {
  margin-left: -30.43478%; }

.is-shift-4 {
  margin-left: 34.78261%; }

.is-shift-3\.5 {
  margin-left: 30.43478%; }

.is-shift--4 {
  margin-left: -34.78261%; }

.is-shift--3\.5 {
  margin-left: -39.13043%; }

.is-shift-5 {
  margin-left: 43.47826%; }

.is-shift-4\.5 {
  margin-left: 39.13043%; }

.is-shift--5 {
  margin-left: -43.47826%; }

.is-shift--4\.5 {
  margin-left: -47.82609%; }

.is-shift-6 {
  margin-left: 52.17391%; }

.is-shift-5\.5 {
  margin-left: 47.82609%; }

.is-shift--6 {
  margin-left: -52.17391%; }

.is-shift--5\.5 {
  margin-left: -56.52174%; }

.is-shift-7 {
  margin-left: 60.86957%; }

.is-shift-6\.5 {
  margin-left: 56.52174%; }

.is-shift--7 {
  margin-left: -60.86957%; }

.is-shift--6\.5 {
  margin-left: -65.21739%; }

.is-shift-8 {
  margin-left: 69.56522%; }

.is-shift-7\.5 {
  margin-left: 65.21739%; }

.is-shift--8 {
  margin-left: -69.56522%; }

.is-shift--7\.5 {
  margin-left: -73.91304%; }

.is-shift-9 {
  margin-left: 78.26087%; }

.is-shift-8\.5 {
  margin-left: 73.91304%; }

.is-shift--9 {
  margin-left: -78.26087%; }

.is-shift--8\.5 {
  margin-left: -82.6087%; }

.is-shift-10 {
  margin-left: 86.95652%; }

.is-shift-9\.5 {
  margin-left: 82.6087%; }

.is-shift--10 {
  margin-left: -86.95652%; }

.is-shift--9\.5 {
  margin-left: -91.30435%; }

.is-shift-11 {
  margin-left: 95.65217%; }

.is-shift-10\.5 {
  margin-left: 91.30435%; }

.is-shift--11 {
  margin-left: -95.65217%; }

.is-shift--10\.5 {
  margin-left: -100%; }

.is-shift-12 {
  margin-left: 104.34783%; }

.is-shift-11\.5 {
  margin-left: 100%; }

.is-shift--12 {
  margin-left: -104.34783%; }

.is-shift--11\.5 {
  margin-left: -108.69565%; }

.is-omega {
  margin-right: 0; }

.is-omega-odd:nth-child(odd) {
  margin-right: 0; }

.is-omega-even:nth-child(even) {
  margin-right: 0; }