dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

mise à jour du gulpfile pour grillade.css

Browse source
This commit is contained in:
Raphael Goetter 2016-02-12 16:23:20 +01:00
parent c6fd1278eb
commit 4a5dd0f5bd
5 changed files with 14 additions and 546 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
README.md
View file

@ -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* ! 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 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 : Il vous suffit pour cela de récupérer le fichier suivant : [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less)
- [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less)
- [grillade.scss](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.scss)
Ces fichiers ne sont rien d'autre que la concaténation de deux fichiers essentiels : Ce fichier n'est 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) - `_00-config.less` (nécessaire pour les variables, les tailles de gouttières et les valeurs de breakpoints)
- `_03-grids.less|scss` (ben oui, quand même) - `_03-grids.less` (ben oui, quand même)
### votre grillade plutôt nature ? ### 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 ? 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 <a href="https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css"><strong>grillade.css</strong></a>, il ne pèse que 4.2ko seulement&nbsp;! Alors contentez-vous du fichier <a href="https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css"><strong>grillade.css</strong></a>, il est parfaitement autonome et ne pèse que 4ko seulement&nbsp;!
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. 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.

254
css/grillade.css
View file

@ -1,256 +1,4 @@
/*! /*!
* www.KNACSS.com V4.4.4 (23 janvier 2016) @author: Raphael Goetter, Alsacreations * www.KNACSS.com V4.4.4 (23 janvier 2016) @author: Raphael Goetter, Alsacreations
* Licence WTFPL http://www.wtfpl.net/ * Licence WTFPL http://www.wtfpl.net/
*/ */[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}
/* ---------------------------------- */
/* ==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 */

270
css/grillade.scss
View file

@ -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:
// - <div class="grid-4"> for an equal fourth columns grid container
// - <div class="grid-2-1"> 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;
}

14
doc/00-commencer.md
View file

@ -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&nbsp;? Seule la grille flexbox vous intéresse&nbsp;? Bienvenue dans *Grillade* ! KNACSS en version complète ne vous convient pas&nbsp;? Seule la grille flexbox vous intéresse&nbsp;? 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 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 : Il vous suffit pour cela de récupérer le fichier suivant : [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less)
- [grillade.less](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.less)
- [grillade.scss](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.scss)
Ces fichiers ne sont rien d'autre que la concaténation de deux fichiers essentiels : Ce fichier n'est 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) - `_00-config.less` (nécessaire pour les variables, les tailles de gouttières et les valeurs de breakpoints)
- `_03-grids.less|scss` (ben oui, quand même) - `_03-grids.less` (ben oui, quand même)
### votre grillade plutôt nature ? ### 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&nbsp;? 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&nbsp;?
Alors contentez-vous du fichier <a href="https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css"><strong>grillade.css</strong></a>, il ne pèse que 4.2ko seulement&nbsp;! Alors contentez-vous du fichier <a href="https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css"><strong>grillade.css</strong></a>, il est parfaitement autonome et ne pèse que 4ko seulement&nbsp;!
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. 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.

8
gulpfile.js
View file

@ -24,7 +24,7 @@ gulp.task('css', function () {
.pipe(gulp.dest('./css/')); .pipe(gulp.dest('./css/'));
}); });
gulp.task('grillade-less', function() { gulp.task('grillade', function() {
return gulp.src(['./less/_00-config.less', './less/_03-grids.less']) return gulp.src(['./less/_00-config.less', './less/_03-grids.less'])
.pipe(concat('grillade.less')) .pipe(concat('grillade.less'))
.pipe(gulp.dest('./css/')) .pipe(gulp.dest('./css/'))
@ -33,17 +33,11 @@ gulp.task('grillade-less', function() {
.pipe(minifycss()) .pipe(minifycss())
.pipe(gulp.dest('./css/')); .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 // Watcher
gulp.task('watch', function() { gulp.task('watch', function() {
gulp.watch(['./less/*.less'], ['css']); gulp.watch(['./less/*.less'], ['css']);
}); });
gulp.task('grillade', ['grillade-less', 'grillade-sass']);
gulp.task('default', ['css']); gulp.task('default', ['css']);