move more css into variables:

- more properties in variables makes it easier for users to override and for me to update and add config in the future - made variables for spacers, font styles, breakpoint and container size
broccolini · Sep 17, 2016 · 32ded0e · 32ded0e
1 parent 8b360ff
commit 32ded0e
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 65 deletions.
diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -28,8 +28,8 @@ dl, dd, ol, ul, figure {
  * Basic styling
  */
 body {
-    font-family: $body-font;
-    font-size: 16px;
+    font-family: $body-font-family;
+    font-size: $body-font-size;
     line-height: 1.5;
     color: $color-body-text;
     background-color: #fff;

diff --git a/_sass/_components.scss b/_sass/_components.scss
@@ -2,29 +2,29 @@
 
 // Code formatting
 pre {
-    border-left: 8px solid $color-border;
-    margin: 32px 0;
+    border-left: $spacer-1 solid $color-border;
+    margin: $spacer-3 0;
     padding-left: 16px;
-    width: (9 / 12 * 100%);
+    width: (9 / 12 * 100%); // matches col-9
     overflow-x: auto;
 }
 
 code {
     color: $color-code;
-    font-size: 16px;
+    font-size: $body-font-size;
     padding: 1px 4px;
 }
 
 
 .prose {
 
   p, ol, ul {
-    font-size: 20px;
+    font-size: $prose-font-size;
     margin-bottom: 1em;
     width: 100%;
 
-    @media (min-width: 52em) {
-      width: (10 / 12 * 100%);
+    @media (min-width: $breakpoint-lg) {
+      width: (10 / 12 * 100%); // matches col-10
     }
 
   }
@@ -45,8 +45,8 @@ code {
 
     max-width: 100%;
 
-    @media (min-width: 52em) {
-      max-width: (12 / 10 * 100%);
+    @media (min-width: $breakpoint-lg) {
+      max-width: (12 / 10 * 100%); // make image fill width of container on desktop
     }
 
   }
@@ -55,16 +55,16 @@ code {
     line-height: 1.375;
     padding-left: 20px;
     margin: 40px 0 40px -16px;
-    border-left: 8px solid $color-border;
+    border-left: $spacer-1 solid $color-border;
     font-style: italic;
 
     p {
       font-size: 24px;
     }
 
-    @media (min-width: 52em) {
-      padding-left: 32px;
-      margin: 64px 0 64px -40px;
+    @media (min-width: $breakpoint-lg) {
+      padding-left: $spacer-3;
+      margin: $spacer-4 0 $spacer-4 -40px;
       max-width: (11 / 10 * 100%);
 
       p {
@@ -112,7 +112,7 @@ code {
 
     th,
     td {
-      padding: 16px 32px 16px 2px;
+      padding: $spacer-2 $spacer-3 $spacer-2 2px;
       border-top: 1px solid $color-body-text;
       border-bottom: 1px solid $color-body-text;
     }

diff --git a/_sass/_utilities.scss b/_sass/_utilities.scss
@@ -1,11 +1,12 @@
 /* Type utilities */
-.h0 { font-size: 64px;
+.h0 {
+  font-size: $h0-mobile;
   line-height: 1.0125;
   margin-top: 0.85em;
   word-wrap: break-word;
 
-  @media (min-width: 52em) {
-    font-size: 128px;
+  @media (min-width: $breakpoint-lg) {
+    font-size: $h0-desktop;
   }
 }
 
@@ -48,7 +49,7 @@
 .text-accent { color: $color-text-accent; } // used for date in post list and home link
 
 /* Layout utilities */
-.container { max-width: 64em; }
+.container { max-width: $container-width; }
 
 .col-1 { width: (1 / 12 * 100%); }
 .col-2 { width: (2 / 12 * 100%); }
@@ -63,7 +64,7 @@
 .col-11 { width: (11 / 12 * 100%); }
 .col-12 { width: 100%; }
 
-@media (max-width: 52em) {
+@media (max-width: $breakpoint-lg) {
   .sm-width-full { width: 100% !important; }
 }
 
@@ -88,17 +89,17 @@
 .px-0 { padding-left: 0; padding-right:  0 }
 .py-0 { padding-top: 0;  padding-bottom: 0 }
 
-.px-1 { padding-left: 8px; padding-right:  8px }
-.py-1 { padding-top: 8px;  padding-bottom: 8px }
+.px-1 { padding-left: $spacer-1; padding-right:  $spacer-1 }
+.py-1 { padding-top: $spacer-1;  padding-bottom: $spacer-1 }
 
-.px-2 { padding-left: 16px; padding-right:  16px; }
-.py-2 { padding-top: 16px;  padding-bottom: 16px; }
+.px-2 { padding-left: $spacer-2; padding-right:  $spacer-2; }
+.py-2 { padding-top: $spacer-2;  padding-bottom: $spacer-2; }
 
-.px-3 { padding-left: 32px; padding-right:  32px; }
-.py-3 { padding-top: 32px;  padding-bottom: 32px; }
+.px-3 { padding-left: $spacer-3; padding-right:  $spacer-3; }
+.py-3 { padding-top: $spacer-3;  padding-bottom: $spacer-3; }
 
-.px-4 { padding-left: 64px; padding-right:  64px; }
-.py-4 { padding-top: 64px;  padding-bottom: 64px; }
+.px-4 { padding-left: $spacer-4; padding-right:  $spacer-4; }
+.py-4 { padding-top: $spacer-4;  padding-bottom: $spacer-4; }
 
 /* Margin */
 .mx-auto { margin-left: auto; margin-right: auto; }
@@ -108,25 +109,25 @@
 .mb-0 { margin-bottom: 0; }
 .ml-0 { margin-left: 0; }
 
-.mt-1 { margin-top: 8px; }
-.mr-1 { margin-right: 8px; }
-.mb-1 { margin-bottom: 8px; }
-.ml-1 { margin-left: 8px; }
+.mt-1 { margin-top: $spacer-1; }
+.mr-1 { margin-right: $spacer-1; }
+.mb-1 { margin-bottom: $spacer-1; }
+.ml-1 { margin-left: $spacer-1; }
 
-.mt-2 { margin-top: 16px; }
-.mr-2 { margin-right: 16px; }
-.mb-2 { margin-bottom: 16px; }
-.ml-2 { margin-left: 16px; }
+.mt-2 { margin-top: $spacer-2; }
+.mr-2 { margin-right: $spacer-2; }
+.mb-2 { margin-bottom: $spacer-2; }
+.ml-2 { margin-left: $spacer-2; }
 
-.mt-3 { margin-top: 32px; }
-.mr-3 { margin-right: 32px; }
-.mb-3 { margin-bottom: 32px; }
-.ml-3 { margin-left: 32px; }
+.mt-3 { margin-top: $spacer-3; }
+.mr-3 { margin-right: $spacer-3; }
+.mb-3 { margin-bottom: $spacer-3; }
+.ml-3 { margin-left: $spacer-3; }
 
-.mt-4 { margin-top: 64px; }
-.mr-4 { margin-right: 63px; }
-.mb-4 { margin-bottom: 64px; }
-.ml-4 { margin-left: 64px; }
+.mt-4 { margin-top: $spacer-4; }
+.mr-4 { margin-right: $spacer-4; }
+.mb-4 { margin-bottom: $spacer-4; }
+.ml-4 { margin-left: $spacer-4; }
 
 // Responsive margin
 @media (min-width: 52em) {
@@ -137,25 +138,25 @@
   .mb-lg-0 { margin-bottom: 0; }
   .ml-lg-0 { margin-left: 0; }
 
-  .mt-lg-1 { margin-top: 8px; }
-  .mr-lg-1 { margin-right: 8px; }
-  .mb-lg-1 { margin-bottom: 8px; }
-  .ml-lg-1 { margin-left: 8px; }
-
-  .mt-lg-2 { margin-top: 16px; }
-  .mr-lg-2 { margin-right: 16px; }
-  .mb-lg-2 { margin-bottom: 16px; }
-  .ml-lg-2 { margin-left: 16px; }
-
-  .mt-lg-3 { margin-top: 32px; }
-  .mr-lg-3 { margin-right: 32px; }
-  .mb-lg-3 { margin-bottom: 32px; }
-  .ml-lg-3 { margin-left: 32px; }
-
-  .mt-lg-4 { margin-top: 64px; }
-  .mr-lg-4 { margin-right: 64px; }
-  .mb-lg-4 { margin-bottom: 64px; }
-  .ml-lg-4 { margin-left: 64px; }
+  .mt-lg-1 { margin-top: $spacer-1; }
+  .mr-lg-1 { margin-right: $spacer-1; }
+  .mb-lg-1 { margin-bottom: $spacer-1; }
+  .ml-lg-1 { margin-left: $spacer-1; }
+
+  .mt-lg-2 { margin-top: $spacer-2; }
+  .mr-lg-2 { margin-right: $spacer-2; }
+  .mb-lg-2 { margin-bottom: $spacer-2; }
+  .ml-lg-2 { margin-left: $spacer-2; }
+
+  .mt-lg-3 { margin-top: $spacer-3; }
+  .mr-lg-3 { margin-right: $spacer-3; }
+  .mb-lg-3 { margin-bottom: $spacer-3; }
+  .ml-lg-3 { margin-left: $spacer-3; }
+
+  .mt-lg-4 { margin-top: $spacer-4; }
+  .mr-lg-4 { margin-right: $spacer-4; }
+  .mb-lg-4 { margin-bottom: $spacer-4; }
+  .ml-lg-4 { margin-left: $spacer-4; }
 }
 
 // Link styles for social icons

diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -1,6 +1,26 @@
 
 // Font family
-$body-font: "Helvetica Neue", Arial, sans-serif;
+$body-font-family: "Helvetica Neue", Arial, sans-serif;
+$body-font-size: 16px;
+$prose-font-size: 20px;
+
+$h0-mobile: 64px;
+$h0-desktop: 128px;
 
 // Default border color
 $color-border: #ddd !default;
+
+// Container width
+$container-width: 64em;
+
+// Large breakpoint
+$breakpoint-lg: 52em;
+
+// Spacing unit
+$spacer: 8px !default;
+
+// Spacing scale
+$spacer-1: $spacer !default; // 8px
+$spacer-2: ($spacer * 2) !default; // 16px
+$spacer-3: ($spacer * 4) !default; // 32px
+$spacer-4: ($spacer * 8) !default; // 64px