Merge pull request #9 from sitetent/1.4.x-rems

1.4.x

src/01_settings/_variables.defaults.scss

@@ -60,7 +60,7 @@ $space-xxxl: ($space-base * 9) !default;
 // ==========================================================================
 
 $scale-ratio: 1.250 !default; // Major Third Ratio
-$scale-unit: 10 !default;
+$scale-unit: 16 !default;
 
 
 // ==========================================================================
@@ -120,10 +120,10 @@ $zone-footer:  "mastfoot" !default;
 // ==========================================================================
 
 $container-max-widths: (
-  sm: 540px,
-  md: 720px,
-  lg: 960px,
-  xl: 1140px
+  sm: rem(540px),
+  md: rem(720px),
+  lg: rem(960px),
+  xl: rem(1140px)
 ) !default;
 
 // ==========================================================================
@@ -132,12 +132,12 @@ $container-max-widths: (
 
 $breakpoints: (
     xs: 0, 
-    sm: 576px, 
-    md: 768px, 
-    lg: 992px, 
-    xl: 1200px,
-    xxl: 1400px,
-    xxxl: 1600px
+    sm: em(576px), 
+    md: em(768px), 
+    lg: em(992px), 
+    xl: em(1200px),
+    xxl: em(1400px),
+    xxxl: em(1600px)
 ) !default;
 
 $grid-columns: 12 !default;

src/02_tools/_scaling.scss

@@ -6,8 +6,8 @@
   @return $n / ($n * 0 + 1);
 }
 
-@function rem($value) {
-	$root: $scale-unit;
+@function rem($value, $scale: $scale-unit) {
+	$root: $scale;
 	$val: parseInt($value);
 	$return: ();
 
@@ -20,6 +20,20 @@
 	@return $return;
 }
 
+@function em($value, $scale: $scale-unit) {
+	$root: $scale;
+	$val: parseInt($value);
+	$return: ();
+
+	@if unit($value) == "px" {
+		$return: append($return, ($val / $root + em));
+	} @else {
+		$return: append($return, ($val * $root + px));
+	}
+
+	@return $return;
+}
+
 
 @function line-scale($value) {
 

src/03_generic/_reset.scss

@@ -3,17 +3,14 @@
 // Based on https://github.com/jaydenseric/Fix
 // ==========================================================================
 
-// 1. Reset line height for all browsers.
-// 2. The base font-size is set at 62.5% for having the convenience
-//    of sizing rems in a way that is similar to using px. 1.6rem=16px
-// 3. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
+// 1. See https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
 
 html {
   @include box-sizing(border-box);
-  line-height: 1; // * 1 *
-  font-size: 62.5%; // * 2 *
-  -ms-text-size-adjust: 100%; // * 3 *
-  -webkit-text-size-adjust: 100%; // * 3 *
+  line-height: 1;
+  font-size: 100%;
+  -ms-text-size-adjust: 100%; // * 1 *
+  -webkit-text-size-adjust: 100%; // * 1 *
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

src/04_elements/_base.scss

@@ -7,7 +7,7 @@ body {
 	background-color: $base-color-bg;
 	color: $base-color;
 	font-weight: $base-font-weight;
-	font-size: 1.6em; // currently ems cause chrome bug misinterpreting rems on body element
+	font-size: 1em; // currently ems cause chrome bug misinterpreting rems on body element
 	font-family: $font-family-primary;
 	line-height: $base-line-height;
 }

src/07_utilities/_margin.scss

@@ -24,5 +24,5 @@
         margin-bottom: 0;
     }
 
-    &-null { margin: 0; }
+    &-nulled { margin: 0; }
 }

src/07_utilities/_padding.scss

@@ -24,5 +24,5 @@
         padding-bottom: 0;
     }
 
-    &-null { padding: 0; }
+    &-nulled { padding: 0; }
 }