From 4a5dd0f5bd7e90fe4e7f01eb2f776905659ff670 Mon Sep 17 00:00:00 2001 From: Raphael Goetter Date: Fri, 12 Feb 2016 16:23:20 +0100 Subject: [PATCH] =?UTF-8?q?mise=20=C3=A0=20jour=20du=20gulpfile=20pour=20g?= =?UTF-8?q?rillade.css?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 14 +-- css/grillade.css | 254 +---------------------------------------- css/grillade.scss | 270 -------------------------------------------- doc/00-commencer.md | 14 +-- gulpfile.js | 8 +- 5 files changed, 14 insertions(+), 546 deletions(-) delete mode 100644 css/grillade.scss diff --git a/README.md b/README.md index c9b86eb..b20c88e 100644 --- a/README.md +++ b/README.md @@ -45,23 +45,21 @@ Seules exceptions : KNACSS en version complète ne vous convient pas ? Seule la grille flexbox vous intéresse ? Bienvenue dans *Grillade* ! -### votre grillade avec LESS ou Sass ? +### votre grillade avec LESS ? Il est possible de n'utiliser KNACSS que pour sa fonctionnalité de grille de positionnement et de bénéficier de colonnes égales, inégales, responsive, des offsets, des pull et push et des mises en exergue. Bref, de [tout l'attirail des grilles KNACSS](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md). -Il vous suffit pour cela de récupérer l'un ou l'autre fichier selon votre choix de préprocesseur : -- [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less) -- [grillade.scss](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.scss) +Il vous suffit pour cela de récupérer le fichier suivant : [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less) -Ces fichiers ne sont rien d'autre que la concaténation de deux fichiers essentiels : -- `_00-config.less|scss` (nécessaire pour les variables, les tailles de gouttières et les valeurs de breakpoints) -- `_03-grids.less|scss` (ben oui, quand même) +Ce fichier n'est rien d'autre que la concaténation de deux fichiers essentiels : +- `_00-config.less` (nécessaire pour les variables, les tailles de gouttières et les valeurs de breakpoints) +- `_03-grids.less` (ben oui, quand même) ### votre grillade plutôt nature ? Vous souhaitez simplement bénéficier d'une grille de mise en page simple mais fonctionnelle, en pur CSS sans passer par LESS ou Sass ? -Alors contentez-vous du fichier grillade.css, il ne pèse que 4.2ko seulement ! +Alors contentez-vous du fichier grillade.css, il est parfaitement autonome et ne pèse que 4ko seulement ! Par contre, n'oubliez quand même pas de lire [la documentation](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md) que l'on a concoctée rien que pour vous. diff --git a/css/grillade.css b/css/grillade.css index 833a12d..c5b59af 100644 --- a/css/grillade.css +++ b/css/grillade.css @@ -1,256 +1,4 @@ /*! * www.KNACSS.com V4.4.4 (23 janvier 2016) @author: Raphael Goetter, Alsacreations * Licence WTFPL http://www.wtfpl.net/ -*/ -/* ---------------------------------- */ -/* ==Grillade */ -/* ---------------------------------- */ -/* grid container */ -/* line 93, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-"] { - display: flex; - flex-direction: row; - flex-wrap: wrap; - margin-left: -2rem; - /* inline-block fallback for IE9 generation */ - letter-spacing: -0.31em; } - -/* grid childs */ -/* line 104, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-"] > * { - box-sizing: border-box; - flex: 0 0 auto; - width: calc(100% * 1 / 4 - 2rem - .01px); - min-width: 0; - margin-left: 2rem; - /* inline-block fallback for IE9 generation */ - display: inline-block; - vertical-align: top; - letter-spacing: normal; } - -/* line 120, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); } - -/* line 122, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-2"] > .flex-item-double { - width: calc(100% * 2 / 2 - 2rem); } - -/* line 120, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-3"] > * { - width: calc(100% * 1 / 3 - 2rem - .01px); } - -/* line 122, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-3"] > .flex-item-double { - width: calc(100% * 2 / 3 - 2rem); } - -/* line 120, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-4"] > * { - width: calc(100% * 1 / 4 - 2rem - .01px); } - -/* line 122, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-4"] > .flex-item-double { - width: calc(100% * 2 / 4 - 2rem); } - -/* line 120, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-5"] > * { - width: calc(100% * 1 / 5 - 2rem - .01px); } - -/* line 122, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-5"] > .flex-item-double { - width: calc(100% * 2 / 5 - 2rem); } - -/* line 120, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-6"] > * { - width: calc(100% * 1 / 6 - 2rem - .01px); } - -/* line 122, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-6"] > .flex-item-double { - width: calc(100% * 2 / 6 - 2rem); } - -/* line 120, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-7"] > * { - width: calc(100% * 1 / 7 - 2rem - .01px); } - -/* line 122, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-7"] > .flex-item-double { - width: calc(100% * 2 / 7 - 2rem); } - -/* line 120, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-8"] > * { - width: calc(100% * 1 / 8 - 2rem - .01px); } - -/* line 122, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-8"] > .flex-item-double { - width: calc(100% * 2 / 8 - 2rem); } - -/* line 120, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-10"] > * { - width: calc(100% * 1 / 10 - 2rem - .01px); } - -/* line 122, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-10"] > .flex-item-double { - width: calc(100% * 2 / 10 - 2rem); } - -/* line 120, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-12"] > * { - width: calc(100% * 1 / 12 - 2rem - .01px); } - -/* line 122, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -[class*="grid-12"] > .flex-item-double { - width: calc(100% * 2 / 12 - 2rem); } - -/* Responsive grid */ -@media (max-width: 640px) { - /* line 170, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-small-4"] > * { - width: calc(100% * 1 / 4 - 2rem - .01px); } - /* line 173, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-small-4"] > .flex-item-double { - width: calc(100% * 1 / 2 - 2rem - .01px); } - /* line 176, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-small-3"] > * { - width: calc(100% * 1 / 3 - 2rem - .01px); } - /* line 179, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-small-3"] > .flex-item-double { - width: calc(100% * 2 / 3 - 2rem - .01px); } - /* line 182, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-small-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); } - /* line 185, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-small-2"] > .flex-item-double { - width: calc(100% - 2rem - .01px); } - /* line 188, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-small-1"] > * { - width: calc(100% - 2rem - .01px); } - /* line 191, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-small-1"] > .flex-item-double { - width: calc(100% - 2rem - .01px); } } - -@media (max-width: 320px) { - /* line 198, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-tiny-2"] > * { - width: calc(100% * 1 / 2 - 2rem - .01px); } - /* line 201, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-tiny-2"] > .flex-item-double { - width: calc(100% - 2rem - .01px); } - /* line 204, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-tiny-1"] > * { - width: calc(100% - 2rem - .01px); } - /* line 207, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - [class*="-tiny-1"] > .flex-item-double { - width: calc(100% - 2rem - .01px); } } - -/* line 215, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-2-1 > *:nth-child(odd) { - width: calc(66.66667% - 2rem); } - -/* line 219, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-2-1 > *:nth-child(even) { - width: calc(33.33333% - 2rem); } - -@media (max-width: 640px) { - /* line 224, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - .grid-2-1 > *:nth-child(n) { - width: calc(100% - 2rem); } } - -/* line 215, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-1-2 > *:nth-child(odd) { - width: calc(33.33333% - 2rem); } - -/* line 219, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-1-2 > *:nth-child(even) { - width: calc(66.66667% - 2rem); } - -@media (max-width: 640px) { - /* line 224, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - .grid-1-2 > *:nth-child(n) { - width: calc(100% - 2rem); } } - -/* line 215, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-3-1 > *:nth-child(odd) { - width: calc(75% - 2rem); } - -/* line 219, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-3-1 > *:nth-child(even) { - width: calc(25% - 2rem); } - -@media (max-width: 640px) { - /* line 224, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - .grid-3-1 > *:nth-child(n) { - width: calc(100% - 2rem); } } - -/* line 215, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-1-3 > *:nth-child(odd) { - width: calc(25% - 2rem); } - -/* line 219, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-1-3 > *:nth-child(even) { - width: calc(75% - 2rem); } - -@media (max-width: 640px) { - /* line 224, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - .grid-1-3 > *:nth-child(n) { - width: calc(100% - 2rem); } } - -/* line 215, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-3-2 > *:nth-child(odd) { - width: calc(60% - 2rem); } - -/* line 219, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-3-2 > *:nth-child(even) { - width: calc(40% - 2rem); } - -@media (max-width: 640px) { - /* line 224, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - .grid-3-2 > *:nth-child(n) { - width: calc(100% - 2rem); } } - -/* line 215, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-2-3 > *:nth-child(odd) { - width: calc(40% - 2rem); } - -/* line 219, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-2-3 > *:nth-child(even) { - width: calc(60% - 2rem); } - -@media (max-width: 640px) { - /* line 224, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - .grid-2-3 > *:nth-child(n) { - width: calc(100% - 2rem); } } - -/* line 215, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-4-1 > *:nth-child(odd) { - width: calc(80% - 2rem); } - -/* line 219, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-4-1 > *:nth-child(even) { - width: calc(20% - 2rem); } - -@media (max-width: 640px) { - /* line 224, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - .grid-4-1 > *:nth-child(n) { - width: calc(100% - 2rem); } } - -/* line 215, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-1-4 > *:nth-child(odd) { - width: calc(20% - 2rem); } - -/* line 219, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.grid-1-4 > *:nth-child(even) { - width: calc(80% - 2rem); } - -@media (max-width: 640px) { - /* line 224, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ - .grid-1-4 > *:nth-child(n) { - width: calc(100% - 2rem); } } - -/* line 261, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.pull { - margin-right: auto; } - -/* line 265, /Users/raphael/Documents/GitHub/KNACSS/css/grillade.scss */ -.push { - margin-left: auto; } - -/*# sourceMappingURL=grillade.css.map */ \ No newline at end of file +*/[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;letter-spacing:-.31em}[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% * 1 / 4 - 2rem - .01px);min-width:0;margin-left:2rem;display:inline-block;vertical-align:top;letter-spacing:normal}[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.flex-item-double{width:calc(100% * 2 / 2 - 2rem - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.flex-item-double{width:calc(100% * 2 / 4 - 2rem - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.flex-item-double{width:calc(100% * 2 / 5 - 2rem - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.flex-item-double{width:calc(100% * 2 / 6 - 2rem - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.flex-item-double{width:calc(100% * 2 / 7 - 2rem - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.flex-item-double{width:calc(100% * 2 / 8 - 2rem - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.flex-item-double{width:calc(100% * 2 / 10 - 2rem - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.flex-item-double{width:calc(100% * 2 / 12 - 2rem - .01px)}@media (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.flex-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.flex-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.flex-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}@media (max-width:320px){[class*="-tiny-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-tiny-2"]>.flex-item-double,[class*="-tiny-1"]>*,[class*="-tiny-1"]>.flex-item-double{width:calc(100% - 2rem - .01px)}}.grid-2-1>:nth-child(odd){width:calc(66.66666666666666% - 2rem - .01px)}.grid-2-1>:nth-child(even){width:calc(33.33333333333333% - 2rem - .01px)}@media (max-width:640px){.grid-2-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-2>:nth-child(odd){width:calc(33.33333333333333% - 2rem - .01px)}.grid-1-2>:nth-child(even){width:calc(66.66666666666666% - 2rem - .01px)}@media (max-width:640px){.grid-1-2>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-3-1>:nth-child(odd){width:calc(75% - 2rem - .01px)}.grid-3-1>:nth-child(even){width:calc(25% - 2rem - .01px)}@media (max-width:640px){.grid-3-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-3>:nth-child(odd){width:calc(25% - 2rem - .01px)}.grid-1-3>:nth-child(even){width:calc(75% - 2rem - .01px)}@media (max-width:640px){.grid-1-3>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-3-2>:nth-child(odd){width:calc(60% - 2rem - .01px)}.grid-3-2>:nth-child(even){width:calc(40% - 2rem - .01px)}@media (max-width:640px){.grid-3-2>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-2-3>:nth-child(odd){width:calc(40% - 2rem - .01px)}.grid-2-3>:nth-child(even){width:calc(60% - 2rem - .01px)}@media (max-width:640px){.grid-2-3>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-4-1>:nth-child(odd){width:calc(80% - 2rem - .01px)}.grid-4-1>:nth-child(even){width:calc(20% - 2rem - .01px)}@media (max-width:640px){.grid-4-1>:nth-child(n){width:calc(100% - 2rem - .01px)}}.grid-1-4>:nth-child(odd){width:calc(20% - 2rem - .01px)}.grid-1-4>:nth-child(even){width:calc(80% - 2rem - .01px)}@media (max-width:640px){.grid-1-4>:nth-child(n){width:calc(100% - 2rem - .01px)}}.pull{margin-right:auto}.push{margin-left:auto} \ No newline at end of file diff --git a/css/grillade.scss b/css/grillade.scss deleted file mode 100644 index 84bdcc4..0000000 --- a/css/grillade.scss +++ /dev/null @@ -1,270 +0,0 @@ -/*! -* www.KNACSS.com V4.4.4 (23 janvier 2016) @author: Raphael Goetter, Alsacreations -* Licence WTFPL http://www.wtfpl.net/ -*/ - -// 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 -$primary-color : #000 !default; // text color on primary elements -$secondary-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 -$primary-background : #fff !default; // primary elements background color -$secondary-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 (choose unit you prefer) -$tiny-screen : 320px !default; // tiny screens media query (less-equal than 320px) -$tiny-plus-screen : 480px !default; // screens between 321px and 480px -$small-screen : 640px !default; // screens between 481px and 640px -$small-plus-screen : 768px !default; // screens between 641px and 768px -$medium-screen : 960px !default; // screens between 769px and 960px -$medium-plus-screen : 1024px !default; // screens between 961px and 1024px -$large-screen : 1280px !default; // screens between 1025px and 1280px -$large-plus-screen : 1440px !default; // screens between 1281px and 1440px -$extra-large-screen : 1600px !default; // screens between 1441px and 1600px -$ultra-large-screen : 1920px !default; // ultra large screens - -// grids variables (choose unit you prefer) -$gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem -$number: 4 !default; // number of equal columns -$left: 2 !default; // left side of uneven columns -$right: 1 !default; // right side of uneven columns - -//kna-namespace (default : null) -$kna-namespace: null !default; - -/* ---------------------------------- */ -/* ==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: -$gutter; - - /* inline-block fallback for IE9 generation */ - letter-spacing: -0.31em; -} - -/* grid childs */ -[class*="#{$kna-namespace}grid-"] > * { - box-sizing: border-box; - flex: 0 0 auto; - width: calc(100% * 1 / #{$number} - #{$gutter} - .01px); - min-width: 0; - margin-left: $gutter; - - /* inline-block fallback for IE9 generation */ - display: inline-block; - vertical-align: top; - letter-spacing: normal; -} - -// Sass mixins for *equal* columns grid container -// example : .grid-perso { @include grid(12); } -@mixin grid($number:$number,$gutter:$gutter) { - & > * { - width: calc(100% * 1 / #{$number} - #{$gutter} - .01px); - } - & > .#{$kna-namespace}flex-item-double { - width: calc(100% * 2 / #{$number} - #{$gutter}); - } -} - -// Examples : will be compiled in CSS - -[class*="#{$kna-namespace}grid-2"] { - @include grid(2); -} - -[class*="#{$kna-namespace}grid-3"] { - @include grid(3); -} - -[class*="#{$kna-namespace}grid-4"] { - @include grid(4); -} - -[class*="#{$kna-namespace}grid-5"] { - @include grid(5); -} - -[class*="#{$kna-namespace}grid-6"] { - @include grid(6); -} - -[class*="#{$kna-namespace}grid-7"] { - @include grid(7); -} - -[class*="#{$kna-namespace}grid-8"] { - @include grid(8); -} - -[class*="#{$kna-namespace}grid-10"] { - @include grid(10); -} - -[class*="#{$kna-namespace}grid-12"] { - @include grid(12); -} - -/* Responsive grid */ -// "small-2" = 2 columns when small screen -// example : .grid-4-small-2 will be 4 then 2 columns -@media (max-width: $small-screen) { - [class*="-small-4"] > * { - width: calc(100% * 1 / 4 - #{$gutter} - .01px); - } - [class*="-small-4"] > .flex-item-double { - width: calc(100% * 1 / 2 - #{$gutter} - .01px); - } - [class*="-small-3"] > * { - width: calc(100% * 1 / 3 - #{$gutter} - .01px); - } - [class*="-small-3"] > .flex-item-double { - width: calc(100% * 2 / 3 - #{$gutter} - .01px); - } - [class*="-small-2"] > * { - width: calc(100% * 1 / 2 - #{$gutter} - .01px); - } - [class*="-small-2"] > .flex-item-double { - width: calc(100% - #{$gutter} - .01px); - } - [class*="-small-1"] > * { - width: calc(100% - #{$gutter} - .01px); - } - [class*="-small-1"] > .flex-item-double { - width: calc(100% - #{$gutter} - .01px); - } -} -// "tiny-1" = 1 column when tiny screen -// example : .grid-4-small-2-tiny-1 will be 4 then 2 columns then 1 column -@media (max-width: $tiny-screen) { - [class*="-tiny-2"] > * { - width: calc(100% * 1 / 2 - #{$gutter} - .01px); - } - [class*="-tiny-2"] > .flex-item-double { - width: calc(100% - #{$gutter} - .01px); - } - [class*="-tiny-1"] > * { - width: calc(100% - #{$gutter} - .01px); - } - [class*="-tiny-1"] > .flex-item-double { - width: calc(100% - #{$gutter} - .01px); - } -} - -// Sass mixins for *unequal* columns grid container -// example : .grid-perso { @include uneven-grid(2, 1); } -@mixin uneven-grid($left:$left, $right:$right, $gutter:$gutter) { - & > *:nth-child(odd) { - $size: ($left / ($left + $right)) * 100%; - width: calc(#{$size} - #{$gutter}); - } - & > *:nth-child(even) { - $size: ($right / ($left + $right)) * 100%; - width: calc(#{$size} - #{$gutter}); - } - @media (max-width: $small-screen) { - & > *:nth-child(n) { - width: calc(100% - #{$gutter}); - } - } -} - - -// 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 { - margin-left: auto; -} diff --git a/doc/00-commencer.md b/doc/00-commencer.md index f4d2d4e..be61daa 100644 --- a/doc/00-commencer.md +++ b/doc/00-commencer.md @@ -51,23 +51,21 @@ Sachez qu'un [pense-bête en PDF](http://knacss.com/KNACSS-cheatsheet.pdf) est KNACSS en version complète ne vous convient pas ? Seule la grille flexbox vous intéresse ? Bienvenue dans *Grillade* ! -### votre grillade avec LESS ou Sass ? +### votre grillade avec LESS ? Il est possible de n'utiliser KNACSS que pour sa fonctionnalité de grille de positionnement et de bénéficier de colonnes égales, inégales, responsive, des offsets, des pull et push et des mises en exergue. Bref, de [tout l'attirail des grilles KNACSS](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md). -Il vous suffit pour cela de récupérer l'un ou l'autre fichier selon votre choix de préprocesseur : -- [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less) -- [grillade.scss](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.scss) +Il vous suffit pour cela de récupérer le fichier suivant : [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less) -Ces fichiers ne sont rien d'autre que la concaténation de deux fichiers essentiels : -- `_00-config.less|scss` (nécessaire pour les variables, les tailles de gouttières et les valeurs de breakpoints) -- `_03-grids.less|scss` (ben oui, quand même) +Ce fichier n'est rien d'autre que la concaténation de deux fichiers essentiels : +- `_00-config.less` (nécessaire pour les variables, les tailles de gouttières et les valeurs de breakpoints) +- `_03-grids.less` (ben oui, quand même) ### votre grillade plutôt nature ? Vous souhaitez simplement bénéficier d'une grille de mise en page simple mais fonctionnelle, en pur CSS sans passer par LESS ou Sass ? -Alors contentez-vous du fichier grillade.css, il ne pèse que 4.2ko seulement ! +Alors contentez-vous du fichier grillade.css, il est parfaitement autonome et ne pèse que 4ko seulement ! Par contre, n'oubliez quand même pas de lire [la documentation](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md) que l'on a concoctée rien que pour vous. diff --git a/gulpfile.js b/gulpfile.js index 97ae8d9..1c375cd 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -24,7 +24,7 @@ gulp.task('css', function () { .pipe(gulp.dest('./css/')); }); -gulp.task('grillade-less', function() { +gulp.task('grillade', function() { return gulp.src(['./less/_00-config.less', './less/_03-grids.less']) .pipe(concat('grillade.less')) .pipe(gulp.dest('./css/')) @@ -33,17 +33,11 @@ gulp.task('grillade-less', function() { .pipe(minifycss()) .pipe(gulp.dest('./css/')); }); -gulp.task('grillade-sass', function() { - return gulp.src(['./sass/_00-config.scss', './sass/_03-grids.scss']) - .pipe(concat('grillade.scss')) - .pipe(gulp.dest('./css/')); -}); // Watcher gulp.task('watch', function() { gulp.watch(['./less/*.less'], ['css']); }); -gulp.task('grillade', ['grillade-less', 'grillade-sass']); gulp.task('default', ['css']);