From d7214f2fddebda7b8b81269f3f44c0ab98e99cdd Mon Sep 17 00:00:00 2001 From: Rodolphe Date: Wed, 28 Aug 2019 10:24:32 +0200 Subject: [PATCH] Update package --- changelog.md | 26 +- css/grillade-flex.css | 2 +- css/grillade-grid.css | 2 +- css/knacss-unminified.css | 2886 +++++++++++++++++----------------- css/knacss.css | 2 +- package-lock.json | 2174 ++++++++++++++++--------- package.json | 2 +- sass/base/grillade-grid.scss | 56 +- 8 files changed, 2965 insertions(+), 2185 deletions(-) diff --git a/changelog.md b/changelog.md index 2b8a7304..8d68213f 100644 --- a/changelog.md +++ b/changelog.md @@ -2,19 +2,21 @@ ## Changelog v8.0.0 (xxx 2019) -- mise à jour du reset, suppression des reset vendors (Reboot de Boostrap) -- support passé de IE10 à IE11 (browserlist) -- Browserslist devenu `.browserslistrc` et mise à jour du support à `>0.25% +- Architecture : mise à jour du reset, suppression des reset vendors (Reboot de Boostrap) +- Architecture : renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss` +- Architecture : modification de l'ordre d'import des fichiers : les utilitaires sont importées à la fin à présent +- Compatibilité : support passé de IE10 à IE11 (browserlist) +- Compatibilité : Browserslist devenu `.browserslistrc` et mise à jour du support à `>0.25% not op_mini all` -- versions exactes des dépendances dans package.json (pour éviter "latest") -- renommage des classes `grid-` en `grillade-` pour éviter tout conflit -- renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss` -- fichier gulpfile.js dorénavant compatible Gulp 4 -- modification de l'ordre d'import des fichiers : les utilitaires sont importées à la fin à présent -- ajout d'une variable pour supporter ou non IE11 : `$ie: true !default;`. -- ajout d'une variable pour supporter ou non WordPress : `$wordpress: false !default;`. -- `visually-hidden` devient un mixin -- corrections typo +- Compatibilité : fichier gulpfile.js dorénavant compatible Gulp 4 +- Compatibilité : versions exactes des dépendances dans package.json (pour éviter "latest") +- Grillade :renommage des classes `grid-` en `grillade-` pour éviter tout conflit +- Grillade : ajout du constructeur `medium-X` en plus de `small-X` +- Grillade : ajout des constructeus `-start`, `-end`, `-center`, `-space-between`, `-space-around`, `-space-evenly` pour l'alignement général de la grille +- Divers : ajout d'une variable pour supporter ou non IE11 : `$ie: true !default;`. +- Divers :ajout d'une variable pour supporter ou non WordPress : `$wordpress: false !default;`. +- Divers :`visually-hidden` devient un mixin +- Divers :corrections typo ## Changelog v7.1.2 (30 janvier 2019) diff --git a/css/grillade-flex.css b/css/grillade-flex.css index c55b498a..da802dbf 100644 --- a/css/grillade-flex.css +++ b/css/grillade-flex.css @@ -1 +1 @@ -@media (min-width:576px){[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-sizing:border-box;box-sizing:border-box;min-width:0;min-height:0}}@media (min-width:576px){.grid,.grid--reverse{display:-webkit-box;display:-ms-flexbox;display:flex}.grid--reverse>*,.grid>*{-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:0;min-height:0}.grid--reverse.has-gutter>*+*,.grid.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grid--reverse.has-gutter-l>*+*,.grid.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grid--reverse.has-gutter-xl>*+*,.grid.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}}@media (min-width:576px){[class*=grid-2]>*{width:calc(50% - .01px)}[class*=grid-2].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-2].has-gutter>*{width:calc(50% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-2].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-2].has-gutter-l>*{width:calc(50% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-2].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-3]>*{width:calc(33.33333% - .01px)}[class*=grid-3].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-3].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-3].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-4]>*{width:calc(25% - .01px)}[class*=grid-4].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-4].has-gutter>*{width:calc(25% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-4].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-4].has-gutter-l>*{width:calc(25% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-4].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-5]>*{width:calc(20% - .01px)}[class*=grid-5].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-5].has-gutter>*{width:calc(20% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-5].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-5].has-gutter-l>*{width:calc(20% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-5].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-5].has-gutter-xl>*{width:calc(20% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-6]>*{width:calc(16.66667% - .01px)}[class*=grid-6].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-6].has-gutter>*{width:calc(16.66667% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-6].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-6].has-gutter-l>*{width:calc(16.66667% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-6].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-6].has-gutter-xl>*{width:calc(16.66667% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-7]>*{width:calc(14.28571% - .01px)}[class*=grid-7].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-7].has-gutter>*{width:calc(14.28571% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-7].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-7].has-gutter-l>*{width:calc(14.28571% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-7].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-7].has-gutter-xl>*{width:calc(14.28571% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-8]>*{width:calc(12.5% - .01px)}[class*=grid-8].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-8].has-gutter>*{width:calc(12.5% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-8].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-8].has-gutter-l>*{width:calc(12.5% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-8].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-8].has-gutter-xl>*{width:calc(12.5% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-9]>*{width:calc(11.11111% - .01px)}[class*=grid-9].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-9].has-gutter>*{width:calc(11.11111% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-9].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-9].has-gutter-l>*{width:calc(11.11111% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-9].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-9].has-gutter-xl>*{width:calc(11.11111% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-10]>*{width:calc(10% - .01px)}[class*=grid-10].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-10].has-gutter>*{width:calc(10% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-10].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-10].has-gutter-l>*{width:calc(10% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-10].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-10].has-gutter-xl>*{width:calc(10% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-11]>*{width:calc(9.09091% - .01px)}[class*=grid-11].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-11].has-gutter>*{width:calc(9.09091% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-11].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-11].has-gutter-l>*{width:calc(9.09091% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-11].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-11].has-gutter-xl>*{width:calc(9.09091% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-12]>*{width:calc(8.33333% - .01px)}[class*=grid-12].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-12].has-gutter>*{width:calc(8.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-12].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-12].has-gutter-l>*{width:calc(8.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-12].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-12].has-gutter-xl>*{width:calc(8.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[class*=grid-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:576px){.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(33.33333% - .01px)}.has-gutter>.one-third{width:calc(33.33333% - 1rem - .01px)}.has-gutter-l>.one-third{width:calc(33.33333% - 2rem - .01px)}.has-gutter-xl>.one-third{width:calc(33.33333% - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(25% - .01px)}.has-gutter>.one-quarter{width:calc(25% - 1rem - .01px)}.has-gutter-l>.one-quarter{width:calc(25% - 2rem - .01px)}.has-gutter-xl>.one-quarter{width:calc(25% - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(20% - .01px)}.has-gutter>.one-fifth{width:calc(20% - 1rem - .01px)}.has-gutter-l>.one-fifth{width:calc(20% - 2rem - .01px)}.has-gutter-xl>.one-fifth{width:calc(20% - 4rem - .01px)}.one-sixth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(16.66667% - .01px)}.has-gutter>.one-sixth{width:calc(16.66667% - 1rem - .01px)}.has-gutter-l>.one-sixth{width:calc(16.66667% - 2rem - .01px)}.has-gutter-xl>.one-sixth{width:calc(16.66667% - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(66.66667% - .01px)}.has-gutter>.two-thirds{width:calc(66.66667% - 1rem - .01px)}.has-gutter-l>.two-thirds{width:calc(66.66667% - 2rem - .01px)}.has-gutter-xl>.two-thirds{width:calc(66.66667% - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(75% - .01px)}.has-gutter>.three-quarters{width:calc(75% - 1rem - .01px)}.has-gutter-l>.three-quarters{width:calc(75% - 2rem - .01px)}.has-gutter-xl>.three-quarters{width:calc(75% - 4rem - .01px)}.five-sixths{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(83.33333% - .01px)}.has-gutter>.five-sixths{width:calc(83.33333% - 1rem - .01px)}.has-gutter-l>.five-sixths{width:calc(83.33333% - 2rem - .01px)}.has-gutter-xl>.five-sixths{width:calc(83.33333% - 4rem - .01px)}}@media (min-width:576px) and (max-width:767px){[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)}[class*=-small-2]>*{width:calc(50% - .01px)}[class*=-small-2].has-gutter>*{width:calc(50% - 1rem - .01px)}[class*=-small-2].has-gutter-l>*{width:calc(50% - 2rem - .01px)}[class*=-small-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px)}[class*=-small-3]>*{width:calc(33.33333% - .01px)}[class*=-small-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px)}[class*=-small-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px)}[class*=-small-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px)}[class*=-small-4]>*{width:calc(25% - .01px)}[class*=-small-4].has-gutter>*{width:calc(25% - 1rem - .01px)}[class*=-small-4].has-gutter-l>*{width:calc(25% - 2rem - .01px)}[class*=-small-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px)}} \ No newline at end of file +@media (min-width:576px){[class*=" grillade-"],[class^=grillade-]{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-direction:row;flex-wrap:wrap}[class*=" grillade-"]>*,[class^=grillade-]>*{box-sizing:border-box;min-width:0;min-height:0}}@media (min-width:576px){.grillade,.grillade--reverse{display:-webkit-box;display:flex}.grillade--reverse>*,.grillade>*{-webkit-box-flex:1;flex:1 1;box-sizing:border-box;min-width:0;min-height:0}.grillade--reverse.has-gutter>*+*,.grillade.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grillade--reverse.has-gutter-l>*+*,.grillade.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grillade--reverse.has-gutter-xl>*+*,.grillade.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}}@media (min-width:576px){[class*=grillade-2]>*{width:calc(50% - .01px)}[class*=grillade-2].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-2].has-gutter>*{width:calc(50% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-2].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-2].has-gutter-l>*{width:calc(50% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-2].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-3]>*{width:calc(33.33333% - .01px)}[class*=grillade-3].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-3].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-3].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-4]>*{width:calc(25% - .01px)}[class*=grillade-4].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-4].has-gutter>*{width:calc(25% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-4].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-4].has-gutter-l>*{width:calc(25% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-4].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-5]>*{width:calc(20% - .01px)}[class*=grillade-5].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-5].has-gutter>*{width:calc(20% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-5].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-5].has-gutter-l>*{width:calc(20% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-5].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-5].has-gutter-xl>*{width:calc(20% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-6]>*{width:calc(16.66667% - .01px)}[class*=grillade-6].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-6].has-gutter>*{width:calc(16.66667% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-6].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-6].has-gutter-l>*{width:calc(16.66667% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-6].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-6].has-gutter-xl>*{width:calc(16.66667% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-7]>*{width:calc(14.28571% - .01px)}[class*=grillade-7].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-7].has-gutter>*{width:calc(14.28571% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-7].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-7].has-gutter-l>*{width:calc(14.28571% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-7].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-7].has-gutter-xl>*{width:calc(14.28571% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-8]>*{width:calc(12.5% - .01px)}[class*=grillade-8].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-8].has-gutter>*{width:calc(12.5% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-8].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-8].has-gutter-l>*{width:calc(12.5% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-8].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-8].has-gutter-xl>*{width:calc(12.5% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-9]>*{width:calc(11.11111% - .01px)}[class*=grillade-9].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-9].has-gutter>*{width:calc(11.11111% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-9].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-9].has-gutter-l>*{width:calc(11.11111% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-9].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-9].has-gutter-xl>*{width:calc(11.11111% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-10]>*{width:calc(10% - .01px)}[class*=grillade-10].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-10].has-gutter>*{width:calc(10% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-10].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-10].has-gutter-l>*{width:calc(10% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-10].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-10].has-gutter-xl>*{width:calc(10% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-11]>*{width:calc(9.09091% - .01px)}[class*=grillade-11].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-11].has-gutter>*{width:calc(9.09091% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-11].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-11].has-gutter-l>*{width:calc(9.09091% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-11].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-11].has-gutter-xl>*{width:calc(9.09091% - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grillade-12]>*{width:calc(8.33333% - .01px)}[class*=grillade-12].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grillade-12].has-gutter>*{width:calc(8.33333% - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grillade-12].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grillade-12].has-gutter-l>*{width:calc(8.33333% - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grillade-12].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grillade-12].has-gutter-xl>*{width:calc(8.33333% - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}[class*=grillade-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;flex-direction:row-reverse}@media (min-width:576px){.full{-webkit-box-flex:0;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;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;flex:0 0 auto;width:calc(33.33333% - .01px)}.has-gutter>.one-third{width:calc(33.33333% - 1rem - .01px)}.has-gutter-l>.one-third{width:calc(33.33333% - 2rem - .01px)}.has-gutter-xl>.one-third{width:calc(33.33333% - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;flex:0 0 auto;width:calc(25% - .01px)}.has-gutter>.one-quarter{width:calc(25% - 1rem - .01px)}.has-gutter-l>.one-quarter{width:calc(25% - 2rem - .01px)}.has-gutter-xl>.one-quarter{width:calc(25% - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;flex:0 0 auto;width:calc(20% - .01px)}.has-gutter>.one-fifth{width:calc(20% - 1rem - .01px)}.has-gutter-l>.one-fifth{width:calc(20% - 2rem - .01px)}.has-gutter-xl>.one-fifth{width:calc(20% - 4rem - .01px)}.one-sixth{-webkit-box-flex:0;flex:0 0 auto;width:calc(16.66667% - .01px)}.has-gutter>.one-sixth{width:calc(16.66667% - 1rem - .01px)}.has-gutter-l>.one-sixth{width:calc(16.66667% - 2rem - .01px)}.has-gutter-xl>.one-sixth{width:calc(16.66667% - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;flex:0 0 auto;width:calc(66.66667% - .01px)}.has-gutter>.two-thirds{width:calc(66.66667% - 1rem - .01px)}.has-gutter-l>.two-thirds{width:calc(66.66667% - 2rem - .01px)}.has-gutter-xl>.two-thirds{width:calc(66.66667% - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;flex:0 0 auto;width:calc(75% - .01px)}.has-gutter>.three-quarters{width:calc(75% - 1rem - .01px)}.has-gutter-l>.three-quarters{width:calc(75% - 2rem - .01px)}.has-gutter-xl>.three-quarters{width:calc(75% - 4rem - .01px)}.five-sixths{-webkit-box-flex:0;flex:0 0 auto;width:calc(83.33333% - .01px)}.has-gutter>.five-sixths{width:calc(83.33333% - 1rem - .01px)}.has-gutter-l>.five-sixths{width:calc(83.33333% - 2rem - .01px)}.has-gutter-xl>.five-sixths{width:calc(83.33333% - 4rem - .01px)}}@media (min-width:576px) and (max-width:767px){[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)}[class*=-small-2]>*{width:calc(50% - .01px)}[class*=-small-2].has-gutter>*{width:calc(50% - 1rem - .01px)}[class*=-small-2].has-gutter-l>*{width:calc(50% - 2rem - .01px)}[class*=-small-2].has-gutter-xl>*{width:calc(50% - 4rem - .01px)}[class*=-small-3]>*{width:calc(33.33333% - .01px)}[class*=-small-3].has-gutter>*{width:calc(33.33333% - 1rem - .01px)}[class*=-small-3].has-gutter-l>*{width:calc(33.33333% - 2rem - .01px)}[class*=-small-3].has-gutter-xl>*{width:calc(33.33333% - 4rem - .01px)}[class*=-small-4]>*{width:calc(25% - .01px)}[class*=-small-4].has-gutter>*{width:calc(25% - 1rem - .01px)}[class*=-small-4].has-gutter-l>*{width:calc(25% - 2rem - .01px)}[class*=-small-4].has-gutter-xl>*{width:calc(25% - 4rem - .01px)}} \ No newline at end of file diff --git a/css/grillade-grid.css b/css/grillade-grid.css index d849a36e..066618ab 100644 --- a/css/grillade-grid.css +++ b/css/grillade-grid.css @@ -1 +1 @@ -@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrid,.grid{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrid.has-gutter,.grid.has-gutter{grid-column-gap:1rem}.autogrid.has-gutter-l,.grid.has-gutter-l{grid-column-gap:2rem}.autogrid.has-gutter-xl,.grid.has-gutter-xl{grid-column-gap:4rem}}[class*=grid-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*=-small-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grid-][class*=-small-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grid-][class*=-small-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grid-][class*=-small-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1} \ No newline at end of file +@media (min-width:480px){[class*=" grillade-"],[class^=grillade-]{display:-ms-grid;display:grid}[class*=" grillade-"].has-gutter,[class^=grillade-].has-gutter{grid-gap:1rem}[class*=" grillade-"].has-gutter-l,[class^=grillade-].has-gutter-l{grid-gap:2rem}[class*=" grillade-"].has-gutter-xl,[class^=grillade-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrillade,.grillade{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrillade.has-gutter,.grillade.has-gutter{grid-column-gap:1rem}.autogrillade.has-gutter-l,.grillade.has-gutter-l{grid-column-gap:2rem}.autogrillade.has-gutter-xl,.grillade.has-gutter-xl{grid-column-gap:4rem}}[class*=grillade-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grillade-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grillade-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grillade-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grillade-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grillade-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grillade-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grillade-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grillade-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grillade-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grillade-12]{-ms-grid-columns:(1fr)[12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:991px){[class*=grillade-][class*=-medium-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-medium-1]{grid-column:auto/span 1}[class*=grillade-][class*=-medium-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-medium-2]{grid-column:auto/span 2}[class*=grillade-][class*=-medium-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-medium-3]{grid-column:auto/span 3}[class*=grillade-][class*=-medium-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-medium-4]{grid-column:auto/span 4}[class*=-medium-all]{grid-column:1/-1}}@media (min-width:480px) and (max-width:767px){[class*=grillade-][class*=-small-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grillade-][class*=-small-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grillade-][class*=-small-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grillade-][class*=-small-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-1}}[class*=-start]{-webkit-box-pack:start;justify-content:start}[class*=-end]{-webkit-box-pack:end;justify-content:end}[class*=-center]{-webkit-box-pack:center;justify-content:center}[class*=-space-between]{-webkit-box-pack:justify;justify-content:space-between}[class*=-space-around]{justify-content:space-around}[class*=-space-evenly]{-webkit-box-pack:space-evenly;justify-content:space-evenly}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1} \ No newline at end of file diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css index 5c7cf376..6af672ba 100644 --- a/css/knacss-unminified.css +++ b/css/knacss-unminified.css @@ -50,8 +50,7 @@ *, *::before, *::after { - -webkit-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; /* 1 */ min-width: 0; /* 2 */ @@ -68,7 +67,6 @@ html { -webkit-tap-highlight-color: transparent; /* 1 */ -webkit-text-size-adjust: 100%; - -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust: 100%; /* 2 */ @@ -227,8 +225,7 @@ label, select, summary, textarea { - -ms-touch-action: manipulation; - touch-action: manipulation; + touch-action: manipulation; } img, @@ -436,7 +433,6 @@ samp { pre { overflow: auto; -moz-tab-size: 2; - -o-tab-size: 2; tab-size: 2; } @@ -546,6 +542,7 @@ figure { @media (max-width: 575px) { body, div, + p, textarea, table, td, @@ -564,9 +561,6 @@ figure { @-ms-viewport { width: device-width; } -@-o-viewport { - width: device-width; -} @viewport { width: device-width; } @@ -588,8 +582,7 @@ svg:not(:root) { @media print { * { background: transparent !important; - -webkit-box-shadow: none !important; - box-shadow: none !important; + box-shadow: none !important; text-shadow: none !important; } body { @@ -681,17 +674,14 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .flex-column-reverse, .d-flex { display: -webkit-box; - display: -ms-flexbox; display: flex; - -ms-flex-wrap: wrap; - flex-wrap: wrap; + flex-wrap: wrap; } .flex-container--row, .flex-row { -webkit-box-orient: horizontal; -webkit-box-direction: normal; - -ms-flex-direction: row; flex-direction: row; } @@ -699,7 +689,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .flex-column { -webkit-box-orient: vertical; -webkit-box-direction: normal; - -ms-flex-direction: column; flex-direction: column; } @@ -707,10 +696,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .flex-row-reverse { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; - -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: end; - -ms-flex-pack: end; justify-content: flex-end; } @@ -718,38 +705,32 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html .flex-column-reverse { -webkit-box-orient: vertical; -webkit-box-direction: reverse; - -ms-flex-direction: column-reverse; flex-direction: column-reverse; -webkit-box-pack: end; - -ms-flex-pack: end; justify-content: flex-end; } .flex-item-fluid, .item-fluid { -webkit-box-flex: 1; - -ms-flex: 1 1 0%; flex: 1 1; } .flex-item-first, .item-first { -webkit-box-ordinal-group: 0; - -ms-flex-order: -1; order: -1; } .flex-item-medium, .item-medium { -webkit-box-ordinal-group: 1; - -ms-flex-order: 0; order: 0; } .flex-item-last, .item-last { -webkit-box-ordinal-group: 2; - -ms-flex-order: 1; order: 1; } @@ -759,2024 +740,2047 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html margin: auto; } -/* ---------------------------------- */ -/* ==Helpers */ -/* ---------------------------------- */ -/* Typo Helpers */ -/* ------------- */ -.u-bold { - font-weight: 700; +/* --------------------------------------- */ +/* ==Grillade : ultra light Grid System */ +/* --------------------------------------- */ +@media (min-width: 480px) { + [class*=" grillade-"], + [class^="grillade-"] { + display: -ms-grid; + display: grid; + } + [class*=" grillade-"].has-gutter, + [class^="grillade-"].has-gutter { + grid-gap: 1rem; + } + [class*=" grillade-"].has-gutter-l, + [class^="grillade-"].has-gutter-l { + grid-gap: 2rem; + } + [class*=" grillade-"].has-gutter-xl, + [class^="grillade-"].has-gutter-xl { + grid-gap: 4rem; + } } -.u-italic { - font-style: italic; +@media (min-width: 480px) { + .autogrillade, + .grillade { + display: -ms-grid; + display: grid; + grid-auto-flow: column; + grid-auto-columns: 1fr; + } + .autogrillade.has-gutter, + .grillade.has-gutter { + grid-column-gap: 1rem; + } + .autogrillade.has-gutter-l, + .grillade.has-gutter-l { + grid-column-gap: 2rem; + } + .autogrillade.has-gutter-xl, + .grillade.has-gutter-xl { + grid-column-gap: 4rem; + } } -.u-normal { - font-weight: normal; - font-style: normal; +[class*="grillade-2"] { + -ms-grid-columns: (1fr)[2]; + grid-template-columns: repeat(2, 1fr); } -.u-uppercase { - text-transform: uppercase; +[class*="grillade-3"] { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); } -.u-lowercase { - text-transform: lowercase; +[class*="grillade-4"] { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); } -.u-smaller { - font-size: 0.6em; +[class*="grillade-5"] { + -ms-grid-columns: (1fr)[5]; + grid-template-columns: repeat(5, 1fr); } -.u-small { - font-size: 0.8em; +[class*="grillade-6"] { + -ms-grid-columns: (1fr)[6]; + grid-template-columns: repeat(6, 1fr); } -.u-big { - font-size: 1.2em; +[class*="grillade-7"] { + -ms-grid-columns: (1fr)[7]; + grid-template-columns: repeat(7, 1fr); } -.u-bigger { - font-size: 1.5em; +[class*="grillade-8"] { + -ms-grid-columns: (1fr)[8]; + grid-template-columns: repeat(8, 1fr); } -.u-biggest { - font-size: 2em; +[class*="grillade-9"] { + -ms-grid-columns: (1fr)[9]; + grid-template-columns: repeat(9, 1fr); } -.u-txt-wrap { - word-wrap: break-word; - overflow-wrap: break-word; - -webkit-hyphens: auto; - -ms-hyphens: auto; - hyphens: auto; +[class*="grillade-10"] { + -ms-grid-columns: (1fr)[10]; + grid-template-columns: repeat(10, 1fr); } -.u-txt-ellipsis { - white-space: nowrap; - text-overflow: ellipsis; +[class*="grillade-11"] { + -ms-grid-columns: (1fr)[11]; + grid-template-columns: repeat(11, 1fr); } -/* text and contents alignment */ -.txtleft, -.u-txt-left { - text-align: left; +[class*="grillade-12"] { + -ms-grid-columns: (1fr)[12]; + grid-template-columns: repeat(12, 1fr); } -.txtright, -.u-txt-right { - text-align: right; +[class*="col-1"] { + grid-column: auto/span 1; } -.txtcenter, -.u-txt-center { - text-align: center; +[class*="row-1"] { + grid-row: auto/span 1; } -/* blocks that need to be placed under floats */ -.clear, -.u-clear { - clear: both; +[class*="col-2"] { + grid-column: auto/span 2; } -/* blocks that must contain floats */ -.clearfix::after, -.u-clearfix::after { - content: ""; - display: table; - clear: both; - border-collapse: collapse; +[class*="row-2"] { + grid-row: auto/span 2; } -/* simple blocks alignment */ -.left .u-left { - margin-right: auto; +[class*="col-3"] { + grid-column: auto/span 3; } -.right, -.u-right { - margin-left: auto; +[class*="row-3"] { + grid-row: auto/span 3; } -.center, -.u-center { - margin-left: auto; - margin-right: auto; +[class*="col-4"] { + grid-column: auto/span 4; } -/* Global Micro Layout */ -/* ------------------- */ -/* module, gains superpower "BFC" Block Formating Context */ -.mod, -.u-mod, -.bfc, -.u-bfc { - overflow: hidden; +[class*="row-4"] { + grid-row: auto/span 4; } -/* floating elements */ -.fl, -.u-fl { - float: left; +[class*="col-5"] { + grid-column: auto/span 5; } -img.fl, -img.u-fl { - margin-right: 1rem; +[class*="row-5"] { + grid-row: auto/span 5; } -.fr, -.u-fr { - float: right; +[class*="col-6"] { + grid-column: auto/span 6; } -img.fr, -img.u-fr { - margin-left: 1rem; +[class*="row-6"] { + grid-row: auto/span 6; } -img.fl, -img.fr, -img.u-fl, -img.u-fr { - margin-bottom: 0.5rem; +[class*="col-7"] { + grid-column: auto/span 7; } -/* inline-block */ -.inbl, -.u-inbl { - display: inline-block; - vertical-align: top; +[class*="row-7"] { + grid-row: auto/span 7; } -/* State Helpers */ -/* ------------- */ -/* invisible for all */ -.is-hidden, -.js-hidden, -[hidden] { - display: none; +[class*="col-8"] { + grid-column: auto/span 8; } -/* hidden but not for an assistive technology like a screen reader, Yahoo! method */ -.visually-hidden, .tabs-content-item[aria-hidden="true"] { - 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; +[class*="row-8"] { + grid-row: auto/span 8; } -.is-disabled, -.js-disabled, -[disabled], -.is-disabled ~ label, -[disabled] ~ label { - opacity: 0.5; - cursor: not-allowed !important; - -webkit-filter: grayscale(1); - filter: grayscale(1); +[class*="col-9"] { + grid-column: auto/span 9; } -ul.is-unstyled, ul.unstyled { - list-style: none; - padding-left: 0; +[class*="row-9"] { + grid-row: auto/span 9; } -.color--inverse { - color: #fff; +[class*="col-10"] { + grid-column: auto/span 10; } -/* Width Helpers */ -/* ------------- */ -/* blocks widths (percentage and pixels) */ -.w100 { - width: 100%; +[class*="row-10"] { + grid-row: auto/span 10; } -.w95 { - width: 95%; +[class*="col-11"] { + grid-column: auto/span 11; } -.w90 { - width: 90%; +[class*="row-11"] { + grid-row: auto/span 11; } -.w85 { - width: 85%; +[class*="col-12"] { + grid-column: auto/span 12; } -.w80 { - width: 80%; +[class*="row-12"] { + grid-row: auto/span 12; } -.w75 { - width: 75%; +/* medium intermediate breakpoints */ +@media (min-width: 480px) and (max-width: 991px) { + [class*="grillade-"][class*="-medium-1"] { + -ms-grid-columns: (1fr)[1]; + grid-template-columns: repeat(1, 1fr); + } + [class*="col-"][class*="-medium-1"] { + grid-column: auto/span 1; + } + [class*="grillade-"][class*="-medium-2"] { + -ms-grid-columns: (1fr)[2]; + grid-template-columns: repeat(2, 1fr); + } + [class*="col-"][class*="-medium-2"] { + grid-column: auto/span 2; + } + [class*="grillade-"][class*="-medium-3"] { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); + } + [class*="col-"][class*="-medium-3"] { + grid-column: auto/span 3; + } + [class*="grillade-"][class*="-medium-4"] { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); + } + [class*="col-"][class*="-medium-4"] { + grid-column: auto/span 4; + } + [class*="-medium-all"] { + grid-column: 1 / -1; + } } -.w70 { - width: 70%; +/* small intermediate breakpoints */ +@media (min-width: 480px) and (max-width: 767px) { + [class*="grillade-"][class*="-small-1"] { + -ms-grid-columns: (1fr)[1]; + grid-template-columns: repeat(1, 1fr); + } + [class*="col-"][class*="-small-1"] { + grid-column: auto/span 1; + } + [class*="grillade-"][class*="-small-2"] { + -ms-grid-columns: (1fr)[2]; + grid-template-columns: repeat(2, 1fr); + } + [class*="col-"][class*="-small-2"] { + grid-column: auto/span 2; + } + [class*="grillade-"][class*="-small-3"] { + -ms-grid-columns: (1fr)[3]; + grid-template-columns: repeat(3, 1fr); + } + [class*="col-"][class*="-small-3"] { + grid-column: auto/span 3; + } + [class*="grillade-"][class*="-small-4"] { + -ms-grid-columns: (1fr)[4]; + grid-template-columns: repeat(4, 1fr); + } + [class*="col-"][class*="-small-4"] { + grid-column: auto/span 4; + } + [class*="-small-all"] { + grid-column: 1 / -1; + } } -.w65 { - width: 65%; +[class*="-start"] { + -webkit-box-pack: start; + justify-content: start; } -.w60 { - width: 60%; +[class*="-end"] { + -webkit-box-pack: end; + justify-content: end; } -.w55 { - width: 55%; +[class*="-center"] { + -webkit-box-pack: center; + justify-content: center; } -.w50 { - width: 50%; +[class*="-space-between"] { + -webkit-box-pack: justify; + justify-content: space-between; } -.w45 { - width: 45%; +[class*="-space-around"] { + justify-content: space-around; } -.w40 { - width: 40%; +[class*="-space-evenly"] { + -webkit-box-pack: space-evenly; + justify-content: space-evenly; } -.w35 { - width: 35%; +.item-first { + -webkit-box-ordinal-group: 0; + order: -1; } -.w30 { - width: 30%; +.item-last { + -webkit-box-ordinal-group: 2; + order: 1; } -.w25 { - width: 25%; +.grid-offset { + visibility: hidden; } -.w20 { - width: 20%; +.col-all { + grid-column: 1 / -1; } -.w15 { - width: 15%; +.row-all { + grid-row: 1 / -1; } -.w10 { - width: 10%; +/* ----------------------------- */ +/* ==Alerts */ +/* ----------------------------- */ +/* use .alert-- classes for variants */ +.alert, .alert--primary, .alert--success, .alert--info, .alert--warning, .alert--danger, .alert--inverse, .alert--ghost { + padding: 1rem 1rem; + margin-top: 0.75em; + margin-bottom: 0; + color: #212529; + border-radius: 0; + background-color: #e7e9ed; } -.w5 { - width: 5%; +.alert a, .alert--primary a, .alert--success a, .alert--info a, .alert--warning a, .alert--danger a, .alert--inverse a, .alert--ghost a { + color: inherit; + text-decoration: underline; } -.w66 { - width: calc(100% / 3 * 2); +.alert--primary { + background-color: #0275D8; + color: #fff; + box-shadow: none; } -.w33 { - width: calc(100% / 3); +.alert--success { + background-color: #5CB85C; + color: #fff; + box-shadow: none; } -.wauto { - width: auto; +.alert--info { + background-color: #5BC0DE; + color: #000; + box-shadow: none; } -.w960p { - width: 960px; +.alert--warning { + background-color: #F0AD4E; + color: #000; + box-shadow: none; } -.mw960p { - max-width: 960px; +.alert--danger { + background-color: #D9534F; + color: #fff; + box-shadow: none; } -.w1140p { - width: 1140px; +.alert--inverse { + background-color: #333; + color: #fff; + box-shadow: none; } -.mw1140p { - max-width: 1140px; +.alert--ghost { + background-color: transparent; + color: #fff; + box-shadow: 0 0 0 1px #fff inset; } -.w1000p { - width: 1000px; +.alert--small { + font-size: 1.2rem; } -.w950p { - width: 950px; +.alert--big { + font-size: 2rem; } -.w900p { - width: 900px; +.alert--block { + width: 100% !important; + display: block; } -.w850p { - width: 850px; +.alert.disabled, .disabled.alert--primary, .disabled.alert--success, .disabled.alert--info, .disabled.alert--warning, .disabled.alert--danger, .disabled.alert--inverse, .disabled.alert--ghost, .alert--disabled { + opacity: 0.5; + cursor: not-allowed; } -.w800p { - width: 800px; +.alert:empty, .alert--primary:empty, .alert--success:empty, .alert--info:empty, .alert--warning:empty, .alert--danger:empty, .alert--inverse:empty, .alert--ghost:empty { + display: none; } -.w750p { - width: 750px; +/* ----------------------------- */ +/* ==Arrows */ +/* ----------------------------- */ +/* see https://knacss.com/styleguide.html#arrows */ +[class*="icon-arrow--"] { + vertical-align: middle; } -.w700p { - width: 700px; +[class*="icon-arrow--"]::after { + content: ""; + display: inline-block; + width: 1em; + height: 1em; + -webkit-mask-size: cover; + mask-size: cover; + background-color: #000; + line-height: 1; } -.w650p { - width: 650px; +.icon-arrow--down::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); } -.w600p { - width: 600px; +.icon-arrow--up::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); } -.w550p { - width: 550px; +.icon-arrow--right::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); } -.w500p { - width: 500px; +.icon-arrow--left::after { + -webkit-mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); + mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E"); } -.w450p { - width: 450px; +/* ----------------------------- */ +/* ==Badges */ +/* ----------------------------- */ +/* use .badge-- classes for variants */ +.badge, .badge--primary, .badge--success, .badge--info, .badge--warning, .badge--danger, .badge--inverse, .badge--ghost { + display: inline-block; + padding: 0.5rem; + border-radius: 50%; + color: #212529; + background-color: #e7e9ed; + line-height: 1; } -.w400p { - width: 400px; +.badge::before, .badge--primary::before, .badge--success::before, .badge--info::before, .badge--warning::before, .badge--danger::before, .badge--inverse::before, .badge--ghost::before { + content: ""; + display: inline-block; + vertical-align: middle; + padding-top: 100%; } -.w350p { - width: 350px; +.badge--primary { + background-color: #0275D8; + color: #fff; } -.w300p { - width: 300px; +.badge--success { + background-color: #5CB85C; + color: #fff; } -.w250p { - width: 250px; +.badge--info { + background-color: #5BC0DE; + color: #000; } -.w200p { - width: 200px; +.badge--warning { + background-color: #F0AD4E; + color: #000; } -.w150p { - width: 150px; -} - -.w100p { - width: 100px; -} - -.w50p { - width: 50px; +.badge--danger { + background-color: #D9534F; + color: #fff; } -/* Spacing Helpers */ -/* --------------- */ -.man, -.ma0 { - margin: 0; +.badge--inverse { + background-color: #333; + color: #fff; } -.pan, -.pa0 { - padding: 0; +.badge--ghost { + background-color: transparent; + color: #fff; } -.mas { - margin: 1rem; +.badge--small { + font-size: 1.2rem; } -.mam { - margin: 2rem; +.badge--big { + font-size: 2rem; } -.mal { - margin: 4rem; +.badge.disabled, .disabled.badge--primary, .disabled.badge--success, .disabled.badge--info, .disabled.badge--warning, .disabled.badge--danger, .disabled.badge--inverse, .disabled.badge--ghost, .badge--disabled { + opacity: 0.5; + cursor: not-allowed; } -.pas { - padding: 1rem; +.badge:empty, .badge--primary:empty, .badge--success:empty, .badge--info:empty, .badge--warning:empty, .badge--danger:empty, .badge--inverse:empty, .badge--ghost:empty { + display: none; } -.pam { - padding: 2rem; +/* ----------------------------- */ +/* ==Buttons styling */ +/* ----------------------------- */ +/* preferably use