Set base font size for each breakpoint (#295)

* Set base font size for each breakpoint and testing for modular typography * Change default scale value of modular-typography to 1 since that's in the doc
SU-SWS · Feb 21, 2019 · 403d237 · 403d237
1 parent f763252
commit 403d237
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 98 deletions.
diff --git a/core/css/decanter.css b/core/css/decanter.css
diff --git a/core/scss/elements/typography/_typography.scss b/core/scss/elements/typography/_typography.scss
@@ -22,8 +22,8 @@ html {
 }
 
 body {
+  @include modular-typography-base;
   color: $color-black;
-  font-size: $base-font-size;
 }
 
 p {

diff --git a/core/scss/utilities/mixins/modular-scale/_modular-typography-base.scss b/core/scss/utilities/mixins/modular-scale/_modular-typography-base.scss
@@ -0,0 +1,16 @@
+@charset 'UTF-8';
+
+//
+// @modular-typography-base
+//
+// Set base font-size for <body> at each breakpoint to use with modular typography.
+//
+// Style guide: Mixins.Modular.modular-typography-base
+//
+@mixin modular-typography-base($grid: $grid-media) {
+  @each $key, $breakpoint in $grid {
+    @include grid-media($key) {
+      font-size: map-get($modular-typography-base, $key);
+    }
+  }
+}
diff --git a/core/scss/utilities/mixins/modular-scale/_modular-typography.scss b/core/scss/utilities/mixins/modular-scale/_modular-typography.scss
@@ -5,9 +5,11 @@
 //
 // Specify font size using modular-scale, relative to the base font size (which varies by breakpoint).
 //
+// `@include modular-typography(0)` returns the base font size for that breakpoint.
+//
 // **Examples:**
 // - `@include modular-typography(2)`
-// - `@include modular-typography(1.5)`
+// - `@include modular-typography(0)`
 // - `@include modular-typography(-1)`
 //
 // $scale - number (unitless) indicating how many steps to adjust font-size up or down the scale.
@@ -16,26 +18,5 @@
 // Style guide: Mixins.Modular.modular-typography
 //
 @mixin modular-typography($scale: 1) {
-
-  font-size: modular-scale($scale, map-get($modular-typography, 'xs'));
-
-  @include grid-media('sm') {
-    font-size: modular-scale($scale, map-get($modular-typography, 'sm'));
-  }
-
-  @include grid-media('md') {
-    font-size: modular-scale($scale, map-get($modular-typography, 'md'));
-  }
-
-  @include grid-media('lg') {
-    font-size: modular-scale($scale, map-get($modular-typography, 'lg'));
-  }
-
-  @include grid-media('xl') {
-    font-size: modular-scale($scale, map-get($modular-typography, 'xl'));
-  }
-
-  @include grid-media('2xl') {
-    font-size: modular-scale($scale, map-get($modular-typography, '2xl'));
-  }
+  font-size: modular-scale($scale);
 }
diff --git a/core/scss/utilities/mixins/modular-scale/index.scss b/core/scss/utilities/mixins/modular-scale/index.scss
@@ -14,4 +14,5 @@
 
 @import
   'modular-spacing',
+  'modular-typography-base',
   'modular-typography';
diff --git a/core/scss/utilities/variables/core/_modular-typography.scss b/core/scss/utilities/variables/core/_modular-typography.scss
@@ -1,11 +1,20 @@
 @charset "UTF-8";
-
 //
-// $modular-typography
+// Modular Typography
+//
+// A unitless system for setting font sizes. The modular typography scale follows the Bourbon modular-scale mixin formula with a fixed scale ratio between each step.
+// The scale is bi-directional, as font sizes can scale up or down.
+//
+// Note: modular-typography(0) will return the base font size at that breakpoint.
+//
+// Style guide: Variables.Core.ModularTypography
+//
+
+// $modular-typography-base
 //
-// A unitless system for assigning font sizes. These variables are the base font sizes for each break point.
+// The base font sizes for each break point for use with the modular typography system which is based on the Bourbon modular scale.
 //
-// Markup: $modular-typography: (
+// Markup: $modular-typography-base: (
 //   'xs': 1.6rem,
 //   'sm': 1.6rem,
 //   'md': 1.8rem,
@@ -14,9 +23,9 @@
 //   '2xl': 1.9rem
 // ) !default;
 //
-// Styleguide: Variables.Core.modular-typography
+// Styleguide: Variables.Core.ModularTypography.modular-typography-base
 //
-$modular-typography: (
+$modular-typography-base: (
   'xs': 1.6rem,
   'sm': 1.6rem,
   'md': 1.8rem,

diff --git a/core/scss/utilities/variables/core/_typography.scss b/core/scss/utilities/variables/core/_typography.scss
@@ -127,7 +127,6 @@ $h5-font-size: 1.8rem !default;
 //
 $h6-font-size: 1.6rem !default;
 
-
 //
 // $base-line-height
 //
@@ -161,7 +160,6 @@ $heading-line-height: 1.2 !default;
 //
 $lead-line-height: 1.5 !default;
 
-
 //
 // $font-sans
 //

diff --git a/kss/builder/decanter/kss-assets/css/kss.css b/kss/builder/decanter/kss-assets/css/kss.css
-Original file line number
+Diff line change
@@ Expand Up / @@ -22,8 +22,8 @@ html { @@
     }
     body {
+      @include modular-typography-base;
       color: $color-black;
-      font-size: $base-font-size;
     }
     p {
@@ Expand Down @@