2013-03-31 10:19:51 +02:00
|
|
|
|
|
|
|
|
/* ----------------------------- */
|
|
|
|
|
/* ==grids */
|
|
|
|
|
/* ----------------------------- */
|
|
|
|
|
|
|
|
|
|
/* equal grids with 2% gutter */
|
2013-07-30 14:58:52 +02:00
|
|
|
[class^=grid] > * {float: left; } /* direct childrens are floating */
|
|
|
|
|
[class^=grid] > * + * { margin-left: 2%; } /* here's the gutter */
|
2013-03-31 10:19:51 +02:00
|
|
|
.grid2 > * { width: 49%; }
|
|
|
|
|
.grid3 > * { width: 32%; }
|
|
|
|
|
.grid4 > * { width: 23.5%; }
|
|
|
|
|
.grid5 > * { width: 18.4%; }
|
|
|
|
|
.grid6 > * { width: 15%; }
|
|
|
|
|
|
2013-07-25 17:29:26 +02:00
|
|
|
/* unequal grids (1-2, 2-1, 1-3 and 3-1) with 2% gutter */
|
2013-03-31 10:19:51 +02:00
|
|
|
.grid2-1 > *:first-child,
|
|
|
|
|
.grid1-2 > * + * { width: 66%; }
|
|
|
|
|
.grid1-2 > *:first-child,
|
|
|
|
|
.grid2-1 > * + * { width: 32%; }
|
|
|
|
|
.grid1-3 > *:first-child,
|
|
|
|
|
.grid3-1 > * + * { width: 23.5%; }
|
|
|
|
|
.grid3-1 > *:first-child,
|
|
|
|
|
.grid1-3 > * + * { width: 74.5%; }
|
|
|
|
|
|
2013-07-25 17:29:26 +02:00
|
|
|
/* ----------------------------- */
|
|
|
|
|
/* ==autogrids */
|
|
|
|
|
/* ----------------------------- */
|
|
|
|
|
|
|
|
|
|
/* auto-justified equal grids */
|
|
|
|
|
|
|
|
|
|
[class^="autogrid"] {
|
|
|
|
|
text-align: justify;
|
|
|
|
|
font-size: 1px; letter-spacing: -1px; /* whitespace fi xpart 1 */
|
|
|
|
|
}
|
|
|
|
|
[class^="autogrid"]:after {
|
|
|
|
|
content: "";
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
}
|
|
|
|
|
[class^="autogrid"] > * {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
text-align: left;
|
|
|
|
|
font-size: 14em; font-size: 1.4rem; letter-spacing: normal; /* whitespace fix part 2 */
|
|
|
|
|
*display: inline; *zoom: 1; /* ie6 / ie7 hack */
|
|
|
|
|
}
|
2013-07-25 21:36:25 +02:00
|
|
|
.autogrid2 > * {width: 49.55%}
|
|
|
|
|
.autogrid3 > * {width: 32.8%}
|
|
|
|
|
.autogrid4 > * {width: 24.4%}
|
2013-07-25 21:40:27 +02:00
|
|
|
.autogrid5 > * {width: 19.4%}
|
2013-07-25 21:36:25 +02:00
|
|
|
.autogrid6 > * {width: 16%}
|
|
|
|
|
.autogrid8 > * {width: 11.75%}
|
2013-07-25 17:42:58 +02:00
|
|
|
.autogrid10 > * {width: 9.3%}
|
2013-07-29 17:27:32 +02:00
|
|
|
.autogrid12 > * {width: 7.6%}
|
|
|
|
|
|
|
|
|
|
/* Responsiv-o-matic */
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1024px) {
|
|
|
|
|
.autogrid5 > *,
|
|
|
|
|
.autogrid6 > *,
|
|
|
|
|
.autogrid8 > *,
|
|
|
|
|
.autogrid10 > *,
|
|
|
|
|
.autogrid12 > * {width: 32.8%}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 768px) {
|
|
|
|
|
.autogrid3 > *,
|
|
|
|
|
.autogrid4 > *,
|
|
|
|
|
.autogrid5 > *,
|
|
|
|
|
.autogrid6 > *,
|
|
|
|
|
.autogrid8 > *,
|
|
|
|
|
.autogrid10 > *,
|
|
|
|
|
.autogrid12 > * {width: 49.55%}
|
|
|
|
|
}
|
|
|
|
|
@media (max-width: 640px) {
|
|
|
|
|
[class^="autogrid"] > * {width: 100%}
|
|
|
|
|
}
|
