From 474c6bff40f0f33cba6f3972209fa9bdbd20b706 Mon Sep 17 00:00:00 2001 From: ArmorDarks Date: Tue, 1 Mar 2016 02:18:21 +0200 Subject: [PATCH] [settings][objects][tools][generic] better way for handling of breakpoints, 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. --- CHANGELOG.md | 4 +++ _ie.scss | 8 ++---- _settings.responsive.defaults.scss | 32 +++++++++++++-------- generic/_tables.scss | 8 ++---- helpers/_spacing.scss | 8 ++---- helpers/_widths.scss | 12 ++++---- objects/_buttons.scss | 8 ++---- objects/_grid.scss | 8 ++---- tools/_functions.temp.scss | 14 +++++++++ tools/_index.scss | 1 + tools/_mixins.breakpoint.scss | 46 +++++++++++++++++++----------- 11 files changed, 88 insertions(+), 61 deletions(-) create mode 100644 tools/_functions.temp.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index 63882ff..330291c 100644 --- 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 index 5c5f40e..b3e22ec 100644 --- 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 \ No newline at end of file diff --git a/_settings.responsive.defaults.scss b/_settings.responsive.defaults.scss index 17ce58b..866f6fa 100644 --- 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; \ No newline at end of file diff --git a/generic/_tables.scss b/generic/_tables.scss index 278be12..5515266 100644 --- 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 \ No newline at end of file diff --git a/helpers/_spacing.scss b/helpers/_spacing.scss index 8a5ea5b..4c34ec6 100644 --- 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 \ No newline at end of file diff --git a/helpers/_widths.scss b/helpers/_widths.scss index c16cf72..813d79c 100644 --- 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 \ No newline at end of file diff --git a/objects/_buttons.scss b/objects/_buttons.scss index b1be2d8..f5255a9 100644 --- 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 index 7033232..8e73157 100644 --- 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 \ No newline at end of file diff --git a/tools/_functions.temp.scss b/tools/_functions.temp.scss new file mode 100644 index 0000000..63f132e --- /dev/null +++ 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 +} \ No newline at end of file diff --git a/tools/_index.scss b/tools/_index.scss index 807b844..1da7936 100644 --- 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 index 4875ab1..bdc9ac4 100644 --- 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; + } + } + + } } \ No newline at end of file