From a20ac8bfc2c38a9ec181aefa644d39ec7f5cac6f Mon Sep 17 00:00:00 2001 From: ArmorDarks Date: Tue, 1 Mar 2016 01:19:54 +0200 Subject: [PATCH] [settings] improved and renamed default breakpoints in `$ekzo-breakpoints`. Default values optimized for mobile-first approach --- CHANGELOG.md | 1 + _settings.responsive.defaults.scss | 21 ++++++++++++--------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 30cf292..63882ff 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,6 +36,7 @@ - `$ekzo-bg` now expects everything normal for `background` property, except color, wich from now injected into `html` directly from `$ekzo-theme(base: ( bg-color: _value_ ) )` - 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] 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/_settings.responsive.defaults.scss b/_settings.responsive.defaults.scss index 9c80669..17ce58b 100644 --- a/_settings.responsive.defaults.scss +++ b/_settings.responsive.defaults.scss @@ -17,18 +17,21 @@ $ekzo-enable-responsive-widths: true !default; // Breakpoints // --------------------------------------- -$ekzo-lap: 481px !default; -$ekzo-desk: 1024px !default; -$ekzo-desk-wide: 1200px !default; +$ekzo-bp-phone: 480px !default; +$ekzo-bp-phone-ls: 600px !default; +$ekzo-bp-tablet: 720px !default; +$ekzo-bp-tablet-ls: 960px !default; +$ekzo-bp-lap: 1280px !default; +$ekzo-bp-desk: 1600px !default; $ekzo-breakpoints: ( breakpoints: ( - palm: 'screen and (max-width: #{$ekzo-lap - 1px})', - lap: 'screen and (min-width: #{$ekzo-lap}) and (max-width: #{$ekzo-desk - 1px})', - lap-and-up: 'screen and (min-width: #{$ekzo-lap})', - portable: 'screen and (max-width: #{$ekzo-desk - 1px})', - desk: 'screen and (min-width: #{$ekzo-desk})', - desk-wide: 'screen and (min-width: #{$ekzo-desk-wide})' + 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)'