Adding block-grid support for xl and xxl viewports

diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index 0a6197e443171d41d099a5c0b4b80a1202afdd06..9f54a2840b5108b9a8031875dbf97e5040c1c46d 100644 (file)
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -274,6 +274,7 @@
 // Block Grid
 
 // $include-html-grid-classes: $include-html-classes;
+// $include-xl-html-block-grid-classes: false;
 
 // We use this to control the maximum number of block grid elements per row
 // $block-grid-elements: 12;

diff --git a/scss/foundation/components/_block-grid.scss b/scss/foundation/components/_block-grid.scss
index 1810190b7ad75630ffebdc02db0b317b48f7f186..82d2e2020532cf995f37886c944d8b31e048aa54 100644 (file)
--- a/scss/foundation/components/_block-grid.scss
+++ b/scss/foundation/components/_block-grid.scss
@@ -8,6 +8,7 @@
 // Block Grid Variables
 //
 $include-html-grid-classes: $include-html-classes !default;
+$include-xl-html-block-grid-classes: false !default;
 
 // We use this to control the maximum number of block grid elements per row
 $block-grid-elements: 12 !default;
@@ -31,8 +32,8 @@ $block-grid-media-queries: true !default;
 // $spacing - # of ems to use as padding on each block item. Default: rem-calc(20).
 // $base-style - Apply a base style to block grid. Default: true.
 @mixin block-grid(
-  $per-row:false, 
-  $spacing:$block-grid-default-spacing, 
+  $per-row:false,
+  $spacing:$block-grid-default-spacing,
   $include-spacing:true,
   $base-style:true) {
 
@@ -101,21 +102,31 @@ $block-grid-media-queries: true !default;
 
 @include exports("block-grid") {
   @if $include-html-grid-classes {
-    
+
     [class*="block-grid-"] { @include block-grid; }
-    
+
     @if $block-grid-media-queries {
       @media #{$small-up} {
         @include block-grid-html-classes($size:small,$include-spacing:false);
       }
-  
+
       @media #{$medium-up} {
         @include block-grid-html-classes($size:medium,$include-spacing:false);
       }
-  
+
       @media #{$large-up} {
         @include block-grid-html-classes($size:large,$include-spacing:false);
       }
+
+      @if $include-xl-html-block-grid-classes {
+        @media #{$xlarge-up} {
+          @include block-grid-html-classes($size:xlarge,$include-spacing:false);
+        }
+
+        @media #{$xxlarge-up} {
+          @include block-grid-html-classes($size:xxlarge,$include-spacing:false);
+        }
+      }
     }
   }
 }