From 75a2271b3af9d6062df2150f3f905df2feb7848d Mon Sep 17 00:00:00 2001
From: karland <anders-betrachtet@online.de>
Date: Sat, 25 Apr 2015 15:32:44 +0200
Subject: [PATCH] Add some love to breakpoints (v3)

---
 doc/pages/media-queries.html            | 19 +++++++++++++------
 scss/foundation/_functions.scss         | 25 +++++++++++++++++--------
 scss/foundation/_settings.scss          | 15 ++++++++++-----
 scss/foundation/components/_global.scss | 16 ++++++++++------
 4 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/doc/pages/media-queries.html b/doc/pages/media-queries.html
index 17fe555a1..1263dd669 100644
--- a/doc/pages/media-queries.html
+++ b/doc/pages/media-queries.html
@@ -8,7 +8,7 @@ title: Media Queries
 
 <h3>Basic</h3>
 
-Media queries are built using ems in Foundation.
+Media queries are built using ems in Foundation. At some point in time we will move to rem's, however, at the moment not all browsers like rem's in media queries.
 
 <h4>CSS</h4>
 
@@ -46,12 +46,19 @@ Media queries can be easily customized by changing the variable values in `_sett
 <h4>SCSS</h4>
 
 ```scss
+// Here we define the breakpoints which will become the upper border for each media size.
+// The function em-calc() calculates the em-value from a px-value.
+$small-breakpoint:  em-calc(640)  !default;
+$medium-breakpoint: em-calc(1024) !default;
+$large-breakpoint:  em-calc(1440) !default;
+$xlarge-breakpoint: em-calc(1920) !default;
+
 // Here we define the lower and upper bounds for each media size
-$small-range: (0em, 40em); /* 0, 640px */
-$medium-range: (40.063em, 64em); /* 641px, 1024px */
-$large-range: (64.063em, 90em); /* 1025px, 1440px */
-$xlarge-range: (90.063em, 120em); /* 1441px, 1920px */
-$xxlarge-range: (120.063em); /* 1921px */
+$small-range:   (0, $small-breakpoint) !default; /* 0, 640px */
+$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint) !default; /* 641px, 1024px */
+$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint)  !default; /* 1025px, 1440px */
+$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint) !default; /* 1441px, 1920px */
+$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default; /* 1921px, ... */
 
 // Media Queries
 $screen: "only screen" !default;
diff --git a/scss/foundation/_functions.scss b/scss/foundation/_functions.scss
index 8f0a21a62..a63b920dd 100644
--- a/scss/foundation/_functions.scss
+++ b/scss/foundation/_functions.scss
@@ -134,14 +134,23 @@ $modules: () !default;
   @return $remValues;
 }
 
-// OLD EM CALC
-// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
-@function emCalc($values) {
-  @return rem-calc($values);
-}
 
-// OLD EM CALC
-// Deprecated: We'll drop support for this in 5.1.0, use rem-calc()
 @function em-calc($values) {
-  @return rem-calc($values);
+  $remValues: rem-calc($values);
+
+  $max: length($remValues);
+
+  @if $max == 1 { @return strip-unit(nth($remValues, 1)) * 1em; }
+
+  $emValues: ();
+  @for $i from 1 through $max {
+    $emValues: append($emValues, strip-unit(nth($remValues, $i)) * 1em);
+  }
+  @return $emValues;
+}
+
+
+// Deprecated: OLD EM CALC
+@function emCalc($values) {
+  @return em-calc($values);
 }
diff --git a/scss/foundation/_settings.scss b/scss/foundation/_settings.scss
index 79f4e7626..7ea86a164 100644
--- a/scss/foundation/_settings.scss
+++ b/scss/foundation/_settings.scss
@@ -151,11 +151,16 @@ $include-html-global-classes: $include-html-classes;
 // d. Media Query Ranges
 // - - - - - - - - - - - - - - - - - - - - - - - - -
 
-// $small-range: (0em, 40em);
-// $medium-range: (40.0625em, 64em);
-// $large-range: (64.0625em, 90em);
-// $xlarge-range: (90.0625em, 120em);
-// $xxlarge-range: (120.0625em, 99999999em);
+// $small-breakpoint:  em-calc(640);
+// $medium-breakpoint: em-calc(1024);
+// $large-breakpoint:  em-calc(1440);
+// $xlarge-breakpoint: em-calc(1920);
+
+// $small-range:   (0, $small-breakpoint);
+// $medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint);
+// $large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint);
+// $xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint);
+// $xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999));
 
 // $screen: "only screen";
 
diff --git a/scss/foundation/components/_global.scss b/scss/foundation/components/_global.scss
index e7130b5d6..b8b597540 100644
--- a/scss/foundation/components/_global.scss
+++ b/scss/foundation/components/_global.scss
@@ -297,12 +297,16 @@ $include-html-global-classes: $include-html-classes !default;
 $column-gutter: rem-calc(30) !default;
 
 // Media Query Ranges
-$small-range: (0, 40em) !default;
-$medium-range: (40.0625em, 64em) !default;
-$large-range: (64.0625em, 90em) !default;
-$xlarge-range: (90.0625em, 120em) !default;
-$xxlarge-range: (120.0625em, 99999999em) !default;
-
+$small-breakpoint:  em-calc(640)  !default;
+$medium-breakpoint: em-calc(1024) !default;
+$large-breakpoint:  em-calc(1440) !default;
+$xlarge-breakpoint: em-calc(1920) !default;
+
+$small-range:   (0, $small-breakpoint) !default;
+$medium-range:  ($small-breakpoint  + em-calc(1), $medium-breakpoint) !default;
+$large-range:   ($medium-breakpoint + em-calc(1), $large-breakpoint)  !default;
+$xlarge-range:  ($large-breakpoint  + em-calc(1), $xlarge-breakpoint) !default;
+$xxlarge-range: ($xlarge-breakpoint + em-calc(1), em-calc(99999999)) !default;
 
 $screen: "only screen" !default;
 
-- 
2.47.2