Add $base-font-size variable, and util for switching to rems

docs-src/styles/globals.scss

@@ -6,12 +6,16 @@ html,
 body {
 	margin: 0;
 	padding: 0;
-	font-size: 15px;
+}
+
+html {
+    font-size: $base-font-size;
 }
 
 body {
-	font-family: $font-stack;
-	color: rgba(black, 0.87);
+    color: rgba(black, 0.87);
+    font-family: $font-stack;
+    font-size: 15px;
 }
 
 a {
@@ -26,8 +30,8 @@ a {
 }
 
 .keen-docs {
+    display: flex;
+    height: 100%;
+    width: 100%;
     position: relative;
-	display: flex;
-	width: 100%;
-	height: 100%;
 }

src/styles/imports.scss

@@ -1,2 +1,3 @@
 @import 'variables';
 @import 'mixins';
+@import 'util';

src/styles/util.scss

@@ -0,0 +1,65 @@
+// Adapted from Foundation
+// (https://raw.githubusercontent.com/zurb/foundation-sites/develop/scss/util/_unit.scss)
+
+// Removes the unit (e.g. px, em, rem) from a value, returning the number only.
+@function strip-unit($num) {
+    @return $num / ($num * 0 + 1);
+}
+
+// Converts one or more pixel values into matching rem values.
+@function rem-calc($values, $base: null) {
+    $rem-values: ();
+    $count: length($values);
+
+    // If no base is defined, defer to the global font size
+    @if $base == null {
+        $base: $base-font-size;
+    }
+
+    // If the base font size is a %, then multiply it by 16px
+    // This is because 100% font size = 16px in most all browsers
+    @if unit($base) == '%' {
+        $base: ($base / 100%) * 16px;
+    }
+
+    // Using rem as base allows correct scaling
+    @if unit($base) == 'rem' {
+        $base: strip-unit($base) * 16px;
+    }
+
+    @if $count == 1 {
+        @return -zf-to-rem($values, $base);
+    }
+
+    @for $i from 1 through $count {
+        $rem-values: append($rem-values, -zf-to-rem(nth($values, $i), $base));
+    }
+
+    @return $rem-values;
+}
+
+// Converts a pixel value to matching rem value. *Any* value passed, regardless of unit, is assumed to be a pixel value. By default, the base pixel value used to calculate the rem value is taken from the `$base-font-size` variable.
+@function -zf-to-rem($value, $base: null) {
+    // Check if the value is a number
+    @if type-of($value) != 'number' {
+        @warn inspect($value) + ' was passed to rem-calc(), which is not a number.';
+        @return $value;
+    }
+
+    // Transform em into rem if someone hands over 'em's
+    @if unit($value) == 'em' {
+        $value: strip-unit($value) * 1rem;
+    }
+
+    // Calculate rem if units for $value is not rem or em
+    @if unit($value) != 'rem' {
+        $value: strip-unit($value) / strip-unit($base) * 1rem;
+    }
+
+    // Turn 0rem into 0
+    @if $value == 0rem {
+        $value: 0;
+    }
+
+    @return $value;
+}

src/styles/variables.scss

@@ -4,6 +4,9 @@
 // The UI font stack
 $font-stack:  Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 
+// Base font size
+$base-font-size                 : 100% !default; // typically 16px in most browsers
+
 // Brand colors
 $brand-primary-color            : $md-blue !default;
 $brand-accent-color             : $md-purple-a400 !default;