From: David Ollerhead <david.ollerhead@coindesk.com>
Date: Mon, 31 Mar 2014 13:59:33 +0000 (+0100)
Subject: Adding block-grid support for xl and xxl viewports
X-Git-Tag: v5.2.2~43^2
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=refs%2Fpull%2F4855%2Fhead;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Adding block-grid support for xl and xxl viewports
---

diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index 0a6197e44..9f54a2840 100644
--- 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 1810190b7..82d2e2020 100644
--- 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);
+        }
+      }
     }
   }
 }