GRID by Levi Beach

Grid is a simple set of Sass mixins that allow you to easily create custom grid frameworks in minutes -- tailored to whatever your markup needs are. It is versatile enough to work within just about any structure or naming convention and semantics are entirely up to you. In a nutshell Grid takes care of the structure so you can focus on everything else.

Straight 12 column grid

        
.grid1 {
  @include grid-container;
}

%grid1-item {
  @include grid-col(1);
}

@for $i from 1 through 12 {
  .grid1-item-#{$i} {
    @extend %grid-block;
    @extend %grid1-item;
  }
}

Column spanning

        
.grid2 {
  @include grid-container;
}
.grid2-item-6 {
  @extend %grid-block;
  @include grid-col(6);
}
.grid2-item-3 {
  @extend %grid-block;
  @include grid-col(3);
}
.grid2-item-4 {
  @extend %grid-block;
  @include grid-col(4);
}

Repeating grid

        
.grid3 {
  @include grid-container;
  @include grid(1, 2, 3, 6);
  .grid-item {
    @extend %grid-block;
  }
}

Random-looking grid

        
.grid4 {
  @include grid-container;
  @include grid(1, 2, 3, 1, 2);
  .grid-item {
    @extend %grid-block;
  }
}

No gutters

Border color has been set to white just to show where the boxes are touching

        
.grid5 {
  $grid-gutters: 0px !global;
  @include grid-container;
  @include grid(4, 4, 4);
  .grid-item {
    @extend %grid-block;
    border: 1px solid white;
  }
}

Responsive grid

Go ahead and resize your browser

        
// Example uses mq - https://github.com/sass-mq/sass-mq
.grid6 {
  @include grid-container;
  @include mq($until: tablet) {
    @include grid(12);
  }
  @include mq($from:tablet,$until:desktop) {
    @include grid(6, 6);
  }
  @include mq($from:desktop,$until:wide) {
    @include grid(4, 4, 4);
  }
  @include mq($from:wide) {
    @include grid(3, 3, 3, 3);
  }
  .grid-item {
    background-color: $color-primary;
    height: 100px;
    margin-bottom: $grid-gutters;
    @include mq($until:tablet) {
      margin-bottom: 6px;
      height: 25px;
    }
  }
}