Sass Grid Mixin Generator - Fabrik Framework - Derek Bess

_grid-generator.scss

// ==========================================================================
// Grid Generator Mixin
//
// Author: Derek Bess
// Requires: https://github.com/sass-mq/sass-mq
// Description: Creates a floated and flexbox grid system
//
// Container: @include make-container();
// Row:       @include make-row();
// Grid: @include make-container();
// ==========================================================================

$columns: 12;
$container: 1280px;

$grid-config: (
  columns: $columns,
  container: $container,
  gutters: (
    sm: '10px',
    md: '15px',
    lg: '20px',
  ),
  grid-sizes: (
    sm: 'mobile',
    md: 'tablet',
    lg: 'desktop',
  )
);

// ==========================================================================
// Grid Variables
// ==========================================================================

$flexbox-prefix: '.flex-row > .box';
$grid-sizes: map-get($grid-config, "grid-sizes");
$grid-gutters: map-get($grid-config, "gutters");

// ==========================================================================
// Grid Functions
// ==========================================================================

// Gutter Sizes
@function gutter($size: '') {
  @if $size == 'lg' {
    $size: $gutter-desktop;
  }
  @if $size == 'md' {
    $size: $gutter-tablet;
  }
  @if $size == '' or $size == 'sm' {
    $size: $gutter-mobile;
  }
  @return $size;
}

// ==========================================================================
// Containers
// ==========================================================================

@mixin make-container() {
  .container {
    position: relative;
    width: $container;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 0 gutter();
    @include clearfix;
    &.condensed {
      width: $container-condensed;
    }
     
    @each $size, $device in $grid-sizes {
      @if $size == 'md' {
        @include mq($from: $device) {
          padding: 0 gutter($size);
        }
      }
      @if $size == 'lg' {
        @include mq($from: $device) {
          padding: 0 gutter($size);
        }
      }
    }
  }
}

// ==========================================================================
// Rows
// ==========================================================================

@mixin make-row() {
  .row {
    margin-left:  -(gutter());
    margin-right: -(gutter());
    @include clearfix;

    &.collapse {
      margin-left: 0px;
      margin-right: 0px;
      [class*="mobile-"], [class*="tablet-"], [class*="desktop-"] {
        padding: 0px;
        margin: 0px;
      }
    }
     
    @each $size, $device in $grid-sizes {
      @if $size == 'md' {
        @include mq($from: $device) {
          margin-left:  -(gutter($size));
          margin-right: -(gutter($size));
        }
      }
      @if $size == 'lg' {
        @include mq($from: $device) {
          margin-left:  -(gutter($size));
          margin-right: -(gutter($size));
        }
      }
    }
  }
}

// ==========================================================================
// Grids
// ==========================================================================

@mixin make-grid() {
  
  @each $size, $device in $grid-sizes {
    
    @if $size == 'sm' {
      %gutters-sm {
        padding: 0 gutter($size);
        position: relative;
        min-height: 1px;
        @include clearfix;
      }
      [class*="#{$device}-"] { float: left; }
      @for $i from 1 through $columns {
        @each $size, $devices in $grid-sizes {
          [class*="#{$devices}-"] { @extend %gutters-sm; }
        }
        .#{$device}-#{$i} {
          width: percentage($i/$columns);
        }
      }
    }
    
    @if $size == 'md' {
      @include mq($from: $device) {
        %styles-md-padding {
          padding: 0 gutter($size);
        }
        %styles-md-float {
          float: left;
        }
        @for $i from 1 through $columns {
          @each $size, $devices in $grid-sizes {
            [class*="#{$device}-"] {
              @extend %styles-md-float;
            }
            [class*="#{$devices}-"] {
              @extend %styles-md-padding;
            }
          }
          .#{$device}-#{$i} {
            width: percentage($i/$columns);
          }
        }
      }
    }
    
    @if $size == 'lg' {
      @include mq($from: $device) {
        %styles-lg-padding {
          padding: 0 gutter($size);
        }
        %styles-lg-float {
          float: left;
        }
        @for $i from 1 through $columns {
          @each $size, $devices in $grid-sizes {
            [class*="#{$device}-"] {
              @extend %styles-lg-float;
            }
            [class*="#{$devices}-"] {
              @extend %styles-lg-padding;
            }
          }
          .#{$device}-#{$i} {
            width: percentage($i/$columns);
          }
        }
      }
    }
  }
}

// ==========================================================================
// Flexbox Grids
// ==========================================================================

@mixin make-flex-grid() {
  
  @each $size, $device in $grid-sizes {
    
    @if $size == 'sm' {
      %flex-gutters-sm {
        padding: 0 gutter($size);
      }
      [class*="#{$flexbox-prefix}-#{$device}-"] { float: left; }
      @for $i from 1 through $columns {
        @each $size, $devices in $grid-sizes {
          [class*="#{$flexbox-prefix}-#{$devices}-"] { @extend %flex-gutters-sm; }
        }
        #{$flexbox-prefix}-#{$device}-#{$i} {
          flex-grow: 0;
          flex-basis: percentage($i/$columns);
        }
      }
    }
    
    @if $size == 'md' {
      @include mq($from: $device) {
        %flex-styles-md {
          padding: 0 gutter($size);
          float: left;
        }
        @for $i from 1 through $columns {
          @each $size, $devices in $grid-sizes {
            [class*="#{$flexbox-prefix}-#{$devices}-"] {@extend %flex-styles-md;}
          }
          #{$flexbox-prefix}-#{$device}-#{$i} {
            flex-grow: 0;
            flex-basis: percentage($i/$columns);
          }
        }
      }
    }
    
    @if $size == 'lg' {
      @include mq($from: $device) {
        %flex-styles-lg {
          padding: 0 gutter($size);
          float: left;
        }

        @for $i from 1 through $columns {
          @each $size, $devices in $grid-sizes {
            [class*="#{$flexbox-prefix}-#{$devices}-"] {@extend %flex-styles-lg;}
          }
          #{$flexbox-prefix}-#{$device}-#{$i} {
            flex-grow: 0;
            flex-basis: percentage($i/$columns);
          }
        }
      }
    }
  }
}