Rename $container-width to $global-width to be consistent with Foundation for Sites...

diff --git a/scss/_global.scss b/scss/_global.scss
index 2fcad294222226ecdc8fb0d32580f22077fcaef2..5907042b061bc2f440d56a3d742dd1415ccc2569 100755 (executable)
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -50,9 +50,13 @@ $white: #fefefe !default;
 /// @type Color
 $pre-color: #ff6908 !default;
 
-/// Global width of the container.
+/// Width of the container.
 /// @type Number
-$container-width: 580px !default;
+$global-width: 580px !default;
+
+/// Width of the container on small screens.
+/// @type Length
+$global-width-small: 95% !default;
 
 /// Color for the container background
 /// @type Color

diff --git a/scss/components/_media-query.scss b/scss/components/_media-query.scss
index 94420a12e9da629706de9850155a03e7df89d240..9d62547605860267f71ead4bab7634de8f76a8e4 100755 (executable)
--- a/scss/components/_media-query.scss
+++ b/scss/components/_media-query.scss
@@ -6,12 +6,7 @@
 /// @group media-query
 ////
 
-/// Container width for small screens.
-/// @type Length
-$container-width-small: 95% !default;
-
 @media only screen and #{$global-breakpoint} {
-
   table.body img {
     width: auto !important;
     height: auto !important;
@@ -22,7 +17,7 @@ $container-width-small: 95% !default;
   }
 
   table.body .container {
-    width: $container-width-small !important;
+    width: $global-width-small !important;
   }
 
   //If it supports border-box, why not? Am I right?

diff --git a/scss/components/_normalize.scss b/scss/components/_normalize.scss
index 4df3508d3e5308b0861aedf0839ae4ea997c1cf2..925ac1732526e08f228b68b0a1747a697d98202a 100755 (executable)
--- a/scss/components/_normalize.scss
+++ b/scss/components/_normalize.scss
@@ -65,7 +65,7 @@ img {
 
 center {
   width: 100%;
-  min-width: $container-width;
+  min-width: $global-width;
 }
 
 a img {

diff --git a/scss/grid/_block-grid.scss b/scss/grid/_block-grid.scss
index b1c24646615c423212605662b8c86e0cd349cce4..b46c749f0cb4c2f371dc34e8dbe1eff1642e86cf 100755 (executable)
--- a/scss/grid/_block-grid.scss
+++ b/scss/grid/_block-grid.scss
@@ -16,7 +16,7 @@ $block-grid-gutter: $grid-column-gutter !default;
 
 .block-grid {
   width: 100%;
-  max-width: $container-width;
+  max-width: $global-width;
 
   td {
     display: inline-block;
@@ -27,6 +27,6 @@ $block-grid-gutter: $grid-column-gutter !default;
 // Sizing classes
 @for $i from 2 through $block-grid-max {
   .up-#{$i} td {
-    width: floor(($container-width - $i * $block-grid-gutter) / $i) !important;
+    width: floor(($global-width - $i * $block-grid-gutter) / $i) !important;
   }
 }

diff --git a/scss/grid/_grid.scss b/scss/grid/_grid.scss
index 02d61c78aa003b03f08e1bdae565dd9710523d37..9417b5709e5f2aff36d08a0949c41903e053717d 100755 (executable)
--- a/scss/grid/_grid.scss
+++ b/scss/grid/_grid.scss
@@ -46,7 +46,7 @@ table {
   &.container {
     background: $container-background-color;
 
-    width: $container-width;
+    width: $global-width;
     margin: 0 auto;
     text-align: inherit;
   }
@@ -90,7 +90,7 @@ th.column {
 @for $i from 1 through $grid-column-count {
   td.large-#{$i},
   th.large-#{$i} {
-    width: -zf-grid-calc-px($i, $grid-column-count, $container-width);
+    width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
     padding-left: $grid-column-gutter / 2;
     padding-right: $grid-column-gutter / 2;
   }
@@ -111,7 +111,7 @@ th.column {
     th.large-#{$i} {
       padding-right: 0;
       padding-left: 0;
-      width: -zf-grid-calc-px($i, $grid-column-count, $container-width) + $grid-column-gutter;
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $grid-column-gutter;
     }
 
     //Gotta give it that extra love for the first and last columns.
@@ -119,14 +119,14 @@ th.column {
     th.large-#{$i}.first,
     td.large-#{$i}.last,
     th.large-#{$i}.last {
-      width: -zf-grid-calc-px($i, $grid-column-count, $container-width) + ($grid-column-gutter * 1.5);
+      width: -zf-grid-calc-px($i, $grid-column-count, $global-width) + ($grid-column-gutter * 1.5);
     }
   }
 }
 
 @for $i from 1 through $grid-column-count {
   td.large-#{$i} center {
-    min-width: -zf-grid-calc-px($i, $grid-column-count, $container-width);
+    min-width: -zf-grid-calc-px($i, $grid-column-count, $global-width);
   }
 }
 
@@ -147,7 +147,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, $container-width) + $grid-column-gutter * 2;
+    padding-left: -zf-grid-calc-px($i, $grid-column-count, $global-width) + $grid-column-gutter * 2;
   }
 }
 

diff --git a/testing/src/assets/scss/_settings.scss b/testing/src/assets/scss/_settings.scss
index 5076628c9c6747c4912cfb24153c6886fd6f9012..8d6d0e7cd9cb4f99222faf1f8ea4814867636fd7 100644 (file)
--- a/testing/src/assets/scss/_settings.scss
+++ b/testing/src/assets/scss/_settings.scss
@@ -6,13 +6,12 @@
 //   1. Global
 //   2. Grid
 //   3. Block Grid
-//   4. Media Query
+//   4. Thumbnial
 //   5. Typography
 //   6. Button
 //   7. Callout
 //   8. Inline List
 //   9. Normalize
-//  10. Thumbnial
 
 
 // 1. Global
@@ -29,10 +28,12 @@ $dark-gray: #8a8a8a;
 $black: #0a0a0a;
 $white: #fefefe;
 $pre-color: #ff6908;
-$container-width: 580px;
+$global-width: 580px;
+$global-width-small: 95%;
 $container-background-color: $white;
 $global-radius: 3px;
 $global-rounded: 500px;
+$global-breakpoint: '(max-width: 580px)';
 
 // 2. Grid
 // -------
@@ -50,11 +51,10 @@ $body-background-color: $light-gray;
 $block-grid-max: 8;
 $block-grid-gutter: $grid-column-gutter;
 
-// 4. Media Query
-// --------------
+// 4. Thumbnial
+// ------------
 
-$container-width-small: 95%;
-$small-range: $container-width;
+$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
 
 // 5. Typography
 // -------------
@@ -128,8 +128,3 @@ $menu-simple-item-spacing: 10px;
 $hr-background: $medium-gray;
 $hr-height: 1px;
 
-// 10. Thumbnial
-// -------------
-
-$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2);
-