diff --git a/changelog.md b/changelog.md index 2ae4426..ccd39bd 100644 --- a/changelog.md +++ b/changelog.md @@ -5,6 +5,7 @@ - modularisation des fichiers et dossiers, classés par fonctions (config, vendor, library, objects, utility) - ajout des objects courants : media et autogrid - suppression des positionnements tabulaires. `.row`, `.col` et `.line` n'ont plus lieu d'être depuis Flexbox, peuvent entrer en conflit avec d'autres frameworks et ne font que parasiter KNACSS +- amélioration du fichier Gulpfile.js # 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/css/grillade.css b/css/grillade.css index ce1f13f..2e47047 100644 --- a/css/grillade.css +++ b/css/grillade.css @@ -1 +1 @@ -[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - 2rem - .01px);min-width:0;min-height:0;margin-left:2rem}@media (min-width:321px) and (max-width:640px){[class*=grid-]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.grid-item-double{width:calc(100% * 2 / 2 - 2rem)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.grid-item-double{width:calc(100% * 2 / 4 - 2rem)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.grid-item-double{width:calc(100% * 2 / 5 - 2rem)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.grid-item-double{width:calc(100% * 2 / 6 - 2rem)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.grid-item-double{width:calc(100% * 2 / 7 - 2rem)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.grid-item-double{width:calc(100% * 2 / 8 - 2rem)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9]>.grid-item-double{width:calc(100% * 2 / 9 - 2rem)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.grid-item-double{width:calc(100% * 2 / 10 - 2rem)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11]>.grid-item-double{width:calc(100% * 2 / 11 - 2rem)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.grid-item-double{width:calc(100% * 2 / 12 - 2rem)}}@media (min-width:321px) and (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.grid-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.grid-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){.grid-2-1>:nth-child(odd){width:calc(66.66667% - 2rem)}.grid-1-2>:nth-child(odd),.grid-2-1>:nth-child(even){width:calc(33.33333% - 2rem)}.grid-1-2>:nth-child(even){width:calc(66.66667% - 2rem)}.grid-3-1>:nth-child(odd){width:calc(75% - 2rem)}.grid-1-3>:nth-child(odd),.grid-3-1>:nth-child(even){width:calc(25% - 2rem)}.grid-1-3>:nth-child(even){width:calc(75% - 2rem)}.grid-3-2>:nth-child(odd){width:calc(60% - 2rem)}.grid-2-3>:nth-child(odd),.grid-3-2>:nth-child(even){width:calc(40% - 2rem)}.grid-2-3>:nth-child(even){width:calc(60% - 2rem)}.grid-4-1>:nth-child(odd){width:calc(80% - 2rem)}.grid-1-4>:nth-child(odd),.grid-4-1>:nth-child(even){width:calc(20% - 2rem)}.grid-1-4>:nth-child(even){width:calc(80% - 2rem)}}.pull{margin-right:auto}.push{margin-left:auto} \ No newline at end of file +@media (min-width:545px){[class*=" grid"]>*,[class^=grid]>*{box-sizing:border-box;min-width:0;min-height:0}[class*=" grid"].has-gutter,[class^=grid].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=" grid"].has-gutter>*,[class^=grid].has-gutter>*{margin-right:.5rem;margin-left:.5rem}[class*=" grid"].has-gutter-l,[class^=grid].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=" grid"].has-gutter-l>*,[class^=grid].has-gutter-l>*{margin-right:1rem;margin-left:1rem}[class*=" grid"].has-gutter-xl,[class^=grid].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=" grid"].has-gutter-xl>*,[class^=grid].has-gutter-xl>*{margin-right:2rem;margin-left:2rem}.grid{display:-webkit-box;display:-ms-flexbox;display:flex}.grid>*{-webkit-box-flex:1;-ms-flex:1 1 0;flex:1 1 0}[class*=" grid-"],[class^=grid-]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}[class*=" grid-"]>*,[class^=grid-]>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - .01px)}[class*=" grid-"].has-gutter>*,[class^=grid-].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*=" grid-"].has-gutter-l>*,[class^=grid-].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*=" grid-"].has-gutter-xl>*,[class^=grid-].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}[class*=grid-2]>*{width:calc(100% * 1 / 2 - .01px)}[class*=grid-2].has-gutter>*{width:calc(100% * 1 / 2 - 1rem - .01px)}[class*=grid-2].has-gutter-l>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2].has-gutter-xl>*{width:calc(100% * 1 / 2 - 4rem - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - .01px)}[class*=grid-3].has-gutter>*{width:calc(100% * 1 / 3 - 1rem - .01px)}[class*=grid-3].has-gutter-l>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3].has-gutter-xl>*{width:calc(100% * 1 / 3 - 4rem - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - .01px)}[class*=grid-4].has-gutter>*{width:calc(100% * 1 / 4 - 1rem - .01px)}[class*=grid-4].has-gutter-l>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4].has-gutter-xl>*{width:calc(100% * 1 / 4 - 4rem - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - .01px)}[class*=grid-5].has-gutter>*{width:calc(100% * 1 / 5 - 1rem - .01px)}[class*=grid-5].has-gutter-l>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5].has-gutter-xl>*{width:calc(100% * 1 / 5 - 4rem - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - .01px)}[class*=grid-6].has-gutter>*{width:calc(100% * 1 / 6 - 1rem - .01px)}[class*=grid-6].has-gutter-l>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6].has-gutter-xl>*{width:calc(100% * 1 / 6 - 4rem - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - .01px)}[class*=grid-7].has-gutter>*{width:calc(100% * 1 / 7 - 1rem - .01px)}[class*=grid-7].has-gutter-l>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7].has-gutter-xl>*{width:calc(100% * 1 / 7 - 4rem - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - .01px)}[class*=grid-8].has-gutter>*{width:calc(100% * 1 / 8 - 1rem - .01px)}[class*=grid-8].has-gutter-l>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8].has-gutter-xl>*{width:calc(100% * 1 / 8 - 4rem - .01px)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - .01px)}[class*=grid-9].has-gutter>*{width:calc(100% * 1 / 9 - 1rem - .01px)}[class*=grid-9].has-gutter-l>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9].has-gutter-xl>*{width:calc(100% * 1 / 9 - 4rem - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - .01px)}[class*=grid-10].has-gutter>*{width:calc(100% * 1 / 10 - 1rem - .01px)}[class*=grid-10].has-gutter-l>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10].has-gutter-xl>*{width:calc(100% * 1 / 10 - 4rem - .01px)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - .01px)}[class*=grid-11].has-gutter>*{width:calc(100% * 1 / 11 - 1rem - .01px)}[class*=grid-11].has-gutter-l>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11].has-gutter-xl>*{width:calc(100% * 1 / 11 - 4rem - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - .01px)}[class*=grid-12].has-gutter>*{width:calc(100% * 1 / 12 - 1rem - .01px)}[class*=grid-12].has-gutter-l>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12].has-gutter-xl>*{width:calc(100% * 1 / 12 - 4rem - .01px)}}.push{margin-left:auto}.pull{margin-right:auto}.grid-item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.grid-item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:545px){.full,.one-half{-webkit-box-flex:0}.full{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - .01px)}.has-gutter .full{width:calc(100% - 1rem - .01px)}.has-gutter-l .full{width:calc(100% - 2rem - .01px)}.has-gutter-xl .full{width:calc(100% - 4rem - .01px)}.one-half{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(50% - .01px)}.has-gutter .one-half{width:calc(50% - 1rem - .01px)}.has-gutter-l .one-half{width:calc(50% - 2rem - .01px)}.has-gutter-xl .one-half{width:calc(50% - 4rem - .01px)}.one-third{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 3 - .01px)}.has-gutter .one-third{width:calc(100% / 3 - 1rem - .01px)}.has-gutter-l .one-third{width:calc(100% / 3 - 2rem - .01px)}.has-gutter-xl .one-third{width:calc(100% / 3 - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 4 - .01px)}.has-gutter .one-quarter{width:calc(100% / 4 - 1rem - .01px)}.has-gutter-l .one-quarter{width:calc(100% / 4 - 2rem - .01px)}.has-gutter-xl .one-quarter{width:calc(100% / 4 - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 5 - .01px)}.has-gutter .one-fifth{width:calc(100% / 5 - 1rem - .01px)}.has-gutter-l .one-fifth{width:calc(100% / 5 - 2rem - .01px)}.has-gutter-xl .one-fifth{width:calc(100% / 5 - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 3 * 2 - .01px)}.has-gutter .two-thirds{width:calc(100% / 3 * 2 - 1rem - .01px)}.has-gutter-l .two-thirds{width:calc(100% / 3 * 2 - 2rem - .01px)}.has-gutter-xl .two-thirds{width:calc(100% / 3 * 2 - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 4 * 3 - .01px)}.has-gutter .three-quarters{width:calc(100% / 4 * 3 - 1rem - .01px)}.has-gutter-l .three-quarters{width:calc(100% / 4 * 3 - 2rem - .01px)}.has-gutter-xl .three-quarters{width:calc(100% / 4 * 3 - 4rem - .01px)}}@media (min-width:545px) and (max-width:768px){[class*="-small-4"]>*{width:calc(100% / 4 - .01px)}[class*="-small-4"].has-gutter>*{width:calc(100% / 4 - 1rem - .01px)}[class*="-small-4"].has-gutter-l>*{width:calc(100% / 4 - 2rem - .01px)}[class*="-small-4"].has-gutter-xl>*{width:calc(100% / 4 - 4rem - .01px)}[class*="-small-3"]>*{width:calc(100% / 3 - .01px)}[class*="-small-3"].has-gutter>*{width:calc(100% / 3 - 1rem - .01px)}[class*="-small-3"].has-gutter-l>*{width:calc(100% / 3 - 2rem - .01px)}[class*="-small-3"].has-gutter-xl>*{width:calc(100% / 3 - 4rem - .01px)}[class*="-small-2"]>*{width:calc(100% / 2 - .01px)}[class*="-small-2"].has-gutter>*{width:calc(100% / 2 - 1rem - .01px)}[class*="-small-2"].has-gutter-l>*{width:calc(100% / 2 - 2rem - .01px)}[class*="-small-2"].has-gutter-xl>*{width:calc(100% / 2 - 4rem - .01px)}[class*="-small-1"]>*{width:calc(100% - .01px)}[class*="-small-1"].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*="-small-1"].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*="-small-1"].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}} \ No newline at end of file diff --git a/css/grillade.scss b/css/grillade.scss index 015d4ae..58a5a06 100644 --- a/css/grillade.scss +++ b/css/grillade.scss @@ -1,805 +1,349 @@ -@charset 'UTF-8'; +// Responsive breakpoints variables -// _ _ _ _ _ -// (_) | | | | | (_) -// _ _ __ ___| |_ _ __| | ___ _ __ ___ ___ __| |_ __ _ -// | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` | -// | | | | | (__| | |_| | (_| | __/ | | | | | | __/ (_| | | (_| | -// |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_| -// -// 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 +// Warning : you should use your own values, regardless of the devices +// Best practise : (max-width: $BP) and (min-width: ($BP + 1)) +$tiny: 544px !default; // or 'em' if you prefer, of course +$small: 768px !default; +$medium: 1024px !default; +$large: 1200px !default; +$extra-large: 1440px !default; +/* ---------------------------------- */ +/* ==Grillade : Simple Grid System */ +/* ---------------------------------- */ +/* Doc : http://grillade.knacss.com */ -//// -/// include-media library public configuration -/// @author Eduardo Boucas -/// @access public -//// +// Grids variables +$grid-gutter: 1rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem +$grid-gutter-l: $grid-gutter * 2; +$grid-gutter-xl: $grid-gutter * 4; +/* Grids common rules (for mono- and multi-lines grid) */ +@media (min-width: ($tiny + 1)) { + [class*=" grid"], + [class^="grid"] { + & > * { + box-sizing: border-box; + min-width: 0; /* avoid min-width: auto */ + min-height: 0; /* avoid min-height: auto */ + } -/// -/// 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; + &.has-gutter { + margin-right: -$grid-gutter / 2; + margin-left: -$grid-gutter / 2; - -/// -/// 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; + & > * { + margin-right: $grid-gutter / 2; + margin-left: $grid-gutter / 2; } - } @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; + &.has-gutter-l { + margin-right: -$grid-gutter-l / 2; + margin-left: -$grid-gutter-l / 2; + + & > * { + margin-right: $grid-gutter-l / 2; + margin-left: $grid-gutter-l / 2; + } } - } - @return if($minus, -$result, $result); -} + &.has-gutter-xl { + margin-right: -$grid-gutter-xl / 2; + margin-left: -$grid-gutter-xl / 2; - -/// -/// 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; + & > * { + margin-right: $grid-gutter-xl / 2; + margin-left: $grid-gutter-xl / 2; } } } -} + /* Mono-line grid system (.grid) */ + .grid { + display: flex; -// Config file and project variables - -// font sizes -$base-font-size : 1.4rem !default; // ex. 1.4rem would be "14px" equivalent -$line-height : 1.5 !default; // equiv line-height 1.5 -$h1-size : 3.2rem !default; // equiv "32px" -$h2-size : 2.8rem !default; // equiv "28px" -$h3-size : 2.4rem !default; // equiv "24px" -$h4-size : 2.0rem !default; // equiv "20px" -$h5-size : 1.8rem !default; // equiv "18px" -$h6-size : 1.6rem !default; // equiv "16px" - -// font stacks -$font-stack-common : sans-serif !default; // common font -$font-stack-headings : sans-serif !default; // headings font -$font-stack-monospace : consolas, courier, monospace !default; // monospace font - -// font colors -$base-color : #000 !default; // text color on body and content -$alpha-color : #000 !default; // text color on primary elements -$beta-color : #000 !default; // text color on secondary elements -$headings-color : #000 !default; // text color on headings -$headings-1-color : #000 !default; // text color on headings level 1 -$headings-2-color : #000 !default; // text color on headings level 2 -$headings-3-color : #000 !default; // text color on headings level 3 -$base-color-link : #333 !default; // base links color -$base-color-link-hover : #000 !default; // base hovered/focused links color - -// backgrounds -$base-background : #fff !default; // body background color -$alpha-background : #fff !default; // primary elements background color -$beta-background : #fff !default; // secondary elements background color - -// spacings (choose unit you prefer) -$tiny-value : .5rem !default; // tiny value for margins / paddings -$tiny-plus-value : .7rem !default; // tiny+ value for margins / paddings -$small-value : 1rem !default; // small value for margins / paddings -$small-plus-value : 1.5rem !default; // small+ value for margins / paddings -$medium-value : 2rem !default; // medium value for margins / paddings -$medium-plus-value : 3rem !default; // medium+ value for margins / paddings -$large-value : 4rem !default; // large value for margins / paddings -$large-plus-value : 6rem !default; // large value for margins / paddings -$extra-large-value : 8rem !default; // extra large value for margins / paddings -$extra-large-plus-value : 12rem !default; // extra large value for margins / paddings -$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 -$grid-left: 2 !default; // left side of uneven columns -$grid-right: 1 !default; // right side of uneven columns - -//kna-namespace (default : null) -$kna-namespace: null !default; - -/* ---------------------------------- */ -/* ==Grid Layout (grillade) */ -/* ---------------------------------- */ - -// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html -// Demo : http://codepen.io/raphaelgoetter/pen/ZYjwEB - -// Usage in vanilla CSS: -// -
for an equal fourth columns grid container -// -
for an uneven columns grid container - -// Usage with preprocessors : if you're using Sass, you can config grids variables : -// n = number of columns (default = 4) / g = gutter value (default = 1em) -// example : .grid-perso { @include grid(12, 10px); } -// ... or uneven grids : -// left = left ratio column (default = 2) / right = right ratio column (default = 1) -// example : .grid-perso { @include uneven-grid(2, 1, 10px); } - -/* grid container */ -[class*="#{$kna-namespace}grid-"] { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-left: -$grid-gutter; -} - -/* grid childs */ -[class*="#{$kna-namespace}grid-"] > * { - box-sizing: border-box; - flex: 0 0 auto; - width: calc(100% - #{$grid-gutter} - .01px);// @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; - min-width: 0; - min-height: 0; - margin-left: $grid-gutter; - @include media('>tiny-screen', '<=small-screen') { - & { - width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px); + & > * { + flex: 1 1 0; } - &.grid-item-double { + } + /* Multi-line grid system (.grid-X) */ + [class*=" grid-"], + [class^="grid-"] { + display: flex; + flex-direction: row; + flex-wrap: wrap; + + & > * { + flex: 0 0 auto; + width: calc(100% - .01px); /* @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; */ + } + + &.has-gutter > * { width: calc(100% - #{$grid-gutter} - .01px); } - } -} -// Sass mixins for *equal* columns grid container -// example : .grid-perso { @include grid(12); } -@mixin grid($grid-number:$grid-number,$newgutter:$grid-gutter) { - @if $newgutter != $grid-gutter { - margin-left: -$newgutter; - } - & > * { - width: calc(100% * 1 / #{$grid-number} - #{$newgutter} - .01px); - @if $newgutter != $grid-gutter { - margin-left: $newgutter; + &.has-gutter-l > * { + width: calc(100% - #{$grid-gutter-l} - .01px); } - } - & > .#{$kna-namespace}grid-item-double { - width: calc(100% * 2 / #{$grid-number} - #{$newgutter}); - } -} -// Examples : will be compiled in CSS -@include media('>small-screen') { - @for $i from 2 through 12 { - [class*="#{$kna-namespace}grid-#{$i}"] { - @include grid(#{$i}); + &.has-gutter-xl > * { + width: calc(100% - #{$grid-gutter-xl} - .01px); } } } - -/* Responsive grid */ -// example : .grid-4-small-2 will be 1 column (tiny) then 2 columns (small) then 4 columns -@include media('>tiny-screen', '<=small-screen') { - [class*="-small-4"] > * { - width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px); - } - [class*="-small-4"] > .grid-item-double { - width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px); - } - [class*="-small-3"] > * { - width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px); - } - [class*="-small-3"] > .grid-item-double { - width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px); - } - [class*="-small-2"] > * { - width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px); - } - [class*="-small-2"] > .grid-item-double { - width: calc(100% - #{$grid-gutter} - .01px); - } - [class*="-small-1"] > * { - width: calc(100% - #{$grid-gutter} - .01px); - } - [class*="-small-1"] > .grid-item-double { - width: calc(100% - #{$grid-gutter} - .01px); - } -} - - -// Sass mixins for *unequal* columns grid container -// example : .grid-perso { @include uneven-grid(2, 1); } -@mixin uneven-grid($grid-left:$grid-left, $grid-right:$grid-right, $newgutter:$grid-gutter) { - @if $newgutter != $grid-gutter { - margin-left: -$newgutter; - } - > * { - @if $newgutter != $grid-gutter { - margin-left: $newgutter; - width: calc(100% - #{$newgutter}); - } - } - @include media('>small-screen') { - & > :nth-child(odd) { - $size: ($grid-left / ($grid-left + $grid-right)) * 100%; - width: calc(#{$size} - #{$newgutter}); - } - & > :nth-child(even) { - $size: ($grid-right / ($grid-left + $grid-right)) * 100%; - width: calc(#{$size} - #{$newgutter}); - } - } -} - - -// Examples : will be compiled in CSS - -.#{$kna-namespace}grid-2-1 { - @include uneven-grid(2,1); -} - -.#{$kna-namespace}grid-1-2 { - @include uneven-grid(1,2); -} - -.#{$kna-namespace}grid-3-1 { - @include uneven-grid(3,1); -} - -.#{$kna-namespace}grid-1-3 { - @include uneven-grid(1,3); -} - -.#{$kna-namespace}grid-3-2 { - @include uneven-grid(3,2); -} - -.#{$kna-namespace}grid-2-3 { - @include uneven-grid(2,3); -} - -.#{$kna-namespace}grid-4-1 { - @include uneven-grid(4,1); -} - -.#{$kna-namespace}grid-1-4 { - @include uneven-grid(1,4); -} - -.#{$kna-namespace}pull { - margin-right: auto; -} -.#{$kna-namespace}push { +/* Grid offsets */ +.push { margin-left: auto; } + +.pull { + margin-right: auto; +} +/* Grid order */ +.grid-item-first { + order: -1; +} + +.grid-item-last { + order: 1; +} + +[class*="--reverse"] { + flex-direction: row-reverse; +} +// Sass mixin for Multi-line grid system +// example : .grid-perso { @include grid(12, 3rem); } +@mixin grid($grid-number:4, $new-gutter:$grid-gutter) { + & > * { + width: calc(100% * 1 / #{$grid-number} - .01px); + } + + &.has-gutter > * { + width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter} - .01px); + } + + &.has-gutter-l > * { + width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-l} - .01px); + } + + &.has-gutter-xl > * { + width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-xl} - .01px); + } + @if ($new-gutter != 0) { + @if ($new-gutter != $grid-gutter){ + margin-right: -$new-gutter / 2; + margin-left: -$new-gutter / 2; + + & > * { + margin-right: $new-gutter / 2; + margin-left: $new-gutter / 2; + width: calc(100% * 1 / #{$grid-number} - #{$new-gutter} - .01px); + } + } + } +} +// Constructing grids : will be compiled in CSS +@media (min-width: ($tiny + 1)) { + @for $i from 2 through 12{ + [class*="grid-#{$i}"] { + @include grid(#{$i},0); + } + } +} +/* Sizing individual children */ +@media (min-width: ($tiny + 1)) { + .full { + flex: 0 0 auto; + width: calc(100% - .01px); + + .has-gutter & { + width: calc(100% - #{$grid-gutter} - .01px); + } + + .has-gutter-l & { + width: calc(100% - #{$grid-gutter-l} - .01px); + } + + .has-gutter-xl & { + width: calc(100% - #{$grid-gutter-xl} - .01px); + } + } + + .one-half { + flex: 0 0 auto; + width: calc(50% - .01px); + + .has-gutter & { + width: calc(50% - #{$grid-gutter} - .01px); + } + + .has-gutter-l & { + width: calc(50% - #{$grid-gutter-l} - .01px); + } + + .has-gutter-xl & { + width: calc(50% - #{$grid-gutter-xl} - .01px); + } + } + + .one-third { + flex: 0 0 auto; + width: calc(100% / 3 - .01px); + + .has-gutter & { + width: calc(100% / 3 - #{$grid-gutter} - .01px); + } + + .has-gutter-l & { + width: calc(100% / 3 - #{$grid-gutter-l} - .01px); + } + + .has-gutter-xl & { + width: calc(100% / 3 - #{$grid-gutter-xl} - .01px); + } + } + + .one-quarter { + flex: 0 0 auto; + width: calc(100% / 4 - .01px); + + .has-gutter & { + width: calc(100% / 4 - #{$grid-gutter} - .01px); + } + + .has-gutter-l & { + width: calc(100% / 4 - #{$grid-gutter-l} - .01px); + } + + .has-gutter-xl & { + width: calc(100% / 4 - #{$grid-gutter-xl} - .01px); + } + } + + .one-fifth { + flex: 0 0 auto; + width: calc(100% / 5 - .01px); + + .has-gutter & { + width: calc(100% / 5 - #{$grid-gutter} - .01px); + } + + .has-gutter-l & { + width: calc(100% / 5 - #{$grid-gutter-l} - .01px); + } + + .has-gutter-xl & { + width: calc(100% / 5 - #{$grid-gutter-xl} - .01px); + } + } + + .two-thirds { + flex: 0 0 auto; + width: calc(100% / 3 * 2 - .01px); + + .has-gutter & { + width: calc(100% / 3 * 2 - #{$grid-gutter} - .01px); + } + + .has-gutter-l & { + width: calc(100% / 3 * 2 - #{$grid-gutter-l} - .01px); + } + + .has-gutter-xl & { + width: calc(100% / 3 * 2 - #{$grid-gutter-xl} - .01px); + } + } + + .three-quarters { + flex: 0 0 auto; + width: calc(100% / 4 * 3 - .01px); + + .has-gutter & { + width: calc(100% / 4 * 3 - #{$grid-gutter} - .01px); + } + + .has-gutter-l & { + width: calc(100% / 4 * 3 - #{$grid-gutter-l} - .01px); + } + + .has-gutter-xl & { + width: calc(100% / 4 * 3 - #{$grid-gutter-xl} - .01px); + } + } +} +/* Responsive Small Breakpoint */ +// -small-X suffix means "X columns on small screen" +// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until small) then 4 columns +@media (min-width: ($tiny + 1)) and (max-width: $small) { + [class*="-small-4"] { + & > * { + width: calc(100% / 4 - .01px); + } + + &.has-gutter > * { + width: calc(100% / 4 - #{$grid-gutter} - .01px); + } + + &.has-gutter-l > * { + width: calc(100% / 4 - #{$grid-gutter-l} - .01px); + } + + &.has-gutter-xl > * { + width: calc(100% / 4 - #{$grid-gutter-xl} - .01px); + } + } + + [class*="-small-3"] { + & > * { + width: calc(100% / 3 - .01px); + } + + &.has-gutter > * { + width: calc(100% / 3 - #{$grid-gutter} - .01px); + } + + &.has-gutter-l > * { + width: calc(100% / 3 - #{$grid-gutter-l} - .01px); + } + + &.has-gutter-xl > * { + width: calc(100% / 3 - #{$grid-gutter-xl} - .01px); + } + } + + [class*="-small-2"] { + & > * { + width: calc(100% / 2 - .01px); + } + + &.has-gutter > * { + width: calc(100% / 2 - #{$grid-gutter} - .01px); + } + + &.has-gutter-l > * { + width: calc(100% / 2 - #{$grid-gutter-l} - .01px); + } + + &.has-gutter-xl > * { + width: calc(100% / 2 - #{$grid-gutter-xl} - .01px); + } + } + + [class*="-small-1"] { + & > * { + width: calc(100% - .01px); + } + + &.has-gutter > * { + width: calc(100% - #{$grid-gutter} - .01px); + } + + &.has-gutter-l > * { + width: calc(100% - #{$grid-gutter-l} - .01px); + } + + &.has-gutter-xl > * { + width: calc(100% - #{$grid-gutter-xl} - .01px); + } + } +} diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css index dbec28c..d0a73be 100644 --- a/css/knacss-unminified.css +++ b/css/knacss-unminified.css @@ -1,6 +1,6 @@ @charset "UTF-8"; /*! -* www.KNACSS.com V5.0.1 (24 mai 2016) @author: Alsacreations, Raphael Goetter +* www.KNACSS.com V6.0.0 (21 septembre 2016) @author: Alsacreations, Raphael Goetter * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ @@ -11,13 +11,15 @@ /* 3- Print (print quick reset) */ /* 4- Stylings (minor stylings) */ /* 5- Misc (skip links, hyphens) */ -/* (6- WordPress reset (disabled by default)) */ -/* 7- Global Layout (alignment, modules, positionning) */ -/* 8- Grid Layout (grillade) */ -/* 9- Tables (data tables consistency) */ -/* 10- Forms (forms consistency) */ +/* 6- Tables (data tables consistency) */ +/* 7- Forms (forms consistency) */ +/* 8- Media object */ +/* 9- Autogrid object */ +/* 10- Global Layout (alignment, modules, positionning) */ /* 11- Helpers (width and spacers helpers) */ -/* 12- Responsive (Responsive Web Design helpers) */ +/* (12- WordPress reset (disabled by default)) */ +/* 13- Responsive (Responsive Web Design helpers) */ +/* 14- Grid Layout (grillade) */ /* ---------------------------------- */ /* ==Normalize (basic reset) */ /* ---------------------------------- */ @@ -738,7 +740,7 @@ th { overflow: visible; clip: auto; } -@media (max-width: 320px) { +@media (max-width: 544px) { /* you shall not pass */ div, textarea, @@ -750,312 +752,16 @@ th { samp { word-wrap: break-word; -webkit-hyphens: auto; - -moz-hyphens: auto; -ms-hyphens: auto; hyphens: auto; } } -@media (max-width: 320px) { +@media (max-width: 544px) { .no-wrapping { word-wrap: normal; -webkit-hyphens: manual; - -moz-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } } -/* ----------------------------- */ -/* ==Global Layout */ -/* ----------------------------- */ -/* module, gains superpower "BFC" Block Formating Context */ -.mod, -.bfc { - overflow: hidden; } - -/* blocks that needs to be placed under floats */ -.clear, -.line, -.row { - clear: both; } - -/* blocks that must contain floats */ -.clearfix::after, -.line::after { - content: ""; - display: table; - clear: both; - border-collapse: collapse; } - -/* simple blocks alignment */ -.left { - margin-right: auto; } - -.right { - margin-left: auto; } - -.center { - margin-left: auto; - margin-right: auto; } - -/* text and contents alignment */ -.txtleft { - text-align: left; } - -.txtright { - text-align: right; } - -.txtcenter { - text-align: center; } - -/* floating elements */ -.fl { - float: left; } - -img.fl { - margin-right: 1rem; } - -.fr { - float: right; } - -img.fr { - margin-left: 1rem; } - -img.fl, -img.fr { - margin-bottom: 0.5rem; } - -/* table layout */ -.row { - display: table; - table-layout: fixed; - width: 100%; } - -.row > *, -.col { - display: table-cell; - vertical-align: top; } - -/* no table-cell for script tag when body is a .row */ -body > script { - display: none !important; } - -/* inline-block */ -.inbl { - display: inline-block; - vertical-align: top; } - -/* flexbox layout -http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html -*/ -[class*="flex-container"] { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; } - -.flex-container-h { - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; } - -.flex-container-v { - -webkit-box-orient: vertical; - -webkit-box-direction: normal; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; } - -.flex-item-fluid { - -webkit-box-flex: 1; - -webkit-flex: 1; - -ms-flex: 1; - flex: 1; - min-width: 0; } - -.flex-item-first, -.grid-item-first { - -webkit-box-ordinal-group: 0; - -webkit-order: -1; - -ms-flex-order: -1; - order: -1; } - -.flex-item-medium, -.grid-item-medium { - -webkit-box-ordinal-group: 1; - -webkit-order: 0; - -ms-flex-order: 0; - order: 0; } - -.flex-item-last, -.grid-item-last { - -webkit-box-ordinal-group: 2; - -webkit-order: 1; - -ms-flex-order: 1; - order: 1; } - -.flex-item-center, -.grid-item-center { - margin: auto; } - -/* ---------------------------------- */ -/* ==Grid Layout (grillade) */ -/* ---------------------------------- */ -/* grid container */ -[class*="grid-"] { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-orient: horizontal; - -webkit-box-direction: normal; - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - -webkit-flex-wrap: wrap; - -ms-flex-wrap: wrap; - flex-wrap: wrap; - margin-left: -2rem; } - -/* grid childs */ -[class*="grid-"] > * { - box-sizing: border-box; - -webkit-box-flex: 0; - -webkit-flex: 0 0 auto; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% - 2rem - .01px); - min-width: 0; - min-height: 0; - margin-left: 2rem; } - -@media (min-width: 321px) and (max-width: 640px) { - [class*="grid-"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); } - [class*="grid-"] > *.grid-item-double { - width: calc(100% - 2rem - .01px); } } - -@media (min-width: 641px) { - [class*="grid-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); } - [class*="grid-2"] > .grid-item-double { - width: calc(100% * 2 / 2 - 2rem); } - [class*="grid-3"] > * { - width: calc(100% * 1 / 3 - 2rem - .01px); } - [class*="grid-3"] > .grid-item-double { - width: calc(100% * 2 / 3 - 2rem); } - [class*="grid-4"] > * { - width: calc(100% * 1 / 4 - 2rem - .01px); } - [class*="grid-4"] > .grid-item-double { - width: calc(100% * 2 / 4 - 2rem); } - [class*="grid-5"] > * { - width: calc(100% * 1 / 5 - 2rem - .01px); } - [class*="grid-5"] > .grid-item-double { - width: calc(100% * 2 / 5 - 2rem); } - [class*="grid-6"] > * { - width: calc(100% * 1 / 6 - 2rem - .01px); } - [class*="grid-6"] > .grid-item-double { - width: calc(100% * 2 / 6 - 2rem); } - [class*="grid-7"] > * { - width: calc(100% * 1 / 7 - 2rem - .01px); } - [class*="grid-7"] > .grid-item-double { - width: calc(100% * 2 / 7 - 2rem); } - [class*="grid-8"] > * { - width: calc(100% * 1 / 8 - 2rem - .01px); } - [class*="grid-8"] > .grid-item-double { - width: calc(100% * 2 / 8 - 2rem); } - [class*="grid-9"] > * { - width: calc(100% * 1 / 9 - 2rem - .01px); } - [class*="grid-9"] > .grid-item-double { - width: calc(100% * 2 / 9 - 2rem); } - [class*="grid-10"] > * { - width: calc(100% * 1 / 10 - 2rem - .01px); } - [class*="grid-10"] > .grid-item-double { - width: calc(100% * 2 / 10 - 2rem); } - [class*="grid-11"] > * { - width: calc(100% * 1 / 11 - 2rem - .01px); } - [class*="grid-11"] > .grid-item-double { - width: calc(100% * 2 / 11 - 2rem); } - [class*="grid-12"] > * { - width: calc(100% * 1 / 12 - 2rem - .01px); } - [class*="grid-12"] > .grid-item-double { - width: calc(100% * 2 / 12 - 2rem); } } - -/* Responsive grid */ -@media (min-width: 321px) and (max-width: 640px) { - [class*="-small-4"] > * { - width: calc(100% * 1 / 4 - 2rem - .01px); } - [class*="-small-4"] > .grid-item-double { - width: calc(100% * 1 / 2 - 2rem - .01px); } - [class*="-small-3"] > * { - width: calc(100% * 1 / 3 - 2rem - .01px); } - [class*="-small-3"] > .grid-item-double { - width: calc(100% * 2 / 3 - 2rem - .01px); } - [class*="-small-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); } - [class*="-small-2"] > .grid-item-double { - width: calc(100% - 2rem - .01px); } - [class*="-small-1"] > * { - width: calc(100% - 2rem - .01px); } - [class*="-small-1"] > .grid-item-double { - width: calc(100% - 2rem - .01px); } } - -@media (min-width: 641px) { - .grid-2-1 > :nth-child(odd) { - width: calc(66.66667% - 2rem); } - .grid-2-1 > :nth-child(even) { - width: calc(33.33333% - 2rem); } } - -@media (min-width: 641px) { - .grid-1-2 > :nth-child(odd) { - width: calc(33.33333% - 2rem); } - .grid-1-2 > :nth-child(even) { - width: calc(66.66667% - 2rem); } } - -@media (min-width: 641px) { - .grid-3-1 > :nth-child(odd) { - width: calc(75% - 2rem); } - .grid-3-1 > :nth-child(even) { - width: calc(25% - 2rem); } } - -@media (min-width: 641px) { - .grid-1-3 > :nth-child(odd) { - width: calc(25% - 2rem); } - .grid-1-3 > :nth-child(even) { - width: calc(75% - 2rem); } } - -@media (min-width: 641px) { - .grid-3-2 > :nth-child(odd) { - width: calc(60% - 2rem); } - .grid-3-2 > :nth-child(even) { - width: calc(40% - 2rem); } } - -@media (min-width: 641px) { - .grid-2-3 > :nth-child(odd) { - width: calc(40% - 2rem); } - .grid-2-3 > :nth-child(even) { - width: calc(60% - 2rem); } } - -@media (min-width: 641px) { - .grid-4-1 > :nth-child(odd) { - width: calc(80% - 2rem); } - .grid-4-1 > :nth-child(even) { - width: calc(20% - 2rem); } } - -@media (min-width: 641px) { - .grid-1-4 > :nth-child(odd) { - width: calc(20% - 2rem); } - .grid-1-4 > :nth-child(even) { - width: calc(80% - 2rem); } } - -.pull { - margin-right: auto; } - -.push { - margin-left: auto; } - /* ----------------------------- */ /* ==Tables */ /* ----------------------------- */ @@ -1175,6 +881,171 @@ input[type="reset"].unstyled { box-shadow: none; outline: none; } +/* Media object */ +@media (min-width: 545px) { + .o-media { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: start; + -ms-flex-align: start; + align-items: flex-start; } + .o-media-content { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 0; + /* avoid min-width:auto */ } } + +/* Media variants */ +@media (min-width: 545px) { + .o-media--reverse { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + .o-media-figure--center { + -ms-flex-item-align: center; + align-self: center; } } + +/* Autogrid object */ +@media (min-width: 545px) { + [class^="autogrid"], + [class*=" autogrid"] { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + [class^="autogrid"] > *, + [class*=" autogrid"] > * { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 0; + /* avoid min-width:auto */ } } + +/* Autogrid variants */ +@media (min-width: 545px) { + .has-gutter > *:not(:first-child) { + margin-left: 1rem; } + [class*="--reverse"] { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } } + +/* ----------------------------- */ +/* ==Global Layout */ +/* ----------------------------- */ +/* module, gains superpower "BFC" Block Formating Context */ +.mod, +.bfc { + overflow: hidden; } + +/* blocks that needs to be placed under floats */ +.clear { + clear: both; } + +/* blocks that must contain floats */ +.clearfix::after { + content: ""; + display: table; + clear: both; + border-collapse: collapse; } + +/* simple blocks alignment */ +.left { + margin-right: auto; } + +.right { + margin-left: auto; } + +.center { + margin-left: auto; + margin-right: auto; } + +/* text and contents alignment */ +.txtleft { + text-align: left; } + +.txtright { + text-align: right; } + +.txtcenter { + text-align: center; } + +/* floating elements */ +.fl { + float: left; } + +img.fl { + margin-right: 1rem; } + +.fr { + float: right; } + +img.fr { + margin-left: 1rem; } + +img.fl, +img.fr { + margin-bottom: 0.5rem; } + +/* inline-block */ +.inbl { + display: inline-block; + vertical-align: top; } + +/* flexbox layout +http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html +*/ +[class*="flex-container"], +.flex-container { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + +.flex-container-h { + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; } + +.flex-container-v { + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; } + +.flex-item-fluid { + -webkit-box-flex: 1; + -ms-flex: 1; + flex: 1; + min-width: 0; } + +.flex-item-first, +.grid-item-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; } + +.flex-item-medium, +.grid-item-medium { + -webkit-box-ordinal-group: 1; + -ms-flex-order: 0; + order: 0; } + +.flex-item-last, +.grid-item-last { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; } + +.flex-item-center, +.grid-item-center { + margin: auto; } + /* ---------------------------------- */ /* ==Helpers */ /* ---------------------------------- */ @@ -1268,7 +1139,7 @@ ul.unstyled { .w300p { width: 300px; } -@media (min-width: 400px) { +@media (min-width: 401px) { .w400p { width: 400px; } .w500p { @@ -1276,13 +1147,13 @@ ul.unstyled { .w600p { width: 600px; } } -@media (min-width: 700px) { +@media (min-width: 701px) { .w700p { width: 700px; } .w800p { width: 800px; } } -@media (min-width: 960px) { +@media (min-width: 961px) { .w960p { width: 960px; } .mw960p { @@ -1447,7 +1318,7 @@ ul.unstyled { /* -------------------------- */ /* large screens */ /* ------------- */ -@media (min-width: 1280px) { +@media (min-width: 1201px) { /* layouts for large screens */ .large-hidden { display: none !important; } @@ -1459,22 +1330,15 @@ ul.unstyled { display: inline-block; float: none; vertical-align: top; } - .large-row { - display: table; - table-layout: fixed; - width: 100% !important; } - .large-col { - display: table-cell; - vertical-align: top; } /* widths for large screens */ .large-w25 { width: 25% !important; } .large-w33 { - width: 33.3333% !important; } + width: 33.333333% !important; } .large-w50 { width: 50% !important; } .large-w66 { - width: 66.6666% !important; } + width: 66.666666% !important; } .large-w75 { width: 75% !important; } .large-w100, @@ -1493,7 +1357,7 @@ ul.unstyled { /* medium screens */ /* -------------- */ -@media (min-width: 960px) and (max-width: 1279px) { +@media (min-width: 769px) and (max-width: 1200px) { /* layouts for medium screens */ .medium-hidden { display: none !important; } @@ -1505,22 +1369,15 @@ ul.unstyled { display: inline-block; float: none; vertical-align: top; } - .medium-row { - display: table; - table-layout: fixed; - width: 100% !important; } - .medium-col { - display: table-cell; - vertical-align: top; } /* widths for medium screens */ .medium-w25 { width: 25% !important; } .medium-w33 { - width: 33.3333% !important; } + width: 33.333333% !important; } .medium-w50 { width: 50% !important; } .medium-w66 { - width: 66.6666% !important; } + width: 66.666666% !important; } .medium-w75 { width: 75% !important; } .medium-w100, @@ -1539,7 +1396,7 @@ ul.unstyled { /* small screens */ /* ------------- */ -@media (min-width: 640px) and (max-width: 959px) { +@media (min-width: 545px) and (max-width: 768px) { /* layouts for small screens */ .small-hidden { display: none !important; } @@ -1551,22 +1408,15 @@ ul.unstyled { display: inline-block; float: none; vertical-align: top; } - .small-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; } - .small-col { - display: table-cell !important; - vertical-align: top !important; } /* widths for small screens */ .small-w25 { width: 25% !important; } .small-w33 { - width: 33.3333% !important; } + width: 33.333333% !important; } .small-w50 { width: 50% !important; } .small-w66 { - width: 66.6666% !important; } + width: 66.666666% !important; } .small-w75 { width: 75% !important; } .small-w100, @@ -1588,7 +1438,7 @@ ul.unstyled { /* tiny screens */ /* ------------ */ -@media (max-width: 639px) { +@media (max-width: 544px) { /* quick small resolution reset */ .mod, .col, @@ -1603,12 +1453,8 @@ ul.unstyled { .flex-container { -webkit-box-orient: vertical; -webkit-box-direction: normal; - -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } - .row { - display: block !important; - width: 100% !important; } /* layouts for tiny screens */ .tiny-hidden { display: none !important; } @@ -1620,29 +1466,15 @@ ul.unstyled { display: inline-block; float: none; vertical-align: top; } - .tiny-row { - display: table !important; - table-layout: fixed !important; - width: 100% !important; } - .tiny-col { - display: table-cell !important; - vertical-align: top !important; } - th, - td { - display: block; - width: auto; - text-align: left; } - thead { - display: none; } /* widths for tiny screens */ .tiny-w25 { width: 25% !important; } .tiny-w33 { - width: 33.3333% !important; } + width: 33.333333% !important; } .tiny-w50 { width: 50% !important; } .tiny-w66 { - width: 66.6666% !important; } + width: 66.666666% !important; } .tiny-w75 { width: 75% !important; } .tiny-w100, @@ -1662,6 +1494,310 @@ ul.unstyled { .tiny-pa0 { padding: 0 !important; } } +/* ---------------------------------- */ +/* ==Grillade : Simple Grid System */ +/* ---------------------------------- */ +/* Doc : http://grillade.knacss.com */ +/* Grids common rules (for mono- and multi-lines grid) */ +@media (min-width: 545px) { + [class*=" grid"] > *, + [class^="grid"] > * { + box-sizing: border-box; + min-width: 0; + /* avoid min-width: auto */ + min-height: 0; + /* avoid min-height: auto */ } + [class*=" grid"].has-gutter, + [class^="grid"].has-gutter { + margin-right: -0.5rem; + margin-left: -0.5rem; } + [class*=" grid"].has-gutter > *, + [class^="grid"].has-gutter > * { + margin-right: 0.5rem; + margin-left: 0.5rem; } + [class*=" grid"].has-gutter-l, + [class^="grid"].has-gutter-l { + margin-right: -1rem; + margin-left: -1rem; } + [class*=" grid"].has-gutter-l > *, + [class^="grid"].has-gutter-l > * { + margin-right: 1rem; + margin-left: 1rem; } + [class*=" grid"].has-gutter-xl, + [class^="grid"].has-gutter-xl { + margin-right: -2rem; + margin-left: -2rem; } + [class*=" grid"].has-gutter-xl > *, + [class^="grid"].has-gutter-xl > * { + margin-right: 2rem; + margin-left: 2rem; } + /* Mono-line grid system (.grid) */ + .grid { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .grid > * { + -webkit-box-flex: 1; + -ms-flex: 1 1 0; + flex: 1 1 0; } + /* Multi-line grid system (.grid-X) */ + [class*=" grid-"], + [class^="grid-"] { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; + -ms-flex-wrap: wrap; + flex-wrap: wrap; } + [class*=" grid-"] > *, + [class^="grid-"] > * { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% - .01px); + /* @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; */ } + [class*=" grid-"].has-gutter > *, + [class^="grid-"].has-gutter > * { + width: calc(100% - 1rem - .01px); } + [class*=" grid-"].has-gutter-l > *, + [class^="grid-"].has-gutter-l > * { + width: calc(100% - 2rem - .01px); } + [class*=" grid-"].has-gutter-xl > *, + [class^="grid-"].has-gutter-xl > * { + width: calc(100% - 4rem - .01px); } } + +/* Grid offsets */ +.push { + margin-left: auto; } + +.pull { + margin-right: auto; } + +/* Grid order */ +.grid-item-first { + -webkit-box-ordinal-group: 0; + -ms-flex-order: -1; + order: -1; } + +.grid-item-last { + -webkit-box-ordinal-group: 2; + -ms-flex-order: 1; + order: 1; } + +[class*="--reverse"] { + -webkit-box-orient: horizontal; + -webkit-box-direction: reverse; + -ms-flex-direction: row-reverse; + flex-direction: row-reverse; } + +@media (min-width: 545px) { + [class*="grid-2"] > * { + width: calc(100% * 1 / 2 - .01px); } + [class*="grid-2"].has-gutter > * { + width: calc(100% * 1 / 2 - 1rem - .01px); } + [class*="grid-2"].has-gutter-l > * { + width: calc(100% * 1 / 2 - 2rem - .01px); } + [class*="grid-2"].has-gutter-xl > * { + width: calc(100% * 1 / 2 - 4rem - .01px); } + [class*="grid-3"] > * { + width: calc(100% * 1 / 3 - .01px); } + [class*="grid-3"].has-gutter > * { + width: calc(100% * 1 / 3 - 1rem - .01px); } + [class*="grid-3"].has-gutter-l > * { + width: calc(100% * 1 / 3 - 2rem - .01px); } + [class*="grid-3"].has-gutter-xl > * { + width: calc(100% * 1 / 3 - 4rem - .01px); } + [class*="grid-4"] > * { + width: calc(100% * 1 / 4 - .01px); } + [class*="grid-4"].has-gutter > * { + width: calc(100% * 1 / 4 - 1rem - .01px); } + [class*="grid-4"].has-gutter-l > * { + width: calc(100% * 1 / 4 - 2rem - .01px); } + [class*="grid-4"].has-gutter-xl > * { + width: calc(100% * 1 / 4 - 4rem - .01px); } + [class*="grid-5"] > * { + width: calc(100% * 1 / 5 - .01px); } + [class*="grid-5"].has-gutter > * { + width: calc(100% * 1 / 5 - 1rem - .01px); } + [class*="grid-5"].has-gutter-l > * { + width: calc(100% * 1 / 5 - 2rem - .01px); } + [class*="grid-5"].has-gutter-xl > * { + width: calc(100% * 1 / 5 - 4rem - .01px); } + [class*="grid-6"] > * { + width: calc(100% * 1 / 6 - .01px); } + [class*="grid-6"].has-gutter > * { + width: calc(100% * 1 / 6 - 1rem - .01px); } + [class*="grid-6"].has-gutter-l > * { + width: calc(100% * 1 / 6 - 2rem - .01px); } + [class*="grid-6"].has-gutter-xl > * { + width: calc(100% * 1 / 6 - 4rem - .01px); } + [class*="grid-7"] > * { + width: calc(100% * 1 / 7 - .01px); } + [class*="grid-7"].has-gutter > * { + width: calc(100% * 1 / 7 - 1rem - .01px); } + [class*="grid-7"].has-gutter-l > * { + width: calc(100% * 1 / 7 - 2rem - .01px); } + [class*="grid-7"].has-gutter-xl > * { + width: calc(100% * 1 / 7 - 4rem - .01px); } + [class*="grid-8"] > * { + width: calc(100% * 1 / 8 - .01px); } + [class*="grid-8"].has-gutter > * { + width: calc(100% * 1 / 8 - 1rem - .01px); } + [class*="grid-8"].has-gutter-l > * { + width: calc(100% * 1 / 8 - 2rem - .01px); } + [class*="grid-8"].has-gutter-xl > * { + width: calc(100% * 1 / 8 - 4rem - .01px); } + [class*="grid-9"] > * { + width: calc(100% * 1 / 9 - .01px); } + [class*="grid-9"].has-gutter > * { + width: calc(100% * 1 / 9 - 1rem - .01px); } + [class*="grid-9"].has-gutter-l > * { + width: calc(100% * 1 / 9 - 2rem - .01px); } + [class*="grid-9"].has-gutter-xl > * { + width: calc(100% * 1 / 9 - 4rem - .01px); } + [class*="grid-10"] > * { + width: calc(100% * 1 / 10 - .01px); } + [class*="grid-10"].has-gutter > * { + width: calc(100% * 1 / 10 - 1rem - .01px); } + [class*="grid-10"].has-gutter-l > * { + width: calc(100% * 1 / 10 - 2rem - .01px); } + [class*="grid-10"].has-gutter-xl > * { + width: calc(100% * 1 / 10 - 4rem - .01px); } + [class*="grid-11"] > * { + width: calc(100% * 1 / 11 - .01px); } + [class*="grid-11"].has-gutter > * { + width: calc(100% * 1 / 11 - 1rem - .01px); } + [class*="grid-11"].has-gutter-l > * { + width: calc(100% * 1 / 11 - 2rem - .01px); } + [class*="grid-11"].has-gutter-xl > * { + width: calc(100% * 1 / 11 - 4rem - .01px); } + [class*="grid-12"] > * { + width: calc(100% * 1 / 12 - .01px); } + [class*="grid-12"].has-gutter > * { + width: calc(100% * 1 / 12 - 1rem - .01px); } + [class*="grid-12"].has-gutter-l > * { + width: calc(100% * 1 / 12 - 2rem - .01px); } + [class*="grid-12"].has-gutter-xl > * { + width: calc(100% * 1 / 12 - 4rem - .01px); } } + +/* Sizing individual children */ +@media (min-width: 545px) { + .full { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% - .01px); } + .has-gutter .full { + width: calc(100% - 1rem - .01px); } + .has-gutter-l .full { + width: calc(100% - 2rem - .01px); } + .has-gutter-xl .full { + width: calc(100% - 4rem - .01px); } + .one-half { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(50% - .01px); } + .has-gutter .one-half { + width: calc(50% - 1rem - .01px); } + .has-gutter-l .one-half { + width: calc(50% - 2rem - .01px); } + .has-gutter-xl .one-half { + width: calc(50% - 4rem - .01px); } + .one-third { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 3 - .01px); } + .has-gutter .one-third { + width: calc(100% / 3 - 1rem - .01px); } + .has-gutter-l .one-third { + width: calc(100% / 3 - 2rem - .01px); } + .has-gutter-xl .one-third { + width: calc(100% / 3 - 4rem - .01px); } + .one-quarter { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 4 - .01px); } + .has-gutter .one-quarter { + width: calc(100% / 4 - 1rem - .01px); } + .has-gutter-l .one-quarter { + width: calc(100% / 4 - 2rem - .01px); } + .has-gutter-xl .one-quarter { + width: calc(100% / 4 - 4rem - .01px); } + .one-fifth { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 5 - .01px); } + .has-gutter .one-fifth { + width: calc(100% / 5 - 1rem - .01px); } + .has-gutter-l .one-fifth { + width: calc(100% / 5 - 2rem - .01px); } + .has-gutter-xl .one-fifth { + width: calc(100% / 5 - 4rem - .01px); } + .two-thirds { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 3 * 2 - .01px); } + .has-gutter .two-thirds { + width: calc(100% / 3 * 2 - 1rem - .01px); } + .has-gutter-l .two-thirds { + width: calc(100% / 3 * 2 - 2rem - .01px); } + .has-gutter-xl .two-thirds { + width: calc(100% / 3 * 2 - 4rem - .01px); } + .three-quarters { + -webkit-box-flex: 0; + -ms-flex: 0 0 auto; + flex: 0 0 auto; + width: calc(100% / 4 * 3 - .01px); } + .has-gutter .three-quarters { + width: calc(100% / 4 * 3 - 1rem - .01px); } + .has-gutter-l .three-quarters { + width: calc(100% / 4 * 3 - 2rem - .01px); } + .has-gutter-xl .three-quarters { + width: calc(100% / 4 * 3 - 4rem - .01px); } } + +/* Responsive Small Breakpoint */ +@media (min-width: 545px) and (max-width: 768px) { + [class*="-small-4"] > * { + width: calc(100% / 4 - .01px); } + [class*="-small-4"].has-gutter > * { + width: calc(100% / 4 - 1rem - .01px); } + [class*="-small-4"].has-gutter-l > * { + width: calc(100% / 4 - 2rem - .01px); } + [class*="-small-4"].has-gutter-xl > * { + width: calc(100% / 4 - 4rem - .01px); } + [class*="-small-3"] > * { + width: calc(100% / 3 - .01px); } + [class*="-small-3"].has-gutter > * { + width: calc(100% / 3 - 1rem - .01px); } + [class*="-small-3"].has-gutter-l > * { + width: calc(100% / 3 - 2rem - .01px); } + [class*="-small-3"].has-gutter-xl > * { + width: calc(100% / 3 - 4rem - .01px); } + [class*="-small-2"] > * { + width: calc(100% / 2 - .01px); } + [class*="-small-2"].has-gutter > * { + width: calc(100% / 2 - 1rem - .01px); } + [class*="-small-2"].has-gutter-l > * { + width: calc(100% / 2 - 2rem - .01px); } + [class*="-small-2"].has-gutter-xl > * { + width: calc(100% / 2 - 4rem - .01px); } + [class*="-small-1"] > * { + width: calc(100% - .01px); } + [class*="-small-1"].has-gutter > * { + width: calc(100% - 1rem - .01px); } + [class*="-small-1"].has-gutter-l > * { + width: calc(100% - 2rem - .01px); } + [class*="-small-1"].has-gutter-xl > * { + width: calc(100% - 4rem - .01px); } } + /* ----------------------------- */ /* ==Own stylesheet */ /* ----------------------------- */ diff --git a/css/knacss.css b/css/knacss.css index ee1e004..fc70cb1 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,4 +1,4 @@ @charset "UTF-8";/*! -* www.KNACSS.com V5.0.1 (24 mai 2016) @author: Alsacreations, Raphael Goetter +* www.KNACSS.com V6.0.0 (21 septembre 2016) @author: Alsacreations, Raphael Goetter * Licence WTFPL http://www.wtfpl.net/ -*//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html,legend{box-sizing:border-box}a:active,a:focus,a:hover,body,mark{color:#000}code,mark{padding:2px 4px}button,hr,input{overflow:visible}hr,legend,pre code{padding:0}.clear,.line,.row,hr{clear:both}.txtleft,td,th{text-align:left}.table,blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}.row,.table,table{table-layout:fixed}.col,.inbl,.row>*,.table,table,td,textarea,th{vertical-align:top}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#333}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{margin:.67em 0}mark{background-color:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:0}sub{bottom:-.25em;top:.5ex}sup{top:-.5em;bottom:1ex}img{border-style:none;vertical-align:middle}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:1em}figure{margin:1em 40px}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.h1-like,.h2-like,body,h1,h2{font-family:sans-serif}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}ol,ul{padding-left:2em}img:not([src$=".svg"]){height:auto}blockquote,figure{margin-left:0;margin-right:0}body{margin:0;font-size:1.4rem;background-color:#fff;line-height:1.5}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}.h1-like,h1{font-size:3.2rem}.h2-like,h2{font-size:2.8rem}.h3-like,h3{font-size:2.4rem}.h4-like,h4{font-size:2rem}.h5-like,h5{font-size:1.8rem}.h6-like,h6{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}.italic,address,cite,em,i,var{font-style:italic}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}table{margin-bottom:2rem}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{background:rgba(0,0,0,.04);color:#b11}pre code{background:0 0;color:inherit;border-radius:0}blockquote{position:relative;padding-left:3em}.skip-links,.skip-links a{position:absolute}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}.btn,button,input,label,select,textarea{font-family:inherit;font-size:inherit}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{box-sizing:content-box;display:block;height:1px;margin:1em 0 2em;border:0;color:#ccc;background-color:#ccc}.center,.right{margin-left:auto}.center,.left{margin-right:auto}.table,table{border:1px solid #ccc}caption{padding:1rem;color:#555;font-style:italic}td,th{padding:.3em .8em;border:1px dotted #aaa}.skip-links a{overflow:hidden;clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}.skip-links a:focus{position:static;overflow:visible;clip:auto}@media (max-width:320px){code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.no-wrapping{word-wrap:normal;-webkit-hyphens:manual;-moz-hyphens:manual;-ms-hyphens:manual;hyphens:manual}}.bfc,.mod{overflow:hidden}.clearfix::after,.line::after{content:"";display:table;clear:both;border-collapse:collapse}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.row{display:table;width:100%}.col,.row>*{display:table-cell}body>script{display:none!important}.inbl{display:inline-block}[class*=flex-container]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;min-width:0}.flex-item-first,.grid-item-first{-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}.flex-item-medium,.grid-item-medium{-webkit-box-ordinal-group:1;-webkit-order:0;-ms-flex-order:0;order:0}.flex-item-last,.grid-item-last{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}.flex-item-center,.grid-item-center{margin:auto}[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - 2rem - .01px);min-width:0;min-height:0;margin-left:2rem}@media (min-width:321px) and (max-width:640px){[class*=grid-]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.grid-item-double{width:calc(100% * 2 / 2 - 2rem)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.grid-item-double{width:calc(100% * 2 / 4 - 2rem)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.grid-item-double{width:calc(100% * 2 / 5 - 2rem)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.grid-item-double{width:calc(100% * 2 / 6 - 2rem)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.grid-item-double{width:calc(100% * 2 / 7 - 2rem)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.grid-item-double{width:calc(100% * 2 / 8 - 2rem)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9]>.grid-item-double{width:calc(100% * 2 / 9 - 2rem)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.grid-item-double{width:calc(100% * 2 / 10 - 2rem)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11]>.grid-item-double{width:calc(100% * 2 / 11 - 2rem)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.grid-item-double{width:calc(100% * 2 / 12 - 2rem)}}@media (min-width:321px) and (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.grid-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.grid-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){.grid-2-1>:nth-child(odd){width:calc(66.66667% - 2rem)}.grid-1-2>:nth-child(odd),.grid-2-1>:nth-child(even){width:calc(33.33333% - 2rem)}.grid-1-2>:nth-child(even){width:calc(66.66667% - 2rem)}.grid-3-1>:nth-child(odd){width:calc(75% - 2rem)}.grid-1-3>:nth-child(odd),.grid-3-1>:nth-child(even){width:calc(25% - 2rem)}.grid-1-3>:nth-child(even){width:calc(75% - 2rem)}.grid-3-2>:nth-child(odd){width:calc(60% - 2rem)}.grid-2-3>:nth-child(odd),.grid-3-2>:nth-child(even){width:calc(40% - 2rem)}.grid-2-3>:nth-child(even){width:calc(60% - 2rem)}.grid-4-1>:nth-child(odd){width:calc(80% - 2rem)}.grid-1-4>:nth-child(odd),.grid-4-1>:nth-child(even){width:calc(20% - 2rem)}.grid-1-4>:nth-child(even){width:calc(80% - 2rem)}}.pull{margin-right:auto}.push{margin-left:auto}.table,table{width:100%;border-collapse:collapse}.table{display:table}#recaptcha_table,.table-auto{table-layout:auto}td,th{min-width:2rem;cursor:default}.btn{display:inline-block}fieldset,form{border:none}button,input,optgroup,select,textarea{color:#000}label{vertical-align:middle;cursor:pointer}legend{border:0;white-space:normal}textarea{min-height:5em;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{opacity:.54;color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}.is-hidden,[hidden]{display:none}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.is-disabled,[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed;-webkit-filter:grayscale(1);filter:grayscale(1)}ul.is-unstyled,ul.unstyled{list-style:none;padding-left:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}@media (min-width:400px){.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}}@media (min-width:700px){.w700p{width:700px}.w800p{width:800px}}@media (min-width:960px){.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.mauto{margin:auto}.mtauto{margin-top:auto}.mrauto{margin-right:auto}.mbauto{margin-bottom:auto}.mlauto{margin-left:auto}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:1280px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-row{display:table;table-layout:fixed;width:100%!important}.large-col{display:table-cell;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.3333%!important}.large-w50{width:50%!important}.large-w66{width:66.6666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-ma0,.large-man{margin:0!important}}@media (min-width:960px) and (max-width:1279px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-row{display:table;table-layout:fixed;width:100%!important}.medium-col{display:table-cell;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.3333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.6666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:640px) and (max-width:959px){.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-row{display:table!important;table-layout:fixed!important;width:100%!important}.small-col{display:table-cell!important;vertical-align:top!important}.small-w25{width:25%!important}.small-w33{width:33.3333%!important}.small-w50{width:50%!important}.small-w66{width:66.6666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:639px){.col,.mod,.row,fieldset{display:block!important}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.row,.tiny-row{width:100%!important}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-row{display:table!important;table-layout:fixed!important}.tiny-col{display:table-cell!important;vertical-align:top!important}td,th{display:block;width:auto;text-align:left}thead{display:none}.tiny-w25{width:25%!important}.tiny-w33{width:33.3333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.6666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}} \ No newline at end of file +*//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html,legend{box-sizing:border-box}a:active,a:focus,a:hover,body,mark{color:#000}code,mark{padding:2px 4px}button,hr,input{overflow:visible}hr,legend,pre code{padding:0}.table,blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}.table,table,td,th{vertical-align:top}.clear,hr{clear:both}.txtleft,td,th{text-align:left}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#333}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{margin:.67em 0}mark{background-color:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:0}sub{bottom:-.25em;top:.5ex}sup{top:-.5em;bottom:1ex}img{border-style:none;vertical-align:middle}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:1em}figure{margin:1em 40px}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}.h1-like,.h2-like,body,h1,h2{font-family:sans-serif}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}ol,ul{padding-left:2em}img:not([src$=".svg"]){height:auto}blockquote,figure{margin-left:0;margin-right:0}body{margin:0;font-size:1.4rem;background-color:#fff;line-height:1.5}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}.h1-like,h1{font-size:3.2rem}.h2-like,h2{font-size:2.8rem}.h3-like,h3{font-size:2.4rem}.h4-like,h4{font-size:2rem}.h5-like,h5{font-size:1.8rem}.h6-like,h6{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}.italic,address,cite,em,i,var{font-style:italic}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}table{margin-bottom:2rem}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="#"]::after,a[href^="javascript:"]::after{content:""}}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{background:rgba(0,0,0,.04);color:#b11}pre code{background:0 0;color:inherit;border-radius:0}blockquote{position:relative;padding-left:3em}.skip-links,.skip-links a{position:absolute}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}.btn,button,input,label,select,textarea{font-family:inherit;font-size:inherit}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{box-sizing:content-box;display:block;height:1px;margin:1em 0 2em;border:0;color:#ccc;background-color:#ccc}.center,.left{margin-right:auto}.table,table{border:1px solid #ccc;width:100%;table-layout:fixed;border-collapse:collapse}caption{padding:1rem;color:#555;font-style:italic}td,th{padding:.3em .8em;border:1px dotted #aaa;min-width:2rem;cursor:default}.skip-links a{overflow:hidden;clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}.skip-links a:focus{position:static;overflow:visible;clip:auto}.table{display:table}#recaptcha_table,.table-auto{table-layout:auto}.btn{display:inline-block}fieldset,form{border:none}button,input,optgroup,select,textarea{color:#000}label{vertical-align:middle;cursor:pointer}.inbl,textarea{vertical-align:top}legend{border:0;white-space:normal}textarea{min-height:5em;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{opacity:.54;color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}@media (min-width:545px){.o-media{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.o-media-content{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.o-media--reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.o-media-figure--center{-ms-flex-item-align:center;align-self:center}[class*=" autogrid"],[class^=autogrid]{display:-webkit-box;display:-ms-flexbox;display:flex}[class*=" autogrid"]>*,[class^=autogrid]>*{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.has-gutter>:not(:first-child){margin-left:1rem}[class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.center,.right{margin-left:auto}.bfc,.mod{overflow:hidden}.clearfix::after{content:"";display:table;clear:both;border-collapse:collapse}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.inbl{display:inline-block}.flex-container,[class*=flex-container]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.flex-item-first,.grid-item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.flex-item-medium,.grid-item-medium{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.flex-item-last,.grid-item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.flex-item-center,.grid-item-center{margin:auto}.is-hidden,[hidden]{display:none}.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.is-disabled,[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed;-webkit-filter:grayscale(1);filter:grayscale(1)}ul.is-unstyled,ul.unstyled{list-style:none;padding-left:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}@media (min-width:401px){.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}}@media (min-width:701px){.w700p{width:700px}.w800p{width:800px}}@media (min-width:961px){.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.mauto{margin:auto}.mtauto{margin-top:auto}.mrauto{margin-right:auto}.mbauto{margin-bottom:auto}.mlauto{margin-left:auto}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:1201px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.333333%!important}.large-w50{width:50%!important}.large-w66{width:66.666666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-ma0,.large-man{margin:0!important}}@media (min-width:769px) and (max-width:1200px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.333333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.666666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:545px) and (max-width:768px){.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-w25{width:25%!important}.small-w33{width:33.333333%!important}.small-w50{width:50%!important}.small-w66{width:66.666666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:544px){code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.no-wrapping{word-wrap:normal;-webkit-hyphens:manual;-ms-hyphens:manual;hyphens:manual}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{display:block!important;float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-w25{width:25%!important}.tiny-w33{width:33.333333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.666666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}}@media (min-width:545px){[class*=" grid"]>*,[class^=grid]>*{box-sizing:border-box;min-width:0;min-height:0}[class*=" grid"].has-gutter,[class^=grid].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=" grid"].has-gutter>*,[class^=grid].has-gutter>*{margin-right:.5rem;margin-left:.5rem}[class*=" grid"].has-gutter-l,[class^=grid].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=" grid"].has-gutter-l>*,[class^=grid].has-gutter-l>*{margin-right:1rem;margin-left:1rem}[class*=" grid"].has-gutter-xl,[class^=grid].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=" grid"].has-gutter-xl>*,[class^=grid].has-gutter-xl>*{margin-right:2rem;margin-left:2rem}.grid{display:-webkit-box;display:-ms-flexbox;display:flex}.grid>*{-webkit-box-flex:1;-ms-flex:1 1 0;flex:1 1 0}[class*=" grid-"],[class^=grid-]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}[class*=" grid-"]>*,[class^=grid-]>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - .01px)}[class*=" grid-"].has-gutter>*,[class^=grid-].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*=" grid-"].has-gutter-l>*,[class^=grid-].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*=" grid-"].has-gutter-xl>*,[class^=grid-].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}[class*=grid-2]>*{width:calc(100% * 1 / 2 - .01px)}[class*=grid-2].has-gutter>*{width:calc(100% * 1 / 2 - 1rem - .01px)}[class*=grid-2].has-gutter-l>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2].has-gutter-xl>*{width:calc(100% * 1 / 2 - 4rem - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - .01px)}[class*=grid-3].has-gutter>*{width:calc(100% * 1 / 3 - 1rem - .01px)}[class*=grid-3].has-gutter-l>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3].has-gutter-xl>*{width:calc(100% * 1 / 3 - 4rem - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - .01px)}[class*=grid-4].has-gutter>*{width:calc(100% * 1 / 4 - 1rem - .01px)}[class*=grid-4].has-gutter-l>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4].has-gutter-xl>*{width:calc(100% * 1 / 4 - 4rem - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - .01px)}[class*=grid-5].has-gutter>*{width:calc(100% * 1 / 5 - 1rem - .01px)}[class*=grid-5].has-gutter-l>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5].has-gutter-xl>*{width:calc(100% * 1 / 5 - 4rem - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - .01px)}[class*=grid-6].has-gutter>*{width:calc(100% * 1 / 6 - 1rem - .01px)}[class*=grid-6].has-gutter-l>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6].has-gutter-xl>*{width:calc(100% * 1 / 6 - 4rem - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - .01px)}[class*=grid-7].has-gutter>*{width:calc(100% * 1 / 7 - 1rem - .01px)}[class*=grid-7].has-gutter-l>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7].has-gutter-xl>*{width:calc(100% * 1 / 7 - 4rem - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - .01px)}[class*=grid-8].has-gutter>*{width:calc(100% * 1 / 8 - 1rem - .01px)}[class*=grid-8].has-gutter-l>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8].has-gutter-xl>*{width:calc(100% * 1 / 8 - 4rem - .01px)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - .01px)}[class*=grid-9].has-gutter>*{width:calc(100% * 1 / 9 - 1rem - .01px)}[class*=grid-9].has-gutter-l>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9].has-gutter-xl>*{width:calc(100% * 1 / 9 - 4rem - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - .01px)}[class*=grid-10].has-gutter>*{width:calc(100% * 1 / 10 - 1rem - .01px)}[class*=grid-10].has-gutter-l>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10].has-gutter-xl>*{width:calc(100% * 1 / 10 - 4rem - .01px)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - .01px)}[class*=grid-11].has-gutter>*{width:calc(100% * 1 / 11 - 1rem - .01px)}[class*=grid-11].has-gutter-l>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11].has-gutter-xl>*{width:calc(100% * 1 / 11 - 4rem - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - .01px)}[class*=grid-12].has-gutter>*{width:calc(100% * 1 / 12 - 1rem - .01px)}[class*=grid-12].has-gutter-l>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12].has-gutter-xl>*{width:calc(100% * 1 / 12 - 4rem - .01px)}}.push{margin-left:auto}.pull{margin-right:auto}.grid-item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.grid-item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:545px){.full,.one-half{-webkit-box-flex:0}.full{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - .01px)}.has-gutter .full{width:calc(100% - 1rem - .01px)}.has-gutter-l .full{width:calc(100% - 2rem - .01px)}.has-gutter-xl .full{width:calc(100% - 4rem - .01px)}.one-half{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(50% - .01px)}.has-gutter .one-half{width:calc(50% - 1rem - .01px)}.has-gutter-l .one-half{width:calc(50% - 2rem - .01px)}.has-gutter-xl .one-half{width:calc(50% - 4rem - .01px)}.one-third{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 3 - .01px)}.has-gutter .one-third{width:calc(100% / 3 - 1rem - .01px)}.has-gutter-l .one-third{width:calc(100% / 3 - 2rem - .01px)}.has-gutter-xl .one-third{width:calc(100% / 3 - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 4 - .01px)}.has-gutter .one-quarter{width:calc(100% / 4 - 1rem - .01px)}.has-gutter-l .one-quarter{width:calc(100% / 4 - 2rem - .01px)}.has-gutter-xl .one-quarter{width:calc(100% / 4 - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 5 - .01px)}.has-gutter .one-fifth{width:calc(100% / 5 - 1rem - .01px)}.has-gutter-l .one-fifth{width:calc(100% / 5 - 2rem - .01px)}.has-gutter-xl .one-fifth{width:calc(100% / 5 - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 3 * 2 - .01px)}.has-gutter .two-thirds{width:calc(100% / 3 * 2 - 1rem - .01px)}.has-gutter-l .two-thirds{width:calc(100% / 3 * 2 - 2rem - .01px)}.has-gutter-xl .two-thirds{width:calc(100% / 3 * 2 - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 4 * 3 - .01px)}.has-gutter .three-quarters{width:calc(100% / 4 * 3 - 1rem - .01px)}.has-gutter-l .three-quarters{width:calc(100% / 4 * 3 - 2rem - .01px)}.has-gutter-xl .three-quarters{width:calc(100% / 4 * 3 - 4rem - .01px)}}@media (min-width:545px) and (max-width:768px){[class*="-small-4"]>*{width:calc(100% / 4 - .01px)}[class*="-small-4"].has-gutter>*{width:calc(100% / 4 - 1rem - .01px)}[class*="-small-4"].has-gutter-l>*{width:calc(100% / 4 - 2rem - .01px)}[class*="-small-4"].has-gutter-xl>*{width:calc(100% / 4 - 4rem - .01px)}[class*="-small-3"]>*{width:calc(100% / 3 - .01px)}[class*="-small-3"].has-gutter>*{width:calc(100% / 3 - 1rem - .01px)}[class*="-small-3"].has-gutter-l>*{width:calc(100% / 3 - 2rem - .01px)}[class*="-small-3"].has-gutter-xl>*{width:calc(100% / 3 - 4rem - .01px)}[class*="-small-2"]>*{width:calc(100% / 2 - .01px)}[class*="-small-2"].has-gutter>*{width:calc(100% / 2 - 1rem - .01px)}[class*="-small-2"].has-gutter-l>*{width:calc(100% / 2 - 2rem - .01px)}[class*="-small-2"].has-gutter-xl>*{width:calc(100% / 2 - 4rem - .01px)}[class*="-small-1"]>*{width:calc(100% - .01px)}[class*="-small-1"].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*="-small-1"].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*="-small-1"].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}} \ No newline at end of file diff --git a/gulpfile.js b/gulpfile.js index 70916fb..a25cb1a 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -25,7 +25,7 @@ gulp.task('css', function () { }); gulp.task('grillade', function() { - return gulp.src(['./sass/_config/_variables.scss', './sass/_config/_breakpoints.scss', './sass/grids/_grillade.scss']) + return gulp.src(['./sass/_config/_breakpoints.scss', './sass/grids/_grillade.scss']) .pipe(concat('grillade.scss')) .pipe(gulp.dest('./css/')) .pipe(sass()) diff --git a/sass/_config/_breakpoints.scss b/sass/_config/_breakpoints.scss index 42f7272..5944e04 100644 --- a/sass/_config/_breakpoints.scss +++ b/sass/_config/_breakpoints.scss @@ -1,5 +1,7 @@ +// Responsive breakpoints variables + // Warning : you should use your own values, regardless of the devices -// GOOD : (max-width: $BP) and (min-width: ($BP + 1)) +// Best practise : (max-width: $BP) and (min-width: ($BP + 1)) $tiny: 544px !default; // or 'em' if you prefer, of course $small: 768px !default; $medium: 1024px !default; diff --git a/sass/_config/_variables.scss b/sass/_config/_variables.scss index 6de9d49..8e5b199 100644 --- a/sass/_config/_variables.scss +++ b/sass/_config/_variables.scss @@ -45,11 +45,5 @@ $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 -// 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 -$grid-left: 2 !default; // left side of uneven columns -$grid-right: 1 !default; // right side of uneven columns - //kna-namespace (default : null) $kna-namespace: null !default; diff --git a/sass/grids/_grillade.scss b/sass/grids/_grillade.scss index dc520fb..7e538aa 100644 --- a/sass/grids/_grillade.scss +++ b/sass/grids/_grillade.scss @@ -3,9 +3,6 @@ /* ---------------------------------- */ /* Doc : http://grillade.knacss.com */ -// Breakpoints variables -$tiny: 544px !default; -$small: 768px !default; // Grids variables $grid-gutter: 1rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem $grid-gutter-l: $grid-gutter * 2; diff --git a/sass/knacss.scss b/sass/knacss.scss index 42ebd79..5cf48e0 100644 --- a/sass/knacss.scss +++ b/sass/knacss.scss @@ -1,5 +1,5 @@ /*! -* www.KNACSS.com V5.0.1 (24 mai 2016) @author: Alsacreations, Raphael Goetter +* www.KNACSS.com V6.0.0 (21 septembre 2016) @author: Alsacreations, Raphael Goetter * Licence WTFPL http://www.wtfpl.net/ */ @@ -12,13 +12,15 @@ /* 3- Print (print quick reset) */ /* 4- Stylings (minor stylings) */ /* 5- Misc (skip links, hyphens) */ -/* (6- WordPress reset (disabled by default)) */ -/* 7- Global Layout (alignment, modules, positionning) */ -/* 8- Grid Layout (grillade) */ -/* 9- Tables (data tables consistency) */ -/* 10- Forms (forms consistency) */ +/* 6- Tables (data tables consistency) */ +/* 7- Forms (forms consistency) */ +/* 8- Media object */ +/* 9- Autogrid object */ +/* 10- Global Layout (alignment, modules, positionning) */ /* 11- Helpers (width and spacers helpers) */ -/* 12- Responsive (Responsive Web Design helpers) */ +/* (12- WordPress reset (disabled by default)) */ +/* 13- Responsive (Responsive Web Design helpers) */ +/* 14- Grid Layout (grillade) */ /* ---------------------------------- */ /* ==Normalize (basic reset) */ @@ -43,6 +45,7 @@ // Objects @import "objects/_media.scss"; // media object +@import "objects/_autogrid.scss"; // media object // Utilities @import "utilities/_layout.scss"; // alignment, modules, positionning