simplification de la syntaxe des grilles
merci @eQRoeil :)
This commit is contained in:
raphaelgoettter
parent
2cd22efa8c
commit
a0c0a46c29
8 changed files with 67 additions and 450 deletions
|
|
@ -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%;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -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 :**
|
||||
|
||||
|
||||
|
||||
**Exemple de grille de colonnes inégales (3/4 - 1/4) :**
|
||||
|
||||
|
||||
|
||||
## 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
BIN
doc/illust/03-double.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
BIN
doc/illust/03-first.PNG
Normal file
BIN
doc/illust/03-first.PNG
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
BIN
doc/illust/03-offset.png
Normal file
BIN
doc/illust/03-offset.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
|
|
@ -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;
|
||||
|
||||
& > * {
|
||||
display: block; /* IE fix */
|
||||
border-left: @gutter solid transparent;
|
||||
background-clip: padding-box !important; /* no background on border */
|
||||
}
|
||||
.uneven-grid(@left:@left, @right:@right) {
|
||||
|
||||
& > *: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);
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
& > * {
|
||||
display: block; /* IE fix */
|
||||
border-left: $gutter solid transparent;
|
||||
background-clip: padding-box !important; /* no background on border */
|
||||
}
|
||||
@mixin uneven-grid($left:$left, $right:$right) {
|
||||
|
||||
& > *: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);
|
||||
|
|
|
|||
Loading…
Reference in a new issue