Grid for eivin using busy

compiled_grid.css

/* Not so small grid. 
  
  
  How this grid works.
  
  To start, give every grid item a class of  `c`
  
  
*/
/*! END OF THE FUCKING GRID  */
.container {
  max-width: 100%;
  margin-left: auto;
  margin-right: auto; }
  .container:after {
    content: " ";
    display: block;
    clear: both; }

.c:nth-last-child(1) {
  margin-right: 0; }

.b-1 {
  width: 5.98977%;
  float: left;
  margin-right: 2.55661%; }

.b-2 {
  width: 14.53616%;
  float: left;
  margin-right: 2.55661%; }

.b-3 {
  width: 23.08254%;
  float: left;
  margin-right: 2.55661%; }

.b-4 {
  width: 31.62893%;
  float: left;
  margin-right: 2.55661%; }

.b-5 {
  width: 40.17531%;
  float: left;
  margin-right: 2.55661%; }

.b-6 {
  width: 48.72169%;
  float: left;
  margin-right: 2.55661%; }

.b-7 {
  width: 57.26808%;
  float: left;
  margin-right: 2.55661%; }

.b-8 {
  width: 65.81446%;
  float: left;
  margin-right: 2.55661%; }

.b-9 {
  width: 74.36085%;
  float: left;
  margin-right: 2.55661%; }

.b-10 {
  width: 82.90723%;
  float: left;
  margin-right: 2.55661%; }

.b-11 {
  width: 91.45362%;
  float: left;
  margin-right: 2.55661%; }

.b-12 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }

.b-1:nth-of-type(12n+12) {
  margin-right: 0; }

.b-1:nth-of-type(12n+13) {
  clear: left; }

.b-2:nth-of-type(6n+6) {
  margin-right: 0; }

.b-2:nth-of-type(6n+7) {
  clear: left; }

.b-3:nth-of-type(4n+4) {
  margin-right: 0; }

.b-3:nth-of-type(4n+5) {
  clear: left; }

.b-4:nth-of-type(3n+3) {
  margin-right: 0; }

.b-4:nth-of-type(3n+4) {
  clear: left; }

.b-5:nth-of-type(2n+2) {
  margin-right: 0; }

.b-5:nth-of-type(2n+3) {
  clear: left; }

.b-6:nth-of-type(2n+2) {
  margin-right: 0; }

.b-6:nth-of-type(2n+3) {
  clear: left; }

.b-7:nth-of-type(2n+2) {
  margin-right: 0; }

.b-7:nth-of-type(2n+3) {
  clear: left; }

.b-8:nth-of-type(2n+2) {
  margin-right: 0; }

.b-8:nth-of-type(2n+3) {
  clear: left; }

.b-9:nth-of-type(1n+1) {
  margin-right: 0; }

.b-9:nth-of-type(1n+2) {
  clear: left; }

.b-10:nth-of-type(1n+1) {
  margin-right: 0; }

.b-10:nth-of-type(1n+2) {
  clear: left; }

.b-11:nth-of-type(1n+1) {
  margin-right: 0; }

.b-11:nth-of-type(1n+2) {
  clear: left; }

.b-12:nth-of-type(1n+1) {
  margin-right: 0; }

.b-12:nth-of-type(1n+2) {
  clear: left; }

.m-1 {
  width: 5.98977%;
  float: left;
  margin-right: 2.55661%; }

.m-2 {
  width: 14.53616%;
  float: left;
  margin-right: 2.55661%; }

.m-3 {
  width: 23.08254%;
  float: left;
  margin-right: 2.55661%; }

.m-4 {
  width: 31.62893%;
  float: left;
  margin-right: 2.55661%; }

.m-5 {
  width: 40.17531%;
  float: left;
  margin-right: 2.55661%; }

.m-6 {
  width: 48.72169%;
  float: left;
  margin-right: 2.55661%; }

.m-7 {
  width: 57.26808%;
  float: left;
  margin-right: 2.55661%; }

.m-8 {
  width: 65.81446%;
  float: left;
  margin-right: 2.55661%; }

.m-9 {
  width: 74.36085%;
  float: left;
  margin-right: 2.55661%; }

.m-10 {
  width: 82.90723%;
  float: left;
  margin-right: 2.55661%; }

.m-11 {
  width: 91.45362%;
  float: left;
  margin-right: 2.55661%; }

.m-12 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }

.m-1:nth-of-type(12n+12) {
  margin-right: 0; }

.m-1:nth-of-type(12n+13) {
  clear: left; }

.m-2:nth-of-type(6n+6) {
  margin-right: 0; }

.m-2:nth-of-type(6n+7) {
  clear: left; }

.m-3:nth-of-type(4n+4) {
  margin-right: 0; }

.m-3:nth-of-type(4n+5) {
  clear: left; }

.m-4:nth-of-type(3n+3) {
  margin-right: 0; }

.m-4:nth-of-type(3n+4) {
  clear: left; }

.m-5:nth-of-type(2n+2) {
  margin-right: 0; }

.m-5:nth-of-type(2n+3) {
  clear: left; }

.m-6:nth-of-type(2n+2) {
  margin-right: 0; }

.m-6:nth-of-type(2n+3) {
  clear: left; }

.m-7:nth-of-type(2n+2) {
  margin-right: 0; }

.m-7:nth-of-type(2n+3) {
  clear: left; }

.m-8:nth-of-type(2n+2) {
  margin-right: 0; }

.m-8:nth-of-type(2n+3) {
  clear: left; }

.m-9:nth-of-type(1n+1) {
  margin-right: 0; }

.m-9:nth-of-type(1n+2) {
  clear: left; }

.m-10:nth-of-type(1n+1) {
  margin-right: 0; }

.m-10:nth-of-type(1n+2) {
  clear: left; }

.m-11:nth-of-type(1n+1) {
  margin-right: 0; }

.m-11:nth-of-type(1n+2) {
  clear: left; }

.m-12:nth-of-type(1n+1) {
  margin-right: 0; }

.m-12:nth-of-type(1n+2) {
  clear: left; }

.t-1 {
  width: 5.98977%;
  float: left;
  margin-right: 2.55661%; }

.t-2 {
  width: 14.53616%;
  float: left;
  margin-right: 2.55661%; }

.t-3 {
  width: 23.08254%;
  float: left;
  margin-right: 2.55661%; }

.t-4 {
  width: 31.62893%;
  float: left;
  margin-right: 2.55661%; }

.t-5 {
  width: 40.17531%;
  float: left;
  margin-right: 2.55661%; }

.t-6 {
  width: 48.72169%;
  float: left;
  margin-right: 2.55661%; }

.t-7 {
  width: 57.26808%;
  float: left;
  margin-right: 2.55661%; }

.t-8 {
  width: 65.81446%;
  float: left;
  margin-right: 2.55661%; }

.t-9 {
  width: 74.36085%;
  float: left;
  margin-right: 2.55661%; }

.t-10 {
  width: 82.90723%;
  float: left;
  margin-right: 2.55661%; }

.t-11 {
  width: 91.45362%;
  float: left;
  margin-right: 2.55661%; }

.t-12 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }

.t-1:nth-of-type(12n+12) {
  margin-right: 0; }

.t-1:nth-of-type(12n+13) {
  clear: left; }

.t-2:nth-of-type(6n+6) {
  margin-right: 0; }

.t-2:nth-of-type(6n+7) {
  clear: left; }

.t-3:nth-of-type(4n+4) {
  margin-right: 0; }

.t-3:nth-of-type(4n+5) {
  clear: left; }

.t-4:nth-of-type(3n+3) {
  margin-right: 0; }

.t-4:nth-of-type(3n+4) {
  clear: left; }

.t-5:nth-of-type(2n+2) {
  margin-right: 0; }

.t-5:nth-of-type(2n+3) {
  clear: left; }

.t-6:nth-of-type(2n+2) {
  margin-right: 0; }

.t-6:nth-of-type(2n+3) {
  clear: left; }

.d-1 {
  width: 5.98977%;
  float: left;
  margin-right: 2.55661%; }

.d-2 {
  width: 14.53616%;
  float: left;
  margin-right: 2.55661%; }

.d-3 {
  width: 23.08254%;
  float: left;
  margin-right: 2.55661%; }

.d-4 {
  width: 31.62893%;
  float: left;
  margin-right: 2.55661%; }

.d-5 {
  width: 40.17531%;
  float: left;
  margin-right: 2.55661%; }

.d-6 {
  width: 48.72169%;
  float: left;
  margin-right: 2.55661%; }

.d-7 {
  width: 57.26808%;
  float: left;
  margin-right: 2.55661%; }

.d-8 {
  width: 65.81446%;
  float: left;
  margin-right: 2.55661%; }

.d-9 {
  width: 74.36085%;
  float: left;
  margin-right: 2.55661%; }

.d-10 {
  width: 82.90723%;
  float: left;
  margin-right: 2.55661%; }

.d-11 {
  width: 91.45362%;
  float: left;
  margin-right: 2.55661%; }

.d-12 {
  width: 100%;
  float: left;
  margin-left: 0;
  margin-right: 0; }

.d-1:nth-of-type(12n+12) {
  margin-right: 0; }

.d-1:nth-of-type(12n+13) {
  clear: left; }

.d-2:nth-of-type(6n+6) {
  margin-right: 0; }

.d-2:nth-of-type(6n+7) {
  clear: left; }

.d-3:nth-of-type(4n+4) {
  margin-right: 0; }

.d-3:nth-of-type(4n+5) {
  clear: left; }

.d-4:nth-of-type(3n+3) {
  margin-right: 0; }

.d-4:nth-of-type(3n+4) {
  clear: left; }

.d-5:nth-of-type(2n+2) {
  margin-right: 0; }

.d-5:nth-of-type(2n+3) {
  clear: left; }

.d-6:nth-of-type(2n+2) {
  margin-right: 0; }

.d-6:nth-of-type(2n+3) {
  clear: left; }

/*! END OF THE FUCKING GRID  */
.mu {
  margin: 0 auto !important;
  float: none !important;
  display: block !important; }

scss_grid.scss

/* Not so small grid. 
  
  
  How this grid works.
  
  To start, give every grid item a class of  `c`
  
  
*/


/*! END OF THE FUCKING GRID  */
@import "susy";

$susy: (
  columns: 12, // Total column count
  gutters: 35/82, // Width of gutter / width of column
  gutter-position: after, // puts gutter after column
  last-flow: from, // Makes the last item float left, not right
  math: fluid // Make gutters in %
);

.container{ @include container; }

.c:nth-last-child(1){
  @include last;
}

// Base related grid

  $size: b;
  @for $i from 1 through 12 {
    .#{$size}-#{$i} {
      @include span($i of 12);
    }
  }

  // columns from 1 - 6 have no margin when they = 12
  @for $i from 1 through 12{
    $e: 12 / $i;
    $e: round($e);
    .#{$size}-#{$i}:nth-of-type(#{$e}n+#{$e}){ @include last; }
    .#{$size}-#{$i}:nth-of-type(#{$e}n+#{$e + 1}){ clear: left; }
  }


// Mobile Grid

  $size: m;
  @for $i from 1 through 12 {
    .#{$size}-#{$i} {
      @include span($i of 12);
    }
  }

  // columns from 1 - 6 have no margin when they = 12
  @for $i from 1 through 12{
    $e: 12 / $i;
    $e: round($e);
    .#{$size}-#{$i}:nth-of-type(#{$e}n+#{$e}){ @include last; }
    .#{$size}-#{$i}:nth-of-type(#{$e}n+#{$e + 1}){ clear: left; }
  }



    $size: t;
    @for $i from 1 through 12 {
      .#{$size}-#{$i} {
        @include span($i of 12);
      }
    }
          
    // columns from 1 - 6 have no margin when they = 12
    @for $i from 1 through 6{
      $e: 12 / $i;
      $e: round($e);
      .#{$size}-#{$i}:nth-of-type(#{$e}n+#{$e}){ @include last; }
      .#{$size}-#{$i}:nth-of-type(#{$e}n+#{$e + 1}){ clear: left; }
    }



  $size: d;
  @for $i from 1 through 12 {
    .#{$size}-#{$i} {
      @include span($i of 12);
    }
  }

  // columns from 1 - 6 have no margin when they = 12
  @for $i from 1 through 6{
    $e: 12 / $i;
    $e: round($e);
    .#{$size}-#{$i}:nth-of-type(#{$e}n+#{$e}){ @include last; }
    .#{$size}-#{$i}:nth-of-type(#{$e}n+#{$e + 1}){ clear: left; }

  }

/*! END OF THE FUCKING GRID  */

// Remove all styles, we're going with a floating thing
.mu{
  margin: 0 auto !important;
  float: none !important;
  display: block !important;
}