foundation-grid-columns-mixin

//
// Grid Columns
//
// A mixin to help make Foundation's grid-column mixin easier 
// to use when specifying multiple media quries/screen sizes

@mixin grid-columns(
    // Mobile First Media Queries
        $small-up-screens: false,
       $medium-up-screens: false,
        $large-up-screens: false,
       $xlarge-up-screens: false,
      $xxlarge-up-screens: false,
  // Specific Range Media Queries
      $small-only-screens: false,
     $medium-only-screens: false,
      $large-only-screens: false,
     $xlarge-only-screens: false,
    $xxlarge-only-screens: false ){
  
  //
  // Mobile First Media Queries
  // 

  // Small and up screens  
  @if $small-up-screens {
    @include grid-column($small-up-screens);
  }
  
  // Medium and up screens
  @if $medium-up-screens {
    @media #{$medium-up} {
      @include grid-column($medium-up-screens);
    }
  }

  // Large and up screens
  @if $large-up-screens {
    @media #{$large-up} {
      @include grid-column($large-up-screens);
    }
  }
  
  // XLarge and up screens
  @if $xlarge-up-screens {
    @media #{$xlarge-up} {
      @include grid-column($xlarge-up-screens);
    }
  }

  // XXLarge and up screens
  @if $xxlarge-up-screens {
    @media #{$xxlarge-up} {
      @include grid-column($xxlarge-up-screens);
    }
  }
  
  //
  // Specific Range Media Queries
  //

  // Small only screens  
  @if $small-only-screens {
    @media #{$small-only} {
      @include grid-column($small-only-screens);
    }
  }
  
  // Medium only screens
  @if $medium-only-screens {
    @media #{$medium-only} {
      @include grid-column($medium-only-screens);
    }
  }

  // Large only screens
  @if $large-only-screens {
    @media #{$large-only} {
      @include grid-column($large-only-screens);
    }
  }
  
  // XLarge only screens
  @if $xlarge-only-screens {
    @media #{$xlarge-only} {
      @include grid-column($xlarge-only-screens);
    }
  }

  // XXLarge only screens
  @if $xxlarge-only-screens {
    @media #{$xxlarge-only} {
      @include grid-column($xxlarge-only-screens);
    }
  }
}

foundation-grid-offset

@mixin grid-offset(
    // Mobile First Media Queries
        $small-up-screens: false,
       $medium-up-screens: false,
        $large-up-screens: false,
       $xlarge-up-screens: false,
      $xxlarge-up-screens: false,
  // Specific Range Media Queries
      $small-only-screens: false,
     $medium-only-screens: false,
      $large-only-screens: false,
     $xlarge-only-screens: false,
    $xxlarge-only-screens: false ){
  
  //
  // Mobile First Media Queries
  // 
 
  // Small and up screens  
  @if $small-up-screens {
    margin-#{$default-float}: grid-calc($small-up-screens, $total-columns) !important; 
  }
  
  // Medium and up screens
  @if $medium-up-screens {
    @media #{$medium-up} {
      margin-#{$default-float}: grid-calc($medium-up-screens, $total-columns) !important;
    }
  }
 
  // Large and up screens
  @if $large-up-screens {
    @media #{$large-up} {
      margin-#{$default-float}: grid-calc($large-up-screens, $total-columns) !important;
    }
  }
  
  // XLarge and up screens
  @if $xlarge-up-screens {
    @media #{$xlarge-up} {
      margin-#{$default-float}: grid-calc($xlarge-up-screens, $total-columns) !important;
    }
  }
 
  // XXLarge and up screens
  @if $xxlarge-up-screens {
    @media #{$xxlarge-up} {
      margin-#{$default-float}: grid-calc($xxlarge-up-screens, $total-columns) !important;
    }
  }
  
  //
  // Specific Range Media Queries
  //
 
  // Small only screens  
  @if $small-only-screens {
    @media #{$small-only} {
      margin-#{$default-float}: grid-calc($small-only-screens, $total-columns) !important;
    }
  }
  
  // Medium only screens
  @if $medium-only-screens {
    @media #{$medium-only} {
      margin-#{$default-float}: grid-calc($medium-only-screens, $total-columns) !important;
    }
  }
 
  // Large only screens
  @if $large-only-screens {
    @media #{$large-only} {
      margin-#{$default-float}: grid-calc($large-only-screens, $total-columns) !important;
    }
  }
  
  // XLarge only screens
  @if $xlarge-only-screens {
    @media #{$xlarge-only} {
      margin-#{$default-float}: grid-calc($xlarge-only-screens, $total-columns) !important;
    }
  }
 
  // XXLarge only screens
  @if $xxlarge-only-screens {
    @media #{$xxlarge-only} {
      margin-#{$default-float}: grid-calc($xxlarge-only-screens, $total-columns) !important;
    }
  }
}

foundation-grid-offsets

// For setting both columns and offset in the same mixin
 
@mixin grid-offsets(
    // Mobile First Media Queries
        $small-up-columns: false,
        $small-up-offset: 0,
       $medium-up-columns: false,
       $medium-up-offset: 0,
        $large-up-columns: false,
        $large-up-offset: 0,
       $xlarge-up-columns: false,
       $xlarge-up-offset: 0
        ){
  
  //
  // Mobile First Media Queries
  // 
 
  // Small and up screens  
  @if $small-up-columns {
    @include grid-column($columns:$small-up-columns,$offset:$small-up-offset);
  }
  
  // Medium and up screens
  @if $medium-up-columns {
    @media #{$medium-up} {
      @include grid-column($columns:$medium-up-columns,$offset:$medium-up-offset);
    }
  }
 
  // Large and up screens
  @if $large-up-columns {
    @media #{$large-up} {
      @include grid-column($columns:$large-up-columns,$offset:$large-up-offset);
    }
  }
  
  // XLarge and up screens
  @if $xlarge-up-columns {
    @media #{$xlarge-up} {
      @include grid-column($columns:$xlarge-up-columns,$offset:$xlarge-up-offset);
    }
  }
 
}