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
Loading…
Add table
Add a link
Reference in a new issue