Début de doc + modif grilles
This commit is contained in:
raphaelgoettter
parent
7f67b71c9c
commit
ec671ed5e6
8 changed files with 49 additions and 135 deletions
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* www.KNACSS.com V4.0.0 BETA (2015-03-05) @author: Raphael Goetter, Alsacreations
|
||||
* www.KNACSS.com V4.0.2 BETA (2015-03-05) @author: Raphael Goetter, Alsacreations
|
||||
* Licence WTFPL http://www.wtfpl.net/
|
||||
*/
|
||||
/* ----------------------------- */
|
||||
|
|
@ -399,12 +399,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-2 > .flexitem-double {
|
||||
width: 100%;
|
||||
}
|
||||
.grid-2 > .flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.grid-2 > * {
|
||||
width: 33.3333%;
|
||||
|
|
@ -460,12 +454,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-3 > .flexitem-double {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.grid-3 > .flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.grid-3 > * {
|
||||
width: 33.3333%;
|
||||
|
|
@ -521,12 +509,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-4 > .flexitem-double {
|
||||
width: 50%;
|
||||
}
|
||||
.grid-4 > .flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.grid-4 > * {
|
||||
width: 33.3333%;
|
||||
|
|
@ -582,12 +564,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-5 > .flexitem-double {
|
||||
width: 40%;
|
||||
}
|
||||
.grid-5 > .flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.grid-5 > * {
|
||||
width: 33.3333%;
|
||||
|
|
@ -643,12 +619,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-6 > .flexitem-double {
|
||||
width: 33.33333333%;
|
||||
}
|
||||
.grid-6 > .flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.grid-6 > * {
|
||||
width: 33.3333%;
|
||||
|
|
@ -704,12 +674,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-7 > .flexitem-double {
|
||||
width: 28.57142857%;
|
||||
}
|
||||
.grid-7 > .flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.grid-7 > * {
|
||||
width: 33.3333%;
|
||||
|
|
@ -765,12 +729,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-8 > .flexitem-double {
|
||||
width: 25%;
|
||||
}
|
||||
.grid-8 > .flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.grid-8 > * {
|
||||
width: 33.3333%;
|
||||
|
|
@ -826,12 +784,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-10 > .flexitem-double {
|
||||
width: 20%;
|
||||
}
|
||||
.grid-10 > .flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.grid-10 > * {
|
||||
width: 33.3333%;
|
||||
|
|
@ -887,12 +839,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
.grid-12 > .flexitem-double {
|
||||
width: 16.66666667%;
|
||||
}
|
||||
.grid-12 > .flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.grid-12 > * {
|
||||
width: 33.3333%;
|
||||
|
|
@ -917,67 +863,6 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
|
|||
width: 100%;
|
||||
}
|
||||
}
|
||||
.grid-16 {
|
||||
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-16 > * {
|
||||
/* 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: 6.25%;
|
||||
display: block;
|
||||
/* IE fix */
|
||||
border-left: 1em solid transparent;
|
||||
background-clip: padding-box !important;
|
||||
/* no background on border */
|
||||
}
|
||||
.grid-16 > .flexitem-double {
|
||||
width: 12.5%;
|
||||
}
|
||||
.grid-16 > .flexitem-first {
|
||||
-webkit-box-ordinal-group: 0;
|
||||
-webkit-order: -1;
|
||||
-ms-flex-order: -1;
|
||||
order: -1;
|
||||
}
|
||||
@media (min-width: 769px) and (max-width: 1024px) {
|
||||
.grid-16 > * {
|
||||
width: 33.3333%;
|
||||
}
|
||||
.grid-16 > .flexitem-double {
|
||||
width: 66.6666%;
|
||||
}
|
||||
}
|
||||
@media (min-width: 481px) and (max-width: 768px) {
|
||||
.grid-16 > * {
|
||||
width: 50%;
|
||||
}
|
||||
.grid-16 > .flexitem-double {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media (max-width: 480px) {
|
||||
.grid-16 > * {
|
||||
width: 100%;
|
||||
}
|
||||
.grid-16 > .flexitem-double {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
/* Examples : will be compiled in CSS */
|
||||
.grid-2-1 {
|
||||
display: -webkit-box;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
Loading…
Add table
Add a link
Reference in a new issue