KNACSS/sass/_grids.scss

45 lines
971 B
SCSS
Raw Normal View History

2013-04-04 21:29:49 +02:00
/* ----------------------------- */
/* ==grids */
/* ----------------------------- */
/**
* Equal grids with 2% gutter
* 1. Direct childrens are floating
* 2. Gutter
*/
[class*=grid] > * {
float: left; /* 1 */
+ * {
margin-left: 2%; /* 2 */
}
}
.grid2 > * { width: 49%; }
.grid3 > * { width: 32%; }
.grid4 > * { width: 23.5%; }
.grid5 > * { width: 18.4%; }
.grid6 > * { width: 15%; }
/**
* Unequal grids (1-2, 2-1, 1-3 and 3-1)
*/
.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-09 14:01:24 +02:00
/**
* Responsive grids
*/
@include mq(small) {
.grid4 > * { width: 49% !important; }
.grid4 > :first-child + * + * { margin-left: 0 !important; }
.grid6 > * { width: 32% !important; }
.grid6 > :first-child + * + * + * { margin-left: 0 !important; }
}