Toolbox, Grid, Spacers http://www.sassmeister.com/gist/9ab2e228c5730b49d6013f89201c5030

SassMeister-input-HTML.html

12 column grid generated by Bourbon and Neat.

<!-- First row -->
<section class="grid-wrapper">
  <div class="grid-4">
    <div class="box">
      4 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
  <div class="grid-6">
    <div class="box">
      6 column
    </div>
  </div>
</section>

<!-- Second row -->
<section class="grid-wrapper">
  <div class="grid-3">
    <div class="box">
      3 column
    </div>
  </div>
  <div class="grid-7">
    <div class="box">
      5 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
</section>

<!-- Third row -->
<section class="bg-accent">
  <div class="grid-wrapper">
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
  </div>
</section>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----

// *********************
// For styling purposes
// *********************
.box {
  background: aquamarine;
  margin: 1em 0;
  padding: 1em;
}
.bg-accent {
  background: purple;
}
// *********************

.cf,
.grid-wrapper {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.cf:before,
.cf:after
.grid-wrapper:before,
.grid-wrapper:after {
  content: " ";
  display: table;
}
.cf:after,
.grid-wrapper:after {
  clear: both;
}

// ~GRID LAYOUT
//=========================================
// @for $i from 1 through 12 {
//   .grid-#{$i} {
//     @media(min-width: 700px) {
//       @include span-columns($i);
//     }
//   }
// }
@media (min-width: 700px) {
  .grid-1 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 6.17215%;
  }
  .grid-1:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-2 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
  }
  .grid-2:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-3 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }
  .grid-3:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-4 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }
  .grid-4:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-5 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 40.29137%;
  }
  .grid-5:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-6 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }
  .grid-6:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-7 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 57.35098%;
  }
  .grid-7:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-8 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%;
  }
  .grid-8:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-9 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 74.41059%;
  }
  .grid-9:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-10 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
  }
  .grid-10:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-11 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 91.4702%;
  }
  .grid-11:last-child {
    margin-right: 0;
  }
}

@media (min-width: 700px) {
  .grid-12 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
  }
  .grid-12:last-child {
    margin-right: 0;
  }
}
// FLEXIBLE 3 COL ====================
$em-base: 16px;
$bp-widest: 900px/$em-base + 0em;
$bp-wide: 700px/$em-base + 0em;

.span3 {
  display: block;
  @media (min-width: $bp-wide) {
    // 2 col
    float: left;
    margin-right: 2%;
    width: 48%;
  }
  @media (min-width: $bp-widest) {
    // 3 col
    width: 32%;
  }
}
// first of 2
.span3:nth-child(2n+1) {
  @media (min-width: $bp-wide) and (max-width: $bp-widest) {
    clear: left;
  }
}
// last of 2
.span3:nth-child(2n) {
  @media (min-width: $bp-wide) and (max-width: $bp-widest) {
    margin-right: 0;
  }
}

// first of 3
.span3:nth-child(3n+1) {
  @media (min-width: $bp-widest) {
    clear: left;
  }
}
// last of 3
.span3:nth-child(3n) {
  @media (min-width: $bp-widest) {
    margin-right: 0;
  }
}

// FLEXIBLE 2 COL ====================
.span2 {
  display: block;
  @media (min-width: $bp-wide) {
    // 2 col
    float: left;
    margin-right: 2%;
    width: 48%;
  }
}
// first of 2
.span2:nth-child(2n+1) {
  @media (min-width: $bp-wide) {
    clear: left;
  }
}
// last of 2
.span2:nth-child(2n) {
  @media (min-width: $bp-wide) {
    margin-right: 0;
  }
}
// padding and margin =================
$space_orientation: (
  v,
  h
);
$space_direction: (
  (t, top),
  (r, right),
  (b, bottom),
  (l, left)
);
$space_sizes:
  (xs, 0.25rem),
  (s, 0.5rem),
  (n, 1rem),
  (m, 1.25rem),
  (l, 1.5rem),
  (xl, 1.75rem),
  (xxl, 2rem)
;
@each $space_direction, $direction in $space_direction {
  @each $space_sizes, $size in $space_sizes {
    .pa#{$space_sizes} {
      padding: $size;
    }
    .p#{$space_direction}#{$space_sizes} {
      padding-#{$direction}: $size;
    }
    .ma#{$space_sizes} {
      margin: $size;
    }
    .m#{$space_direction}#{$space_sizes} {
      margin-#{$direction}: $size;
    }
  }
}
@each $space_orientation, $orientation in $space_orientation {
  @each $space_sizes, $size in $space_sizes {
    @if $space_orientation == "v" {
      .p#{$space_orientation}#{$space_sizes} {
        padding-bottom: $size;
        padding-top: $size;
      }
      .m#{$space_orientation}#{$space_sizes} {
        margin-bottom: $size;
        margin-top: $size;
      }
    }
    @else {
      .p#{$space_orientation}#{$space_sizes} {
        padding-left: $size;
        padding-right: $size;
      }
      .m#{$space_orientation}#{$space_sizes} {
        margin-left: $size;
        margin-right: $size;
      }
    }
  }
}

// border
$border_direction: (
  (t, top),
  (r, right),
  (b, bottom),
  (l, left)
);
$border_sizes:
  (l, 5px),
  (m 2px),
  (n, 1px)
;

@each $border_direction, $direction in $border_direction {
  @each $border_sizes, $width in $border_sizes {
    .ba#{$border_sizes} {
      border: $width solid #E9EAE4;
    }
    @if $border_sizes != "" {
      .b#{$border_direction}#{$border_sizes} {
        border-#{$direction}: $width solid #E9EAE4;
      }
    }
    @else  {
      .b#{$border_direction} {
        border-#{$direction}: $width solid #E9EAE4;
      }
    }
  }
}


// ~TOOLBOX
//=========================================
.hidden {
  display: none;
}
// ~clearfix
.cf:before,
.cf:after {
  content: " ";
  display: table;
}
.cf:after {
  clear: both;
}
.clear {
  clear: both;
}
.left {
  float: left;
}
.right {
  float: right;
}
.relative {
  position: relative;
}
.inline-block {
  display: inline-block;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.type-bold {
  font-weight: 600;
}

// For prototyping
.trow {
  display: table;
  width: 100%;
}
.tcell {
  display: inline;

  @media (min-width: 1024px) {
    display: table-cell;
    vertical-align: middle;
  }
}

// ~FLEX LAYOUT
//=========================================

.flex-layout-horizontal,
.flex-layout-horizontal-reverse,
.flex-layout-vertical,
.flex-layout-vertical-reverse {
  display: flex;
}

.flex-layout-inline {
  display: inline-flex;
}

.flex-layout-horizontal {
  flex-direction: row;
}

.flex-layout-horizontal-reverse {
  flex-direction: row-reverse;
}

.flex-layout-vertical {
  flex-direction: column;
}

.flex-layout-vertical-reverse {
  flex-direction: column-reverse;
}

.flex-layout-wrap {
  flex-wrap: wrap;
}

.flex-layout-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

// generate grid columns
@for $i from 1 through 12 {
  .flex-#{$i} {
    flex: #{$i};
  }
}

// alignment in cross axis
.flex-start {
  align-items: flex-start;
}
.flex-center-center {
  align-items: center;
}
.flex-end {
  align-items: flex-end;
}

// alignment in main axis
.flex-start-justified {
  justify-content: flex-start;
}
.flex-center-justified,.flex-center-center {
  justify-content: center;
}
.flex-end-justified {
  justify-content: flex-end;
}
.flex-around-justified {
  justify-content: space-around;
}
.flex-justified {
  justify-content: space-between;
}

// self alignment
.flex-self-start {
  align-self: flex-start;
}
.flex-self-center {
  align-self: center;
}
.flex-self-end {
  align-self: flex-end;
}
.flex-self-stretch {
  align-self: stretch;
}

SassMeister-output.css

.box {
  background: aquamarine;
  margin: 1em 0;
  padding: 1em;
}

.bg-accent {
  background: purple;
}

.cf,
.grid-wrapper {
  *zoom: 1;
  max-width: 68em;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}

.cf:before,
.cf:after
.grid-wrapper:before,
.grid-wrapper:after {
  content: " ";
  display: table;
}

.cf:after,
.grid-wrapper:after {
  clear: both;
}

@media (min-width: 700px) {
  .grid-1 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 6.17215%;
  }

  .grid-1:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-2 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 14.70196%;
  }

  .grid-2:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-3 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 23.23176%;
  }

  .grid-3:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-4 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 31.76157%;
  }

  .grid-4:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-5 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 40.29137%;
  }

  .grid-5:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-6 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 48.82117%;
  }

  .grid-6:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-7 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 57.35098%;
  }

  .grid-7:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-8 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 65.88078%;
  }

  .grid-8:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-9 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 74.41059%;
  }

  .grid-9:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-10 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 82.94039%;
  }

  .grid-10:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-11 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 91.4702%;
  }

  .grid-11:last-child {
    margin-right: 0;
  }
}
@media (min-width: 700px) {
  .grid-12 {
    float: left;
    display: block;
    margin-right: 2.35765%;
    width: 100%;
  }

  .grid-12:last-child {
    margin-right: 0;
  }
}
.span3 {
  display: block;
}
@media (min-width: 43.75em) {
  .span3 {
    float: left;
    margin-right: 2%;
    width: 48%;
  }
}
@media (min-width: 56.25em) {
  .span3 {
    width: 32%;
  }
}

@media (min-width: 43.75em) and (max-width: 56.25em) {
  .span3:nth-child(2n+1) {
    clear: left;
  }
}

@media (min-width: 43.75em) and (max-width: 56.25em) {
  .span3:nth-child(2n) {
    margin-right: 0;
  }
}

@media (min-width: 56.25em) {
  .span3:nth-child(3n+1) {
    clear: left;
  }
}

@media (min-width: 56.25em) {
  .span3:nth-child(3n) {
    margin-right: 0;
  }
}

.span2 {
  display: block;
}
@media (min-width: 43.75em) {
  .span2 {
    float: left;
    margin-right: 2%;
    width: 48%;
  }
}

@media (min-width: 43.75em) {
  .span2:nth-child(2n+1) {
    clear: left;
  }
}

@media (min-width: 43.75em) {
  .span2:nth-child(2n) {
    margin-right: 0;
  }
}

.paxs {
  padding: 0.25rem;
}

.ptxs {
  padding-top: 0.25rem;
}

.maxs {
  margin: 0.25rem;
}

.mtxs {
  margin-top: 0.25rem;
}

.pas {
  padding: 0.5rem;
}

.pts {
  padding-top: 0.5rem;
}

.mas {
  margin: 0.5rem;
}

.mts {
  margin-top: 0.5rem;
}

.pan {
  padding: 1rem;
}

.ptn {
  padding-top: 1rem;
}

.man {
  margin: 1rem;
}

.mtn {
  margin-top: 1rem;
}

.pam {
  padding: 1.25rem;
}

.ptm {
  padding-top: 1.25rem;
}

.mam {
  margin: 1.25rem;
}

.mtm {
  margin-top: 1.25rem;
}

.pal {
  padding: 1.5rem;
}

.ptl {
  padding-top: 1.5rem;
}

.mal {
  margin: 1.5rem;
}

.mtl {
  margin-top: 1.5rem;
}

.paxl {
  padding: 1.75rem;
}

.ptxl {
  padding-top: 1.75rem;
}

.maxl {
  margin: 1.75rem;
}

.mtxl {
  margin-top: 1.75rem;
}

.paxxl {
  padding: 2rem;
}

.ptxxl {
  padding-top: 2rem;
}

.maxxl {
  margin: 2rem;
}

.mtxxl {
  margin-top: 2rem;
}

.paxs {
  padding: 0.25rem;
}

.prxs {
  padding-right: 0.25rem;
}

.maxs {
  margin: 0.25rem;
}

.mrxs {
  margin-right: 0.25rem;
}

.pas {
  padding: 0.5rem;
}

.prs {
  padding-right: 0.5rem;
}

.mas {
  margin: 0.5rem;
}

.mrs {
  margin-right: 0.5rem;
}

.pan {
  padding: 1rem;
}

.prn {
  padding-right: 1rem;
}

.man {
  margin: 1rem;
}

.mrn {
  margin-right: 1rem;
}

.pam {
  padding: 1.25rem;
}

.prm {
  padding-right: 1.25rem;
}

.mam {
  margin: 1.25rem;
}

.mrm {
  margin-right: 1.25rem;
}

.pal {
  padding: 1.5rem;
}

.prl {
  padding-right: 1.5rem;
}

.mal {
  margin: 1.5rem;
}

.mrl {
  margin-right: 1.5rem;
}

.paxl {
  padding: 1.75rem;
}

.prxl {
  padding-right: 1.75rem;
}

.maxl {
  margin: 1.75rem;
}

.mrxl {
  margin-right: 1.75rem;
}

.paxxl {
  padding: 2rem;
}

.prxxl {
  padding-right: 2rem;
}

.maxxl {
  margin: 2rem;
}

.mrxxl {
  margin-right: 2rem;
}

.paxs {
  padding: 0.25rem;
}

.pbxs {
  padding-bottom: 0.25rem;
}

.maxs {
  margin: 0.25rem;
}

.mbxs {
  margin-bottom: 0.25rem;
}

.pas {
  padding: 0.5rem;
}

.pbs {
  padding-bottom: 0.5rem;
}

.mas {
  margin: 0.5rem;
}

.mbs {
  margin-bottom: 0.5rem;
}

.pan {
  padding: 1rem;
}

.pbn {
  padding-bottom: 1rem;
}

.man {
  margin: 1rem;
}

.mbn {
  margin-bottom: 1rem;
}

.pam {
  padding: 1.25rem;
}

.pbm {
  padding-bottom: 1.25rem;
}

.mam {
  margin: 1.25rem;
}

.mbm {
  margin-bottom: 1.25rem;
}

.pal {
  padding: 1.5rem;
}

.pbl {
  padding-bottom: 1.5rem;
}

.mal {
  margin: 1.5rem;
}

.mbl {
  margin-bottom: 1.5rem;
}

.paxl {
  padding: 1.75rem;
}

.pbxl {
  padding-bottom: 1.75rem;
}

.maxl {
  margin: 1.75rem;
}

.mbxl {
  margin-bottom: 1.75rem;
}

.paxxl {
  padding: 2rem;
}

.pbxxl {
  padding-bottom: 2rem;
}

.maxxl {
  margin: 2rem;
}

.mbxxl {
  margin-bottom: 2rem;
}

.paxs {
  padding: 0.25rem;
}

.plxs {
  padding-left: 0.25rem;
}

.maxs {
  margin: 0.25rem;
}

.mlxs {
  margin-left: 0.25rem;
}

.pas {
  padding: 0.5rem;
}

.pls {
  padding-left: 0.5rem;
}

.mas {
  margin: 0.5rem;
}

.mls {
  margin-left: 0.5rem;
}

.pan {
  padding: 1rem;
}

.pln {
  padding-left: 1rem;
}

.man {
  margin: 1rem;
}

.mln {
  margin-left: 1rem;
}

.pam {
  padding: 1.25rem;
}

.plm {
  padding-left: 1.25rem;
}

.mam {
  margin: 1.25rem;
}

.mlm {
  margin-left: 1.25rem;
}

.pal {
  padding: 1.5rem;
}

.pll {
  padding-left: 1.5rem;
}

.mal {
  margin: 1.5rem;
}

.mll {
  margin-left: 1.5rem;
}

.paxl {
  padding: 1.75rem;
}

.plxl {
  padding-left: 1.75rem;
}

.maxl {
  margin: 1.75rem;
}

.mlxl {
  margin-left: 1.75rem;
}

.paxxl {
  padding: 2rem;
}

.plxxl {
  padding-left: 2rem;
}

.maxxl {
  margin: 2rem;
}

.mlxxl {
  margin-left: 2rem;
}

.pvxs {
  padding-bottom: 0.25rem;
  padding-top: 0.25rem;
}

.mvxs {
  margin-bottom: 0.25rem;
  margin-top: 0.25rem;
}

.pvs {
  padding-bottom: 0.5rem;
  padding-top: 0.5rem;
}

.mvs {
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.pvn {
  padding-bottom: 1rem;
  padding-top: 1rem;
}

.mvn {
  margin-bottom: 1rem;
  margin-top: 1rem;
}

.pvm {
  padding-bottom: 1.25rem;
  padding-top: 1.25rem;
}

.mvm {
  margin-bottom: 1.25rem;
  margin-top: 1.25rem;
}

.pvl {
  padding-bottom: 1.5rem;
  padding-top: 1.5rem;
}

.mvl {
  margin-bottom: 1.5rem;
  margin-top: 1.5rem;
}

.pvxl {
  padding-bottom: 1.75rem;
  padding-top: 1.75rem;
}

.mvxl {
  margin-bottom: 1.75rem;
  margin-top: 1.75rem;
}

.pvxxl {
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.mvxxl {
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.phxs {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}

.mhxs {
  margin-left: 0.25rem;
  margin-right: 0.25rem;
}

.phs {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

.mhs {
  margin-left: 0.5rem;
  margin-right: 0.5rem;
}

.phn {
  padding-left: 1rem;
  padding-right: 1rem;
}

.mhn {
  margin-left: 1rem;
  margin-right: 1rem;
}

.phm {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.mhm {
  margin-left: 1.25rem;
  margin-right: 1.25rem;
}

.phl {
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.mhl {
  margin-left: 1.5rem;
  margin-right: 1.5rem;
}

.phxl {
  padding-left: 1.75rem;
  padding-right: 1.75rem;
}

.mhxl {
  margin-left: 1.75rem;
  margin-right: 1.75rem;
}

.phxxl {
  padding-left: 2rem;
  padding-right: 2rem;
}

.mhxxl {
  margin-left: 2rem;
  margin-right: 2rem;
}

.bal {
  border: 5px solid #E9EAE4;
}

.btl {
  border-top: 5px solid #E9EAE4;
}

.bam {
  border: 2px solid #E9EAE4;
}

.btm {
  border-top: 2px solid #E9EAE4;
}

.ban {
  border: 1px solid #E9EAE4;
}

.btn {
  border-top: 1px solid #E9EAE4;
}

.bal {
  border: 5px solid #E9EAE4;
}

.brl {
  border-right: 5px solid #E9EAE4;
}

.bam {
  border: 2px solid #E9EAE4;
}

.brm {
  border-right: 2px solid #E9EAE4;
}

.ban {
  border: 1px solid #E9EAE4;
}

.brn {
  border-right: 1px solid #E9EAE4;
}

.bal {
  border: 5px solid #E9EAE4;
}

.bbl {
  border-bottom: 5px solid #E9EAE4;
}

.bam {
  border: 2px solid #E9EAE4;
}

.bbm {
  border-bottom: 2px solid #E9EAE4;
}

.ban {
  border: 1px solid #E9EAE4;
}

.bbn {
  border-bottom: 1px solid #E9EAE4;
}

.bal {
  border: 5px solid #E9EAE4;
}

.bll {
  border-left: 5px solid #E9EAE4;
}

.bam {
  border: 2px solid #E9EAE4;
}

.blm {
  border-left: 2px solid #E9EAE4;
}

.ban {
  border: 1px solid #E9EAE4;
}

.bln {
  border-left: 1px solid #E9EAE4;
}

.hidden {
  display: none;
}

.cf:before,
.cf:after {
  content: " ";
  display: table;
}

.cf:after {
  clear: both;
}

.clear {
  clear: both;
}

.left {
  float: left;
}

.right {
  float: right;
}

.relative {
  position: relative;
}

.inline-block {
  display: inline-block;
}

.align-center {
  text-align: center;
}

.align-right {
  text-align: right;
}

.type-bold {
  font-weight: 600;
}

.trow {
  display: table;
  width: 100%;
}

.tcell {
  display: inline;
}
@media (min-width: 1024px) {
  .tcell {
    display: table-cell;
    vertical-align: middle;
  }
}

.flex-layout-horizontal,
.flex-layout-horizontal-reverse,
.flex-layout-vertical,
.flex-layout-vertical-reverse {
  display: flex;
}

.flex-layout-inline {
  display: inline-flex;
}

.flex-layout-horizontal {
  flex-direction: row;
}

.flex-layout-horizontal-reverse {
  flex-direction: row-reverse;
}

.flex-layout-vertical {
  flex-direction: column;
}

.flex-layout-vertical-reverse {
  flex-direction: column-reverse;
}

.flex-layout-wrap {
  flex-wrap: wrap;
}

.flex-layout-wrap-reverse {
  flex-wrap: wrap-reverse;
}

.flex-auto {
  flex: 1 1 auto;
}

.flex-none {
  flex: none;
}

.flex-1 {
  flex: 1;
}

.flex-2 {
  flex: 2;
}

.flex-3 {
  flex: 3;
}

.flex-4 {
  flex: 4;
}

.flex-5 {
  flex: 5;
}

.flex-6 {
  flex: 6;
}

.flex-7 {
  flex: 7;
}

.flex-8 {
  flex: 8;
}

.flex-9 {
  flex: 9;
}

.flex-10 {
  flex: 10;
}

.flex-11 {
  flex: 11;
}

.flex-12 {
  flex: 12;
}

.flex-start {
  align-items: flex-start;
}

.flex-center-center {
  align-items: center;
}

.flex-end {
  align-items: flex-end;
}

.flex-start-justified {
  justify-content: flex-start;
}

.flex-center-justified, .flex-center-center {
  justify-content: center;
}

.flex-end-justified {
  justify-content: flex-end;
}

.flex-around-justified {
  justify-content: space-around;
}

.flex-justified {
  justify-content: space-between;
}

.flex-self-start {
  align-self: flex-start;
}

.flex-self-center {
  align-self: center;
}

.flex-self-end {
  align-self: flex-end;
}

.flex-self-stretch {
  align-self: stretch;
}

SassMeister-rendered.html

12 column grid generated by Bourbon and Neat.

<!-- First row -->
<section class="grid-wrapper">
  <div class="grid-4">
    <div class="box">
      4 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
  <div class="grid-6">
    <div class="box">
      6 column
    </div>
  </div>
</section>

<!-- Second row -->
<section class="grid-wrapper">
  <div class="grid-3">
    <div class="box">
      3 column
    </div>
  </div>
  <div class="grid-7">
    <div class="box">
      5 column
    </div>
  </div>
  <div class="grid-2">
    <div class="box">
      2 column
    </div>
  </div>
</section>

<!-- Third row -->
<section class="bg-accent">
  <div class="grid-wrapper">
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
    <div class="grid-6">
      <div class="box">
        6 column
      </div>
    </div>
  </div>
</section>