Change $global-breakpoint to be a number derived from the width of the container...

diff --git a/scss/_global.scss b/scss/_global.scss
index 5907042b061bc2f440d56a3d742dd1415ccc2569..5de2f79ae05d24a71a17847f67eeaffcdae30543 100755 (executable)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -58,6 +58,10 @@ $global-width: 580px !default;
 /// @type Length
 $global-width-small: 95% !default;
 
+/// Gutter for grid elements.
+/// @type length
+$global-gutter: 16px !default;
+
 /// Color for the container background
 /// @type Color
 $container-background-color: $white !default;
@@ -72,4 +76,4 @@ $global-rounded: 500px !default;
 
 /// Global media query to switch from desktop to mobile styles.
 /// @type String
-$global-breakpoint: '(max-width: 580px)';
+$global-breakpoint: $global-width + $global-gutter;

diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index 9d62547605860267f71ead4bab7634de8f76a8e4..3af846305fcaf35ca07fdfc2a201b80bf6f59c2e 100755 (executable)
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -6,7 +6,7 @@
 /// @group media-query
 ////
 
-@media only screen and #{$global-breakpoint} {
+@media only screen and (max-width: #{$global-breakpoint}) {
   table.body img {
     width: auto !important;
     height: auto !important;
@@ -28,8 +28,8 @@
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
-    padding-left: $grid-column-gutter !important;
-    padding-right: $grid-column-gutter !important;
+    padding-left: $global-gutter !important;
+    padding-right: $global-gutter !important;
   }
 
   //If it's collapsed make it so.

diff --git a/scss/components/_visibility.scss b/scss/components/_visibility.scss
index b1810103900f99004139100356c1609f0cf1d646..09400bf07ed78c2b2d0c18e1fd3239f62f4c5dcb 100644 (file)
--- a/scss/components/_visibility.scss
+++ b/scss/components/_visibility.scss
@@ -12,13 +12,13 @@
   mso-hide:all;
   overflow:hidden;
 
-  @media only screen and #{$global-breakpoint} {
+  @media only screen and (max-width: #{$global-breakpoint}) {
     display: block;
   }
 }
 
 .show-for-large {
-  @media only screen and #{$global-breakpoint} {
+  @media only screen and (max-width: #{$global-breakpoint}) {
     display: none;
     width:0;
     mso-hide:all;

diff --git a/scss/grid/_block-grid.scss b/scss/grid/_block-grid.scss
index b46c749f0cb4c2f371dc34e8dbe1eff1642e86cf..0a38192ab435ac4ce27428dc4bed02189a28f02c 100755 (executable)
--- a/scss/grid/_block-grid.scss
+++ b/scss/grid/_block-grid.scss
@@ -12,7 +12,7 @@ $block-grid-max: 8 !default;
 
 /// Gutter between elements in a block grid.
 /// @type Number
-$block-grid-gutter: $grid-column-gutter !default;
+$block-grid-gutter: $global-gutter !default;
 
 .block-grid {
   width: 100%;

diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 9417b5709e5f2aff36d08a0949c41903e053717d..b74a5589c4af1fdb013fd0f49253a57fada6b77b 100755 (executable)
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -18,13 +18,9 @@ $wrapper-padding-top: 10px !default;
 /// @type Number
 $column-padding-bottom: 10px !default;
 
-/// Default gutter for the grid system
-/// @type Number
-$grid-column-gutter: 16px !default;
-
 /// Default padding for the right of a sub-column.
 /// @type Number
-$sub-column-padding-right: $grid-column-gutter / 2 !default;
+$sub-column-padding-right: $global-gutter / 2 !default;
 
 /// Body background color.
 /// @type Length
@@ -67,14 +63,14 @@ td.column,
 th.columns,
 th.column {
   margin: 0 auto;
-  padding-left: $grid-column-gutter;
+  padding-left: $global-gutter;
 }
 
 td.columns.last,
 td.column.last,
 th.columns.last,
 th.column.last {
-  padding-right: $grid-column-gutter;
+  padding-right: $global-gutter;
 }
 
 //makes sure nested tables are 100% width
@@ -91,18 +87,18 @@ th.column {
   td.large-#{$i},
   th.large-#{$i} {
     width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
-    padding-left: $grid-column-gutter / 2;
-    padding-right: $grid-column-gutter / 2;
+    padding-left: $global-gutter / 2;
+    padding-right: $global-gutter / 2;
   }
 
   td.large-#{$i}.first,
   th.large-#{$i}.first {
-    padding-left: $grid-column-gutter;
+    padding-left: $global-gutter;
   }
 
   td.large-#{$i}.last,
   th.large-#{$i}.last {
-    padding-right: $grid-column-gutter;
+    padding-right: $global-gutter;
   }
 
   //Collapsed logic
@@ -111,7 +107,7 @@ th.column {
     th.large-#{$i} {
       padding-right: 0;
       padding-left: 0;
-      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $grid-column-gutter;
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter;
     }
 
     //Gotta give it that extra love for the first and last columns.
@@ -119,7 +115,7 @@ th.column {
     th.large-#{$i}.first,
     td.large-#{$i}.last,
     th.large-#{$i}.last {
-      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($grid-column-gutter * 1.5);
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($global-gutter * 1.5);
     }
   }
 }
@@ -147,7 +143,7 @@ th.column {
   th.large-offset-#{$i}.first,
   th.large-offset-#{$i}.last {
     //1.5 takes in effect a whole empty cell.
-    padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $grid-column-gutter * 2;
+    padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $global-gutter * 2;
   }
 }
 

diff --git a/scss/util/_util.scss b/scss/util/_util.scss
index afa2abaeb383b1a5b579c89a27dd3f64251eb67a..faabca543b712cc601e77b3ab9ed849ab395c077 100755 (executable)
--- a/scss/util/_util.scss
+++ b/scss/util/_util.scss
@@ -18,5 +18,5 @@
 /// @param {number} $containerWidth - Width of the surrounding container, in pixels.
 /// @returns {number} A pixel width value.
 @function -zf-grid-calc-px($columnNumber, $totalColumns, $containerWidth) {
-  @return ($containerWidth / $totalColumns * $columnNumber - $grid-column-gutter);
+  @return ($containerWidth / $totalColumns * $columnNumber - $global-gutter);
 }

diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss
index 8d6d0e7cd9cb4f99222faf1f8ea4814867636fd7..eabf960ab44d98a925cd6f47d10fff2e025bb205 100644 (file)
--- a/testing/src/assets/scss/_settings.scss
+++ b/testing/src/assets/scss/_settings.scss
@@ -41,15 +41,15 @@ $global-breakpoint: '(max-width: 580px)';
 $grid-column-count: 12;
 $wrapper-padding-top: 10px;
 $column-padding-bottom: 10px;
-$grid-column-gutter: 16px;
-$sub-column-padding-right: $grid-column-gutter / 2;
+$global-gutter: 16px;
+$sub-column-padding-right: $global-gutter / 2;
 $body-background-color: $light-gray;
 
 // 3. Block Grid
 // -------------
 
 $block-grid-max: 8;
-$block-grid-gutter: $grid-column-gutter;
+$block-grid-gutter: $global-gutter;
 
 // 4. Thumbnial
 // ------------

diff --git a/testing/src/assets/scss/app.scss b/testing/src/assets/scss/app.scss
index 00eb7f06dd7cde020b18161289c1609da647bd14..78e107f03dbe869a4ce606a576e8a941de02dd92 100644 (file)
--- a/testing/src/assets/scss/app.scss
+++ b/testing/src/assets/scss/app.scss
@@ -1,7 +1,7 @@
 @import 'settings';
 @import '../../../../scss/foundation';
 
-@media only screen and #{$global-breakpoint} {
+@media only screen and (max-width: #{$global-breakpoint}) {
   .small-float-center {
     margin: 0 auto;
     float: none;