diff --git a/changelog.md b/changelog.md index 192f951..23de528 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,7 @@ +# changelog v6.0.0 (21 septembre 2016) +- suppression de include-media (crée des bugs d'encodage, nécessite un temps d'apprentissage, et n'apporte pas grand chose au final). +- refonte des valeurs des Breakpoints et des classes responsive. + # changelog v5.0.1 (24 mai 2016) - les helpers de largeurs deviennent mobile-first et ne s'activent que sur écran d'une certaine taille. Ex. `.w700p {width: 700px;}` devient `@include media('>640px') {.w700p {width: 700px;}}`. Ainsi il n'est plus nécessaire de les écraser dans la feuille de style responsive. diff --git a/sass/_config/_breakpoints.scss b/sass/_config/_breakpoints.scss new file mode 100644 index 0000000..df2b7f6 --- /dev/null +++ b/sass/_config/_breakpoints.scss @@ -0,0 +1,7 @@ +// Warning : you should use your own values, regardless of the devices +// GOOD : (max-width: $BP) and (min-width: ($BP + 1)) +$tiny: 544px; // or 'em' if you prefer, of course +$small: 768px; +$medium: 1024px; +$large: 1200px; +$extra-large: 1440px; diff --git a/sass/_config/_mixins.scss b/sass/_config/_mixins.scss new file mode 100644 index 0000000..33b4bf7 --- /dev/null +++ b/sass/_config/_mixins.scss @@ -0,0 +1,38 @@ +// Additionnal "utility" breakpoints aliases +// ex. @include respond-to("portrait-up") {...} +@function breakpoint($bp) { + @if $bp == 'mobile' { + @return '(max-width: #{$tiny})'; + } + @else if $bp == 'portrait' { + @return '(min-width: #{$tiny + 1}) and (max-width: #{$small})'; + } + @else if $bp == 'landscape' { + @return '(min-width: #{$small + 1}) and (max-width: #{$medium})'; + } + @else if $bp == 'desktop' { + @return '(min-width: #{$medium + 1})'; + } + @else if $bp == 'portrait-down' { + @return '(max-width: #{$small})'; + } + @else if $bp == 'portrait-up' { + @return '(min-width: #{$tiny + 1})'; + } + @else if $bp == 'landscape-down' { + @return '(max-width: #{$medium})'; + } + @else if $bp == 'landscape-up' { + @return '(min-width: #{$small + 1})'; + } + @else if $bp == 'retina' { + @return '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx)'; + } +} + +@mixin respond-to($value) { + $string: breakpoint($value); + @media screen and #{$string} { + @content; + } +} diff --git a/sass/_config-variables.scss b/sass/_config/_variables.scss similarity index 87% rename from sass/_config-variables.scss rename to sass/_config/_variables.scss index 24a9767..6de9d49 100644 --- a/sass/_config-variables.scss +++ b/sass/_config/_variables.scss @@ -45,21 +45,6 @@ $extra-large-plus-value : 12rem !default; // extra large value for margins / pad $ultra-large-value : 16rem !default; // ultra large value for margins / paddings $ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings -// breakpoints (overrides include-media.scss) (choose unit you prefer) -// doc : http://include-media.com/documentation/ -$breakpoints: ( - tiny-screen : 320px, - tiny-plus-screen : 480px, - small-screen : 640px, - small-plus-screen : 768px, - medium-screen : 960px, - medium-plus-screen: 1024px, - large-screen : 1280px, - large-plus-screen : 1440px, - extra-large-screen: 1600px, - ultra-large-screen: 1920px -); - // grids variables (choose unit you prefer) $grid-gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem $grid-number: 4 !default; // number of equal columns diff --git a/sass/_include-media/_include-media.scss b/sass/_include-media/_include-media.scss deleted file mode 100644 index ddc099b..0000000 --- a/sass/_include-media/_include-media.scss +++ /dev/null @@ -1,568 +0,0 @@ -@charset 'UTF-8'; - -// _ _ _ _ _ -// (_) | | | | | (_) -// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _ -// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` | -// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| | -// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_| -// -// Simple, elegant and maintainable media queries in Sass -// v1.4.3 -// -// http://include-media.com -// -// Authors: Eduardo Boucas (@eduardoboucas) -// Hugo Giraudel (@hugogiraudel) -// -// This project is licensed under the terms of the MIT license - - -//// -/// include-media library public configuration -/// @author Eduardo Boucas -/// @access public -//// - - -/// -/// Creates a list of global breakpoints -/// -/// @example scss - Creates a single breakpoint with the label `phone` -/// $breakpoints: ('phone': 320px); -/// -$breakpoints: ( - 'phone': 320px, - 'tablet': 768px, - 'desktop': 1024px -) !default; - - -/// -/// Creates a list of static expressions or media types -/// -/// @example scss - Creates a single media type (screen) -/// $media-expressions: ('screen': 'screen'); -/// -/// @example scss - Creates a static expression with logical disjunction (OR operator) -/// $media-expressions: ( -/// 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)' -/// ); -/// -$media-expressions: ( - 'screen': 'screen', - 'print': 'print', - 'handheld': 'handheld', - 'landscape': '(orientation: landscape)', - 'portrait': '(orientation: portrait)', - 'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)', - 'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)' -) !default; - - -/// -/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals -/// -/// @example scss - Interval for pixels is defined as `1` by default -/// @include media('>128px') {} -/// -/// /* Generates: */ -/// @media (min-width: 129px) {} -/// -/// @example scss - Interval for ems is defined as `0.01` by default -/// @include media('>20em') {} -/// -/// /* Generates: */ -/// @media (min-width: 20.01em) {} -/// -/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;` -/// @include media('>2.0rem') {} -/// -/// /* Generates: */ -/// @media (min-width: 2.1rem) {} -/// -$unit-intervals: ( - 'px': 1, - 'em': 0.01, - 'rem': 0.1 -) !default; - -/// -/// Defines whether support for media queries is available, useful for creating separate stylesheets -/// for browsers that don't support media queries. -/// -/// @example scss - Disables support for media queries -/// $im-media-support: false; -/// @include media('>=tablet') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* Generates: */ -/// .foo { -/// color: tomato; -/// } -/// -$im-media-support: true !default; - -/// -/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or -/// intercept the breakpoint will be displayed, any others will be ignored. -/// -/// @example scss - This media query will show because it intercepts the static breakpoint -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'desktop'; -/// @include media('>=tablet') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* Generates: */ -/// .foo { -/// color: tomato; -/// } -/// -/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'tablet'; -/// @include media('>=desktop') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* No output */ -/// -$im-no-media-breakpoint: 'desktop' !default; - -/// -/// Selects which media expressions are allowed in an expression for it to be used when media queries -/// are not supported. -/// -/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'desktop'; -/// $im-no-media-expressions: ('screen'); -/// @include media('>=tablet', 'screen') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* Generates: */ -/// .foo { -/// color: tomato; -/// } -/// -/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted -/// $im-media-support: false; -/// $im-no-media-breakpoint: 'desktop'; -/// $im-no-media-expressions: ('screen'); -/// @include media('>=tablet', 'retina2x') { -/// .foo { -/// color: tomato; -/// } -/// } -/// -/// /* No output */ -/// -$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default; - -//// -/// Cross-engine logging engine -/// @author Hugo Giraudel -/// @access private -//// - - -/// -/// Log a message either with `@error` if supported -/// else with `@warn`, using `feature-exists('at-error')` -/// to detect support. -/// -/// @param {String} $message - Message to log -/// -@function log($message) { - @if feature-exists('at-error') { - @error $message; - } @else { - @warn $message; - $_: noop(); - } - - @return $message; -} - - -/// -/// Wrapper mixin for the log function so it can be used with a more friendly -/// API than `@if log('..') {}` or `$_: log('..')`. Basically, use the function -/// within functions because it is not possible to include a mixin in a function -/// and use the mixin everywhere else because it's much more elegant. -/// -/// @param {String} $message - Message to log -/// -@mixin log($message) { - @if log($message) {} -} - - -/// -/// Function with no `@return` called next to `@warn` in Sass 3.3 -/// to trigger a compiling error and stop the process. -/// -@function noop() {} - -/// -/// Determines whether a list of conditions is intercepted by the static breakpoint. -/// -/// @param {Arglist} $conditions - Media query conditions -/// -/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint -/// -@function im-intercepts-static-breakpoint($conditions...) { - $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint); - - @if not $no-media-breakpoint-value { - @if log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {} - } - - @each $condition in $conditions { - @if not map-has-key($media-expressions, $condition) { - $operator: get-expression-operator($condition); - $prefix: get-expression-prefix($operator); - $value: get-expression-value($condition, $operator); - - // scss-lint:disable SpaceAroundOperator - @if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or - ($prefix == 'min' and $value > $no-media-breakpoint-value) { - @return false; - } - } @else if not index($im-no-media-expressions, $condition) { - @return false; - } - } - - @return true; -} - -//// -/// Parsing engine -/// @author Hugo Giraudel -/// @access private -//// - - -/// -/// Get operator of an expression -/// -/// @param {String} $expression - Expression to extract operator from -/// -/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤` -/// -@function get-expression-operator($expression) { - @each $operator in ('>=', '>', '<=', '<', '≥', '≤') { - @if str-index($expression, $operator) { - @return $operator; - } - } - - // It is not possible to include a mixin inside a function, so we have to - // rely on the `log(..)` function rather than the `log(..)` mixin. Because - // functions cannot be called anywhere in Sass, we need to hack the call in - // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with - // Sass 3.3, change this line in `@if log(..) {}` instead. - $_: log('No operator found in `#{$expression}`.'); -} - - -/// -/// Get dimension of an expression, based on a found operator -/// -/// @param {String} $expression - Expression to extract dimension from -/// @param {String} $operator - Operator from `$expression` -/// -/// @return {String} - `width` or `height` (or potentially anything else) -/// -@function get-expression-dimension($expression, $operator) { - $operator-index: str-index($expression, $operator); - $parsed-dimension: str-slice($expression, 0, $operator-index - 1); - $dimension: 'width'; - - @if str-length($parsed-dimension) > 0 { - $dimension: $parsed-dimension; - } - - @return $dimension; -} - - -/// -/// Get dimension prefix based on an operator -/// -/// @param {String} $operator - Operator -/// -/// @return {String} - `min` or `max` -/// -@function get-expression-prefix($operator) { - @return if(index(('<', '<=', '≤'), $operator), 'max', 'min'); -} - - -/// -/// Get value of an expression, based on a found operator -/// -/// @param {String} $expression - Expression to extract value from -/// @param {String} $operator - Operator from `$expression` -/// -/// @return {Number} - A numeric value -/// -@function get-expression-value($expression, $operator) { - $operator-index: str-index($expression, $operator); - $value: str-slice($expression, $operator-index + str-length($operator)); - - @if map-has-key($breakpoints, $value) { - $value: map-get($breakpoints, $value); - } @else { - $value: to-number($value); - } - - $interval: map-get($unit-intervals, unit($value)); - - @if not $interval { - // It is not possible to include a mixin inside a function, so we have to - // rely on the `log(..)` function rather than the `log(..)` mixin. Because - // functions cannot be called anywhere in Sass, we need to hack the call in - // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with - // Sass 3.3, change this line in `@if log(..) {}` instead. - $_: log('Unknown unit `#{unit($value)}`.'); - } - - @if $operator == '>' { - $value: $value + $interval; - } @else if $operator == '<' { - $value: $value - $interval; - } - - @return $value; -} - - -/// -/// Parse an expression to return a valid media-query expression -/// -/// @param {String} $expression - Expression to parse -/// -/// @return {String} - Valid media query -/// -@function parse-expression($expression) { - // If it is part of $media-expressions, it has no operator - // then there is no need to go any further, just return the value - @if map-has-key($media-expressions, $expression) { - @return map-get($media-expressions, $expression); - } - - $operator: get-expression-operator($expression); - $dimension: get-expression-dimension($expression, $operator); - $prefix: get-expression-prefix($operator); - $value: get-expression-value($expression, $operator); - - @return '(#{$prefix}-#{$dimension}: #{$value})'; -} - -/// -/// Slice `$list` between `$start` and `$end` indexes -/// -/// @access private -/// -/// @param {List} $list - List to slice -/// @param {Number} $start [1] - Start index -/// @param {Number} $end [length($list)] - End index -/// -/// @return {List} Sliced list -/// -@function slice($list, $start: 1, $end: length($list)) { - @if length($list) < 1 or $start > $end { - @return (); - } - - $result: (); - - @for $i from $start through $end { - $result: append($result, nth($list, $i)); - } - - @return $result; -} - -//// -/// String to number converter -/// @author Hugo Giraudel -/// @access private -//// - - -/// -/// Casts a string into a number -/// -/// @param {String | Number} $value - Value to be parsed -/// -/// @return {Number} -/// -@function to-number($value) { - @if type-of($value) == 'number' { - @return $value; - } @else if type-of($value) != 'string' { - $_: log('Value for `to-number` should be a number or a string.'); - } - - $first-character: str-slice($value, 1, 1); - $result: 0; - $digits: 0; - $minus: ($first-character == '-'); - $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); - - // Remove +/- sign if present at first character - @if ($first-character == '+' or $first-character == '-') { - $value: str-slice($value, 2); - } - - @for $i from 1 through str-length($value) { - $character: str-slice($value, $i, $i); - - @if not (index(map-keys($numbers), $character) or $character == '.') { - @return to-length(if($minus, -$result, $result), str-slice($value, $i)) - } - - @if $character == '.' { - $digits: 1; - } @else if $digits == 0 { - $result: $result * 10 + map-get($numbers, $character); - } @else { - $digits: $digits * 10; - $result: $result + map-get($numbers, $character) / $digits; - } - } - - @return if($minus, -$result, $result); -} - - -/// -/// Add `$unit` to `$value` -/// -/// @param {Number} $value - Value to add unit to -/// @param {String} $unit - String representation of the unit -/// -/// @return {Number} - `$value` expressed in `$unit` -/// -@function to-length($value, $unit) { - $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); - - @if not index(map-keys($units), $unit) { - $_: log('Invalid unit `#{$unit}`.'); - } - - @return $value * map-get($units, $unit); -} - -/// -/// This mixin aims at redefining the configuration just for the scope of -/// the call. It is helpful when having a component needing an extended -/// configuration such as custom breakpoints (referred to as tweakpoints) -/// for instance. -/// -/// @author Hugo Giraudel -/// -/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints` -/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression` -/// -/// @example scss - Extend the global breakpoints with a tweakpoint -/// @include media-context(('custom': 678px)) { -/// .foo { -/// @include media('>phone', '<=custom') { -/// // ... -/// } -/// } -/// } -/// -/// @example scss - Extend the global media expressions with a custom one -/// @include media-context($tweak-media-expressions: ('all': 'all')) { -/// .foo { -/// @include media('all', '>phone') { -/// // ... -/// } -/// } -/// } -/// -/// @example scss - Extend both configuration maps -/// @include media-context(('custom': 678px), ('all': 'all')) { -/// .foo { -/// @include media('all', '>phone', '<=custom') { -/// // ... -/// } -/// } -/// } -/// -@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) { - // Save global configuration - $global-breakpoints: $breakpoints; - $global-media-expressions: $media-expressions; - - // Update global configuration - $breakpoints: map-merge($breakpoints, $tweakpoints) !global; - $media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global; - - @content; - - // Restore global configuration - $breakpoints: $global-breakpoints !global; - $media-expressions: $global-media-expressions !global; -} - -//// -/// include-media public exposed API -/// @author Eduardo Boucas -/// @access public -//// - - -/// -/// Generates a media query based on a list of conditions -/// -/// @param {Arglist} $conditions - Media query conditions -/// -/// @example scss - With a single set breakpoint -/// @include media('>phone') { } -/// -/// @example scss - With two set breakpoints -/// @include media('>phone', '<=tablet') { } -/// -/// @example scss - With custom values -/// @include media('>=358px', '<850px') { } -/// -/// @example scss - With set breakpoints with custom values -/// @include media('>desktop', '<=1350px') { } -/// -/// @example scss - With a static expression -/// @include media('retina2x') { } -/// -/// @example scss - Mixing everything -/// @include media('>=350px', ' 0) { - @media #{unquote(parse-expression(nth($conditions, 1)))} { - // Recursive call - @include media(slice($conditions, 2)...) { - @content; - } - } - } -} diff --git a/sass/_library-misc.scss b/sass/_library-misc.scss index 676082a..1cd62df 100644 --- a/sass/_library-misc.scss +++ b/sass/_library-misc.scss @@ -24,7 +24,7 @@ } // hyphens on tiny screens -@include media('<=tiny-screen') { +@media (max-width: $tiny) { /* you shall not pass */ div, textarea, @@ -40,7 +40,7 @@ } // use .no-wrapping to disallow hyphens on small screens -@include media('<=tiny-screen') { +@media (max-width: $tiny) { .no-wrapping { word-wrap: normal; hyphens: manual; diff --git a/sass/_override-helpers.scss b/sass/_override-helpers.scss index 093cb3c..56b4314 100644 --- a/sass/_override-helpers.scss +++ b/sass/_override-helpers.scss @@ -116,7 +116,7 @@ ul.unstyled { width: 300px; } -@include media('>=400px') { +@media (min-width: 401px) { .#{$kna-namespace}w400p { width: 400px; } @@ -130,7 +130,7 @@ ul.unstyled { } } -@include media('>=700px') { +@media (min-width: 701px) { .#{$kna-namespace}w700p { width: 700px; @@ -141,7 +141,7 @@ ul.unstyled { } } -@include media('>=960px') { +@media (min-width: 961px) { .#{$kna-namespace}w960p { width: 960px; } diff --git a/sass/_override-responsive.scss b/sass/_override-responsive.scss index a8176ec..677655f 100644 --- a/sass/_override-responsive.scss +++ b/sass/_override-responsive.scss @@ -5,7 +5,7 @@ /* large screens */ /* ------------- */ -@include media('>=large-screen') { +@media (min-width: ($large + 1)) { /* layouts for large screens */ .#{$kna-namespace}large-hidden { @@ -77,7 +77,7 @@ /* medium screens */ /* -------------- */ -@include media('>=medium-screen', '=small-screen', '