[settings][objects][tools][generic] better way for handling of breakp…

…oints, more control: - Added option `$ekzo-enable-responsive-helpers-for-breakpoints` which allows to list breakpoints for which will be automatically generated helper classes - Added mixin `ekzo-each-breakpoint()` for fast inclusion of certain classes for each breakpoint, listed in `$ekzo-enable-responsive-helpers-for-breakpoints` - Added `ekzo-temp()` function and global variable `$ekzo__temp` which allows to pass value from mixins into `@content`. See `ekzo-each-breakpoint()` for example. Hacky. - [BREAKING] `$ekzo-breakpoints` now represented as flat map. Change option `$ekzo-enable-responsive-helpers-for-breakpoints` to disable generation of helper classes for certain breakpoints.
ArmorDarks · Mar 1, 2016 · 474c6bf · 474c6bf · ArmorDarks · Mar 1, 2016
1 parent a20ac8b
commit 474c6bf
Show file tree

Hide file tree

Showing 11 changed files with 88 additions and 61 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,9 @@
   * Add theme-related styling to any class with mixin and function `.foo { @include ekzo-theme() { color: ekzo-theme(text-color); } }`.
   * Switch on and off theming globaly with `$ekzo-enable-theming` option without deleting theme includes from classes
   For details about how it works and how to use head to `ekzo-theme()` mixin description.
+- Added option `$ekzo-enable-responsive-helpers-for-breakpoints` which allows to list breakpoints for which will be automatically generated helper classes
+- Added mixin `ekzo-each-breakpoint()` for fast inclusion of certain classes for each breakpoint, listed in `$ekzo-enable-responsive-helpers-for-breakpoints`
+- Added `ekzo-temp()` function and global variable `$ekzo__temp` which allows to pass value from mixins into `@content`. See `ekzo-each-breakpoint()` for example. Hacky.
 - Added option to set monospace font;
 - Added generic styling for `code`, `pre`, `samp` and `kbd`. Also, added options for their font-sizes and font-families
 - Added options `$ekzo-widths-columns` and `$ekzo-responsive-widths-columns` to control generated widths
@@ -37,6 +40,7 @@
 - Updated `normalize.scss`, dropped some older normalizations. Currently it's based on v3.0.3 (head commit: https://github.com/necolas/normalize.css/commit/f41ef9b4918759dabc35599e014aaf3cfae3d8a1)
 - `reset.scss` is now part of `normalize.scss`
 - [BREAKING] improved and renamed default breakpoints in `$ekzo-breakpoints`. Default values optimized for mobile-first approach.
+- [BREAKING] `$ekzo-breakpoints` now represented as flat map. Change option `$ekzo-enable-responsive-helpers-for-breakpoints` to disable generation of helper classes for certain breakpoints.
 - [BREAKING] replaced `$ekzo-spacing-unit` variable and its variations with `ekzo-spacing()` (`ekzo-spacing(.25)`, `ekzo-spacing(2)`, etc.) function
 - [BREAKING] renamed `ekzo-font()` mixin to `ekzo-font-face()`
 - [BREAKING] Renamed `_framework.scss` to `_index.scss` for better clarity

diff --git a/_ie.scss b/_ie.scss
@@ -94,10 +94,8 @@
 
 @if $ekzo-enable-grid and $ekzo-enable-responsive-grid {
 
-  @each $breakpoint, $value in ekzo-get($ekzo-breakpoints, breakpoints) {
-    @include ekzo-breakpoint($breakpoint) {
-      @include ekzo-grid-types($postfix: '\\@#{$breakpoint}');
-    }
-  }
+  @include ekzo-each-breakpoint() {
+    @include ekzo-grid-types($postfix: ekzo-temp());
+  };
 
 } // endif
diff --git a/_settings.responsive.defaults.scss b/_settings.responsive.defaults.scss
@@ -13,6 +13,10 @@ $ekzo-enable-responsive-spacing: true !default;
 $ekzo-enable-responsive-tables:  true !default;
 $ekzo-enable-responsive-widths:  true !default;
 
+$ekzo-enable-responsive-helpers-for-breakpoints: (
+  phone, phone-ls, tablet, tablet-ls, lap, desk
+) !default;
+
 // ---------------------------------------
 // Breakpoints
 // ---------------------------------------
@@ -25,16 +29,20 @@ $ekzo-bp-lap:       1280px !default;
 $ekzo-bp-desk:      1600px !default;
 
 $ekzo-breakpoints: (
-  breakpoints: (
-    phone:      'screen and (min-width: #{$ekzo-bp-phone})',
-    phone-ls:   'screen and (min-width: #{$ekzo-bp-phone-ls})',
-    tablet:     'screen and (min-width: #{$ekzo-bp-tablet})',
-    tablet-ls:  'screen and (min-width: #{$ekzo-bp-tablet-ls})',
-    lap:        'screen and (min-width: #{$ekzo-bp-lap})'
-    desk:       'screen and (min-width: #{$ekzo-bp-desk})'
-  ),
-  types: (
-    retina:     'screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi)'
-  ),
-  custom: ()
+
+  // ----
+  // Sizes
+
+  phone:      'screen and (min-width: #{$ekzo-bp-phone})',
+  phone-ls:   'screen and (min-width: #{$ekzo-bp-phone-ls})',
+  tablet:     'screen and (min-width: #{$ekzo-bp-tablet})',
+  tablet-ls:  'screen and (min-width: #{$ekzo-bp-tablet-ls})',
+  lap:        'screen and (min-width: #{$ekzo-bp-lap})',
+  desk:       'screen and (min-width: #{$ekzo-bp-desk})',
+
+  // ----
+  // Screens
+
+  retina:     'screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi)'
+
 ) !default;
diff --git a/generic/_tables.scss b/generic/_tables.scss
@@ -85,10 +85,8 @@ table { width: 100%; }
 
 @if $ekzo-enable-tables and $ekzo-enable-responsive-tables {
 
-  @each $breakpoint, $value in ekzo-get($ekzo-breakpoints, breakpoints) {
-    @include ekzo-breakpoint($breakpoint) {
-      @include ekzo-table-spacing($postfix: '\\@#{$breakpoint}');
-    }
-  }
+  @include ekzo-each-breakpoint() {
+    @include ekzo-table-spacing($postfix: ekzo-temp());
+  };
 
 } // endif
diff --git a/helpers/_spacing.scss b/helpers/_spacing.scss
@@ -146,10 +146,8 @@
 
 @if $ekzo-enable-responsive-spacing {
 
-  @each $breakpoint, $value in ekzo-get($ekzo-breakpoints, breakpoints) {
-    @include ekzo-breakpoint($breakpoint) {
-      @include ekzo-spacings($postfix: '\\@#{$breakpoint}');
-    }
-  }
+  @include ekzo-each-breakpoint() {
+    @include ekzo-spacings($postfix: ekzo-temp());
+  };
 
 } // endif
diff --git a/helpers/_widths.scss b/helpers/_widths.scss
@@ -61,12 +61,10 @@
 
 @if $ekzo-enable-widths and $ekzo-enable-responsive-widths {
 
-  @each $breakpoint, $value in ekzo-get($ekzo-breakpoints, breakpoints) {
-    @include ekzo-breakpoint($breakpoint) {
-      @include ekzo-widths($columns: $ekzo-responsive-widths-columns,
-        $prefix: $ekzo-ns + $ekzo-helpers-ns,
-        $postfix: '\\@#{$breakpoint}');
-    }
-  }
+  @include ekzo-each-breakpoint() {
+    @include ekzo-widths($columns: $ekzo-responsive-widths-columns,
+      $prefix: $ekzo-ns + $ekzo-helpers-ns,
+      $postfix: ekzo-temp());
+  };
 
 } // endif
diff --git a/objects/_buttons.scss b/objects/_buttons.scss
@@ -252,11 +252,9 @@ $btn-padding-bottom: ekzo-em(ekzo-spacing(.5));
 
 @if $ekzo-enable-responsive-buttons {
 
-  @each $breakpoint, $value in ekzo-get($ekzo-breakpoints, breakpoints) {
-    @include ekzo-breakpoint($breakpoint) {
-      @include ekzo-buttons-sizes($postfix: '\\@#{$breakpoint}');
-    }
-  }
+  @include ekzo-each-breakpoint() {
+    @include ekzo-buttons-sizes($postfix: ekzo-temp());
+  };
 
 } // endif
 

diff --git a/objects/_grid.scss b/objects/_grid.scss
@@ -158,10 +158,8 @@
 
 @if $ekzo-enable-grid and $ekzo-enable-responsive-grid {
 
-  @each $breakpoint, $value in ekzo-get($ekzo-breakpoints, breakpoints) {
-    @include ekzo-breakpoint($breakpoint) {
-      @include ekzo-grid-types($postfix: '\\@#{$breakpoint}');
-    }
-  }
+  @include ekzo-each-breakpoint() {
+    @include ekzo-grid-types($postfix: ekzo-temp());
+  };
 
 } // endif
diff --git a/tools/_functions.temp.scss b/tools/_functions.temp.scss
@@ -0,0 +1,14 @@
+
+// =======================================
+// ^FUNCTIONS.TEMP
+// =======================================
+
+$ekzo-__temp: null;
+
+// ---------------------------------------
+// Temp
+// ---------------------------------------
+
+@function ekzo-temp($temp-variable: $ekzo-__temp) {
+  @return $temp-variable
+}
diff --git a/tools/_index.scss b/tools/_index.scss
@@ -10,6 +10,7 @@
 @import './functions.maps';
 @import './functions.misc';
 @import './functions.spacing';
+@import './functions.temp';
 @import './functions.themes';
 @import './functions.typography';
 

diff --git a/tools/_mixins.breakpoint.scss b/tools/_mixins.breakpoint.scss
@@ -2,7 +2,10 @@
 // =======================================
 // ^MIXINS.BREAKPOINT
 // =======================================
-//
+
+// ---------------------------------------
+// Breakpoint
+// ---------------------------------------
 // Advanced media query mixin.
 // Accepts Sass map of predefined breakpoints which can be used
 // across whole project.
@@ -17,39 +20,48 @@
 //                                                      ```
 //                                                      lap: '(min-width: #{$lap}) and (max-width: #{$desk - 1px})',
 //                                                      ```
-// @param (string|list|null) $path='breakpoints'      - path to another map inside map (if needed)
 // @param (map)              $map='$ekzo-breakpoints' - map with breakpoints
 //
-// @throws Undefined breakpoint `#{$breakpoint}` in map of breakpoints!
+// @throws '[ekzo-breakpoint]: undefined breakpoint `#{$breakpoint}` at path `#{$path}` in specified map'
 //
 // @example
 //
 //    .component {
-//      @include ekzo-breakpoint(palm, breakpoints){ border: 0px; }
+//      @include ekzo-breakpoint(lap){ border: 0px; }
 //      border: 2px;
 //    }
 //
 
-@mixin ekzo-breakpoint($breakpoint, $path: 'breakpoints', $map: $ekzo-breakpoints) {
-
-  $breakpoint-value: null;
+@mixin ekzo-breakpoint($breakpoint, $map: $ekzo-breakpoints) {
 
-  // assign value from a specified map following specified path
-  @each $key, $value in ekzo-get($map, $path) {
-    @if $key == $breakpoint {
-      $breakpoint-value: $value;
-    }
-  }
+  $query: ekzo-get($map, $breakpoint);
 
   // check wether defined breakpoint exists in requested map
-  @if not $breakpoint-value {
+  @if not $query {
     @error '[ekzo-breakpoint]: undefined breakpoint `#{$breakpoint}` at path `#{$path}` in specified map'
   }
 
   // @Note: Use `only` to hide media query from old browsers
   //        Details: http://stackoverflow.com/questions/8549529/what-is-the-difference-between-screen-and-only-screen-in-media-queries
-  @media only #{$breakpoint-value} {
-    @content;
-  }
+  @media only #{$query} { @content; }
 
+}
+
+// ---------------------------------------
+// Include for each breakpoint
+// ---------------------------------------
+
+@mixin ekzo-each-breakpoint() {
+  @each $breakpoint, $query in $ekzo-breakpoints {
+
+    // check is current breakpoint in lest of available for auto generation of helper classes
+    @if index($ekzo-enable-responsive-helpers-for-breakpoints, $breakpoint) != null {
+      @include ekzo-breakpoint($breakpoint) {
+        $ekzo-__temp: '\\@#{$breakpoint}' !global;
+        @content
+        $ekzo-__temp: null !global;
+      }
+    }
+
+  }
 }