Add some love to breakpoints (v3)

diff --git a/doc/pages/media-queries.html b/doc/pages/media-queries.html
index 17fe555a1ad38d27c011e8b322459c1015fa28de..1263dd66908b7da93aa7be005befd619716aaf44 100644 (file)
--- 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 8f0a21a62a529e63723edd658a0e3e33a5220155..a63b920dde733d913bd49f44247a48888775d358 100644 (file)
--- 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 79f4e76267c319305d9a82496f8db4faf08215f7..7ea86a164afd35d570f92aad063e65d0b74609f8 100644 (file)
--- 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 e7130b5d6ddcc29eefb4a4de0fe265abd1b0c6ac..b8b597540d2426eb77933d5e0c678f6a14469e88 100644 (file)
--- 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;