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

simplification de la syntaxe des grilles

Browse source 
merci @eQRoeil :)
This commit is contained in:
raphaelgoettter 2015-03-06 09:53:19 +01:00
parent 2cd22efa8c
commit a0c0a46c29
8 changed files with 67 additions and 450 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

387
css/knacss-unminified.css
View file

@ -367,8 +367,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
/* ---------------------------------- */
/* ==Grids */
/* ---------------------------------- */
/* Examples : will be compiled in CSS */
.grid-2 {
[class*="grid-"] {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
@ -383,19 +382,20 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
flex-wrap: wrap;
margin-left: -1em;
}
.grid-2 > * {
/* grid child can be any element */
[class*="grid-"] > * {
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 50%;
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-2 > * {
width: 50%;
}
.grid-2 > .flexitem-double {
width: 100%;
}
@ -423,33 +423,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-3 {
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: -1em;
}
.grid-3 > * {
/* grid child can be any element */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 33.33333333%;
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-3 > .flexitem-double {
width: 66.66666667%;
@ -478,33 +453,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-4 {
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: -1em;
}
.grid-4 > * {
/* grid child can be any element */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 25%;
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-4 > .flexitem-double {
width: 50%;
@ -533,33 +483,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-5 {
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: -1em;
}
.grid-5 > * {
/* grid child can be any element */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 20%;
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-5 > .flexitem-double {
width: 40%;
@ -588,33 +513,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-6 {
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: -1em;
}
.grid-6 > * {
/* grid child can be any element */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 16.66666667%;
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-6 > .flexitem-double {
width: 33.33333333%;
@ -643,33 +543,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-7 {
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: -1em;
}
.grid-7 > * {
/* grid child can be any element */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 14.28571429%;
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-7 > .flexitem-double {
width: 28.57142857%;
@ -698,33 +573,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-8 {
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: -1em;
}
.grid-8 > * {
/* grid child can be any element */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 12.5%;
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-8 > .flexitem-double {
width: 25%;
@ -753,33 +603,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-10 {
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: -1em;
}
.grid-10 > * {
/* grid child can be any element */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 10%;
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-10 > .flexitem-double {
width: 20%;
@ -808,33 +633,8 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-12 {
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: -1em;
}
.grid-12 > * {
/* grid child can be any element */
-webkit-box-flex: 0;
-webkit-flex: 0 0 auto;
-ms-flex: 0 0 auto;
flex: 0 0 auto;
width: 8.33333333%;
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-12 > .flexitem-double {
width: 16.66666667%;
@ -863,29 +663,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
/* Examples : will be compiled in CSS */
.grid-2-1 {
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: -1em;
}
.grid-2-1 > * {
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-2-1 > *:nth-child(odd) {
width: 66.66666667%;
}
@ -897,28 +674,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-1-2 {
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: -1em;
}
.grid-1-2 > * {
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-1-2 > *:nth-child(odd) {
width: 33.33333333%;
}
@ -930,28 +685,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-3-1 {
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: -1em;
}
.grid-3-1 > * {
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-3-1 > *:nth-child(odd) {
width: 75%;
}
@ -963,28 +696,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-1-3 {
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: -1em;
}
.grid-1-3 > * {
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-1-3 > *:nth-child(odd) {
width: 25%;
}
@ -996,28 +707,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-3-2 {
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: -1em;
}
.grid-3-2 > * {
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-3-2 > *:nth-child(odd) {
width: 60%;
}
@ -1029,28 +718,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-2-3 {
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: -1em;
}
.grid-2-3 > * {
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-2-3 > *:nth-child(odd) {
width: 40%;
}
@ -1062,28 +729,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-4-1 {
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: -1em;
}
.grid-4-1 > * {
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-4-1 > *:nth-child(odd) {
width: 80%;
}
@ -1095,28 +740,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
width: 100%;
}
}
.grid-1-4 {
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: -1em;
}
.grid-1-4 > * {
display: block;
/* IE fix */
border-left: 1em solid transparent;
background-clip: padding-box !important;
/* no background on border */
}
.grid-1-4 > *:nth-child(odd) {
width: 20%;
}

2
css/knacss.css
View file

File diff suppressed because one or more lines are too long

18
doc/03-grilles.md
View file

@ -22,10 +22,10 @@ Au sein de la version CSS de KNACSS, l'ensemble des préfixes est présent, **vo
Pour vous faire une idée, et jouer avec les valeurs possibles, vous trouverez [un exemple "bac à sable"](http://codepen.io/raphaelgoetter/full/zxBMLW/) sur CodePen.
**Exemple de grille de colonnes égales :**
![enter image description here](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-even.png)
![grille de largeur égale](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-even.png)
**Exemple de grille de colonnes inégales (3/4 - 1/4) :**
![enter image description here](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-uneven.png)
![grille de largeur inégale](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-uneven.png)
## Mise en oeuvre
@ -114,19 +114,19 @@ CSS compilé (sans Autoprefixer) :
width: 16.66666667%;
display: block; /* IE fix */
border-left: 10px solid transparent;
background-clip: padding-box !important; /* no background on border */
background-clip: padding-box !important; /* no background on border */
}
...
```
#### Grille de colonnes inégales en LESS
**Objectif : je souhaite que mon élément `<section>` crée une grille de 2 colonnes réparties en 2/3 et 1/3, séparées par une gouttière de 15px.**
**Objectif : je souhaite que mon élément `.grid-truc` crée une grille de 2 colonnes réparties en 2/3 et 1/3, séparées par une gouttière de 15px.**
LESS (fichier de développement) :
```css
section {
.grid-truc {
.uneven-grid(2, 1, 15px);
}
```
@ -134,21 +134,21 @@ section {
CSS compilé (sans Autoprefixer) :
```css
section {
.grid-truc {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -15px;
}
section > * {
.grid-truc > * {
display: block; /* IE fix */
border-left: 15px solid transparent;
background-clip: padding-box !important; /* no background on border */
}
section > *:nth-child(odd) {
.grid-truc > *:nth-child(odd) {
width: 66.66666667%;
}
section > *:nth-child(even) {
.grid-truc > *:nth-child(even) {
width: 33.33333333%;
}
...

BIN
doc/illust/03-double.PNG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

BIN
doc/illust/03-first.PNG Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
doc/illust/03-offset.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

50
less/_03-grids.less
View file

@ -11,31 +11,36 @@
// - <div class="grid-2-1"> for an uneven columns grid container
// Usage with preprocessors : if you're using LESS, you can config grids variables :
// n = number of columns (default = 4) / g = gutter value (default = 1em)
// example : .grid-container { .grid(12, 10px); }
// n = number of columns (default = 4)
// example : .grid-perso { .grid(12); }
// ... or uneven grids :
// left = left ratio column (default = 2) / right = right ratio column (default = 1) / gutter (default = 1em)
// example : .grid-container { .uneven-grid(2, 1, 10px); }
// left = left ratio column (default = 2) / right = right ratio column (default = 1)
// example : .grid-perso { .uneven-grid(2, 1); }
// LESS mixins for *equal* columns grid container
// example : .grid-container { .grid(12, 10px); }
.grid(@number:@number, @gutter:@gutter) {
[class*="grid-"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -@gutter;
}
& > * {
/* grid child can be any element */
flex: 0 0 auto;
[class*="grid-"] > * {
flex: 0 0 auto;
display: block; /* IE fix */
border-left: @gutter solid transparent;
background-clip: padding-box !important; /* no background on border */
}
// LESS mixins for *equal* columns grid container
// example : .grid-perso { .grid(12); }
.grid(@number:@number) {
& > * {
width: (1/@number * 100) + 0%;
display: block; /* IE fix */
border-left: @gutter solid transparent;
background-clip: padding-box !important; /* no background on border */
}
& > .flexitem-double {
width: (2/@number * 100) + 0%;
}
@media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) {
& > * {
width: 33.3333%;
@ -62,7 +67,7 @@
}
}
/* Examples : will be compiled in CSS */
// Examples : will be compiled in CSS
.grid-2 {
.grid(2);
@ -101,23 +106,14 @@
}
// LESS mixins for *unequal* columns grid container
// example : .grid-container { .uneven-grid(2, 1, 10px); }
// example : .grid-perso { .uneven-grid(2, 1); }
.uneven-grid(@left:@left, @right:@right, @gutter:@gutter) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -@gutter;
.uneven-grid(@left:@left, @right:@right) {
& > * {
display: block; /* IE fix */
border-left: @gutter solid transparent;
background-clip: padding-box !important; /* no background on border */
}
& > *:nth-child(odd) {
width: (@left / (@left + @right)) * 100%;
}
& > *:nth-child(even) {
width: (@right / (@left + @right)) * 100%;
}
@ -130,7 +126,7 @@
}
/* Examples : will be compiled in CSS */
// Examples : will be compiled in CSS
.grid-2-1 {
.uneven-grid(2,1);

60
sass/_03-grids.scss
View file

@ -12,58 +12,65 @@
// 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-container { @include grid(12, 10px); }
// example : .grid-perso { @include grid(12, 10px); }
// ... or uneven grids :
// left = left ratio column (default = 2) / right = right ratio column (default = 1) / gutter (default = 1em)
// example : .grid-container { @include uneven-grid(2, 1, 10px); }
// example : .grid-perso { @include uneven-grid(2, 1, 10px); }
// Sass mixins for *equal* columns grid container
// example : .grid-container { @include grid(12, 10px); }
@mixin grid($number:$number,$gutter:$gutter) {
[class*="grid-"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -$gutter;
}
[class*="grid-"] > * {
flex: 0 0 auto;
display: block; /* IE fix */
border-left: $gutter solid transparent;
background-clip: padding-box !important; /* no background on border */
}
// Sass mixins for *equal* columns grid container
// example : .grid-perso { @include grid(12); }
@mixin grid($number:$number) {
& > * {
/* grid child can be any element */
flex: 0 0 auto;
width: (1/$number * 100) + 0%;
display: block; /* IE fix */
padding: 1em;
border-left: $gutter solid transparent;
background-clip: padding-box !important; /* no background on border */
}
& > .flexitem-double {
width: (2/$number * 100) + 0%;
}
@media (min-width: ($small-screen + 1)) and (max-width: $medium-screen) {
& > * {
width: 33.3333%;
width: 33.3333%;
}
& > .flexitem-double {
width: 66.6666%;
width: 66.6666%;
}
}
@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
& > * {
width: 50%;
width: 50%;
}
& > .flexitem-double {
width: 100%;
width: 100%;
}
}
@media (max-width: $tiny-screen) {
& > * {
width: 100%;
width: 100%;
}
& > .flexitem-double {
width: 100%;
width: 100%;
}
}
}
/* Examples : will be compiled in CSS */
// Examples : will be compiled in CSS
.grid-2 {
@include grid(2);
@ -102,23 +109,14 @@
}
// LESS mixins for *unequal* columns grid container
// example : .grid-container { @include uneven-grid(2, 1, 10px); }
// example : .grid-perso { @include uneven-grid(2, 1); }
@mixin uneven-grid($left:$left, $right:$right, $gutter:$gutter) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-left: -$gutter;
@mixin uneven-grid($left:$left, $right:$right) {
& > * {
display: block; /* IE fix */
border-left: $gutter solid transparent;
background-clip: padding-box !important; /* no background on border */
}
& > *:nth-child(odd) {
width: ($left / ($left + $right)) * 100%;
}
& > *:nth-child(even) {
width: ($right / ($left + $right)) * 100%;
}
@ -131,7 +129,7 @@
}
/* Examples : will be compiled in CSS */
// Examples : will be compiled in CSS
.grid-2-1 {
@include uneven-grid(2,1);