Merge pull request #138 from locomotivemtl/feature/css-variables

Feature / CSS Variables

assets/styles/components/_heading.scss

@@ -3,30 +3,29 @@
 // ==========================================================================
 
 .c-heading {
-    line-height: $line-height-h;
     margin-bottom: rem(30px);
 
     &.-h1 {
-        font-size: rem($font-size-h1);
+        font-size: var(--font-size-h1);
     }
 
     &.-h2 {
-        font-size: rem($font-size-h2);
+        font-size: var(--font-size-h2);
     }
 
     &.-h3 {
-        font-size: rem($font-size-h3);
+        font-size: var(--font-size-h3);
     }
 
     &.-h4 {
-        font-size: rem($font-size-h4);
+        font-size: var(--font-size-h4);
     }
 
     &.-h5 {
-        font-size: rem($font-size-h5);
+        font-size: var(--font-size-h5);
     }
 
     &.-h6 {
-        font-size: rem($font-size-h6);
+        font-size: var(--font-size-h6);
     }
 }

assets/styles/elements/_document.scss

@@ -2,21 +2,6 @@
 // Elements / Document
 // ==========================================================================
 
-:root {
-
-    // Grid
-    --grid-columns      : 4;
-    --grid-gutter       : #{rem(10px)};
-    --grid-gutter-half  : calc(0.5 * var(--grid-gutter));
-    --grid-margin       : 0px;
-
-    @media (min-width: $from-small) {
-        --grid-columns  : 12;
-        --grid-gutter   : #{rem(16px)};
-        --grid-margin   : #{rem(20px)};
-    }
-}
-
 //
 // Simple page-level setup.
 //

assets/styles/main.scss

@@ -3,13 +3,6 @@
 // ==========================================================================
 $app-env: app-env();  
 
-// Settings
-// ==========================================================================
-
-@import "settings/config.eases";
-@import "settings/config.colors";
-@import "settings/config";
-
 // ==========================================================================
 // Tools
 // ==========================================================================
@@ -22,6 +15,14 @@ $app-env: app-env();
 // @import "tools/widths";
 // @import "tools/family";
 
+// Settings
+// ==========================================================================
+
+@import "settings/config.eases";
+@import "settings/config.colors";
+@import "settings/config";
+@import "settings/config.variables";
+
 // Generic
 // ==========================================================================
 
@@ -70,4 +71,4 @@ $app-env: app-env();
 // @import "utilities/helpers";
 // @import "utilities/states";
 // @import "utilities/spacing";
-// @import "utilities/print";
+// @import "utilities/print";

assets/styles/objects/_container.scss

@@ -11,8 +11,7 @@
 // @link http://stackoverflow.com/a/13202141/140357
 
 .o-container {
+    width: var(--container-width);
     margin-right: auto;
     margin-left: auto;
-    padding-right: $base-column-gap;
-    padding-left: $base-column-gap;
 }

assets/styles/objects/_grid.scss

@@ -31,6 +31,12 @@
     // ==========================================================================
     // Cols
     // ==========================================================================
+
+    // Responsive grid columns based on `--grid-columns`
+    &.-cols {
+        grid-template-columns: repeat(var(--grid-columns), 1fr);
+    }
+
     &.-col-#{$base-column-nb} {
         grid-template-columns: repeat(#{$base-column-nb}, 1fr);
     }
@@ -51,8 +57,8 @@
 
     // Gutters rows and columns
     &.-gutters {
-        gap: $base-column-gap;
-        column-gap: $base-column-gap;
+        gap: var(--grid-gutter);
+        column-gap: var(--grid-gutter);
     }
 
     // ==========================================================================

assets/styles/settings/_config.scss

@@ -47,19 +47,10 @@ $font-faces: (
 // =============================================================================
 
 // Base
-$font-size: 16px;
+$font-size:     16px;
 $line-height:   24px / $font-size;
 $font-color:    $color-darkest;
 
-// Headings
-$font-size-h1:  36px  !default;
-$font-size-h2:  28px  !default;
-$font-size-h3:  24px  !default;
-$font-size-h4:  20px  !default;
-$font-size-h5:  18px  !default;
-$font-size-h6:  16px  !default;
-$line-height-h: $line-height;
-
 // Weights
 $font-weight-light:     300;
 $font-weight-normal:    400;
@@ -84,7 +75,6 @@ $padding:         $unit;
 // Grid
 // ==========================================================================
 $base-column-nb: 12;
-$base-column-gap: $unit-small;
 
 // Breakpoints
 // =============================================================================

assets/styles/settings/_config.variables.scss

@@ -0,0 +1,29 @@
+// ==========================================================================
+// Settings / Config / CSS VARS
+// ==========================================================================
+
+:root {
+
+    // Grid
+    --grid-columns:     4;
+    --grid-gutter:      #{rem(10px)};
+    --grid-gutter-half: calc(0.5 * var(--grid-gutter));
+    --grid-margin:      #{rem(10px)};
+
+    // Container
+    --container-width:  calc(100% - 2 * var(--grid-margin));
+
+    // Font sizes
+    --font-size-h1:     #{rem(36px)};
+    --font-size-h2:     #{rem(28px)};
+    --font-size-h3:     #{rem(24px)};
+    --font-size-h4:     #{rem(20px)};
+    --font-size-h5:     #{rem(18px)};
+    --font-size-h6:     #{rem(16px)};
+
+    @media (min-width: $from-small) {
+        --grid-columns:     #{$base-column-nb};
+        --grid-gutter:      #{rem(16px)};
+        --grid-margin:      #{rem(20px)};
+    }
+}