294 lines
6.8 KiB
Stylus
294 lines
6.8 KiB
Stylus
/* ---------------------------------- */
|
|
/* ==Grillade : Simple Grid System */
|
|
/* ---------------------------------- */
|
|
/* Doc : http://grillade.knacss.com */
|
|
// gutter values for grid layouts. Unit can be: %, px, em, rem
|
|
grid-gutters = { '': 1rem, '-l': 2rem, '-xl': 4rem }
|
|
// IEfixing, see
|
|
// https://github.com/alsacreations/KNACSS/issues/133;
|
|
iefix = 0.01px
|
|
|
|
tiny = 543px
|
|
small = 767px
|
|
medium = 991px
|
|
large = 1199px
|
|
extra-large = 1439px
|
|
|
|
displayFlex()
|
|
display: -webkit-box
|
|
display: -ms-flexbox
|
|
display: flex
|
|
|
|
@media (min-width: tiny + 1)
|
|
[class*=" grid-"]
|
|
[class^="grid-"]
|
|
displayFlex()
|
|
-webkit-box-orient: horizontal
|
|
-webkit-box-direction: normal
|
|
flex-direction: row
|
|
flex-wrap: wrap
|
|
& > *
|
|
box-sizing: border-box
|
|
min-width: 0
|
|
min-height: 0
|
|
|
|
// Multi-line grid constructor
|
|
// example : .grid-perso { @include grid(12, 3rem); }
|
|
grid(grid-number = 1, own-gutter = 0)
|
|
& > *
|
|
width: calc(100% / grid-number - iefix)
|
|
|
|
for key, size in grid-gutters
|
|
&.has-gutter{key}
|
|
margin-right: -(size / 2)
|
|
margin-left: -(size / 2)
|
|
& > *
|
|
width: calc(100% / grid-number - size - iefix)
|
|
margin-right size / 2
|
|
margin-left size / 2
|
|
|
|
if own-gutter != 0
|
|
margin-right: own-gutter / 2
|
|
margin-left: own-gutter / 2
|
|
|
|
// Mono-line grid constructor (.grid)
|
|
@media (min-width: tiny + 1)
|
|
.grid
|
|
.grid--reverse
|
|
displayFlex()
|
|
& > *
|
|
flex: 1 1 0%
|
|
box-sizing: border-box
|
|
min-width: 0
|
|
min-height: 0
|
|
|
|
for key, size in grid-gutters
|
|
&.has-gutter{key} > * + *
|
|
margin-left: size - iefix
|
|
|
|
// Constructing grids : will be compiled in CSS
|
|
@media (min-width: tiny + 1)
|
|
for i in 2..12
|
|
grid-selector = 'grid-%s' % i
|
|
[class*={grid-selector}] > *
|
|
grid(i, 0)
|
|
|
|
.push {
|
|
margin-left: auto !important;
|
|
}
|
|
|
|
.pull {
|
|
margin-right: auto !important;
|
|
}
|
|
|
|
.item-first {
|
|
-webkit-box-ordinal-group: 0;
|
|
-ms-flex-order: -1;
|
|
order: -1;
|
|
}
|
|
|
|
.item-last {
|
|
-webkit-box-ordinal-group: 2;
|
|
-ms-flex-order: 1;
|
|
order: 1;
|
|
}
|
|
|
|
/*[class*="grid-"][class*="--reverse"] {
|
|
-webkit-box-orient: horizontal;
|
|
-webkit-box-direction: reverse;
|
|
-ms-flex-direction: row-reverse;
|
|
flex-direction: row-reverse;
|
|
}*/
|
|
|
|
/*@media (min-width: 544px) {
|
|
.full {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
width: calc(100% / 1 - 0.01px);
|
|
}
|
|
.has-gutter .full {
|
|
width: calc(100% / 1 - 1rem - 0.01px);
|
|
}
|
|
.has-gutter-l .full {
|
|
width: calc(100% / 1 - 2rem - 0.01px);
|
|
}
|
|
.has-gutter-xl .full {
|
|
width: calc(100% / 1 - 4rem - 0.01px);
|
|
}
|
|
.one-half {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
width: calc(100% / 2 - 0.01px);
|
|
}
|
|
.has-gutter .one-half {
|
|
width: calc(100% / 2 - 1rem - 0.01px);
|
|
}
|
|
.has-gutter-l .one-half {
|
|
width: calc(100% / 2 - 2rem - 0.01px);
|
|
}
|
|
.has-gutter-xl .one-half {
|
|
width: calc(100% / 2 - 4rem - 0.01px);
|
|
}
|
|
.one-third {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
width: calc(100% / 3 - 0.01px);
|
|
}
|
|
.has-gutter .one-third {
|
|
width: calc(100% / 3 - 1rem - 0.01px);
|
|
}
|
|
.has-gutter-l .one-third {
|
|
width: calc(100% / 3 - 2rem - 0.01px);
|
|
}
|
|
.has-gutter-xl .one-third {
|
|
width: calc(100% / 3 - 4rem - 0.01px);
|
|
}
|
|
.one-quarter {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
width: calc(100% / 4 - 0.01px);
|
|
}
|
|
.has-gutter .one-quarter {
|
|
width: calc(100% / 4 - 1rem - 0.01px);
|
|
}
|
|
.has-gutter-l .one-quarter {
|
|
width: calc(100% / 4 - 2rem - 0.01px);
|
|
}
|
|
.has-gutter-xl .one-quarter {
|
|
width: calc(100% / 4 - 4rem - 0.01px);
|
|
}
|
|
.one-fifth {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
width: calc(100% / 5 - 0.01px);
|
|
}
|
|
.has-gutter .one-fifth {
|
|
width: calc(100% / 5 - 1rem - 0.01px);
|
|
}
|
|
.has-gutter-l .one-fifth {
|
|
width: calc(100% / 5 - 2rem - 0.01px);
|
|
}
|
|
.has-gutter-xl .one-fifth {
|
|
width: calc(100% / 5 - 4rem - 0.01px);
|
|
}
|
|
.one-sixth {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
width: calc(100% / 6 - 0.01px);
|
|
}
|
|
.has-gutter .one-sixth {
|
|
width: calc(100% / 6 - 1rem - 0.01px);
|
|
}
|
|
.has-gutter-l .one-sixth {
|
|
width: calc(100% / 6 - 2rem - 0.01px);
|
|
}
|
|
.has-gutter-xl .one-sixth {
|
|
width: calc(100% / 6 - 4rem - 0.01px);
|
|
}
|
|
.two-thirds {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
width: calc(100% / 3 * 2 - 0.01px);
|
|
}
|
|
.has-gutter .two-thirds {
|
|
width: calc(100% / 3 * 2 - 1rem - 0.01px);
|
|
}
|
|
.has-gutter-l .two-thirds {
|
|
width: calc(100% / 3 * 2 - 2rem - 0.01px);
|
|
}
|
|
.has-gutter-xl .two-thirds {
|
|
width: calc(100% / 3 * 2 - 4rem - 0.01px);
|
|
}
|
|
.three-quarters {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
width: calc(100% / 4 * 3 - 0.01px);
|
|
}
|
|
.has-gutter .three-quarters {
|
|
width: calc(100% / 4 * 3 - 1rem - 0.01px);
|
|
}
|
|
.has-gutter-l .three-quarters {
|
|
width: calc(100% / 4 * 3 - 2rem - 0.01px);
|
|
}
|
|
.has-gutter-xl .three-quarters {
|
|
width: calc(100% / 4 * 3 - 4rem - 0.01px);
|
|
}
|
|
.five-sixths {
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 auto;
|
|
flex: 0 0 auto;
|
|
width: calc(100% / 6 * 5 - 0.01px);
|
|
}
|
|
.has-gutter .five-sixths {
|
|
width: calc(100% / 6 * 5 - 1rem - 0.01px);
|
|
}
|
|
.has-gutter-l .five-sixths {
|
|
width: calc(100% / 6 * 5 - 2rem - 0.01px);
|
|
}
|
|
.has-gutter-xl .five-sixths {
|
|
width: calc(100% / 6 * 5 - 4rem - 0.01px);
|
|
}
|
|
}*/
|
|
|
|
/* Responsive Small Breakpoint */
|
|
/*
|
|
@media (min-width: 544px) and (max-width: 991px) {
|
|
[class*="-small-1"] > * {
|
|
width: calc(100% / 1 - 0.01px);
|
|
}
|
|
[class*="-small-1"].has-gutter > * {
|
|
width: calc(100% / 1 - 1rem - 0.01px);
|
|
}
|
|
[class*="-small-1"].has-gutter-l > * {
|
|
width: calc(100% / 1 - 2rem - 0.01px);
|
|
}
|
|
[class*="-small-1"].has-gutter-xl > * {
|
|
width: calc(100% / 1 - 4rem - 0.01px);
|
|
}
|
|
[class*="-small-2"] > * {
|
|
width: calc(100% / 2 - 0.01px);
|
|
}
|
|
[class*="-small-2"].has-gutter > * {
|
|
width: calc(100% / 2 - 1rem - 0.01px);
|
|
}
|
|
[class*="-small-2"].has-gutter-l > * {
|
|
width: calc(100% / 2 - 2rem - 0.01px);
|
|
}
|
|
[class*="-small-2"].has-gutter-xl > * {
|
|
width: calc(100% / 2 - 4rem - 0.01px);
|
|
}
|
|
[class*="-small-3"] > * {
|
|
width: calc(100% / 3 - 0.01px);
|
|
}
|
|
[class*="-small-3"].has-gutter > * {
|
|
width: calc(100% / 3 - 1rem - 0.01px);
|
|
}
|
|
[class*="-small-3"].has-gutter-l > * {
|
|
width: calc(100% / 3 - 2rem - 0.01px);
|
|
}
|
|
[class*="-small-3"].has-gutter-xl > * {
|
|
width: calc(100% / 3 - 4rem - 0.01px);
|
|
}
|
|
[class*="-small-4"] > * {
|
|
width: calc(100% / 4 - 0.01px);
|
|
}
|
|
[class*="-small-4"].has-gutter > * {
|
|
width: calc(100% / 4 - 1rem - 0.01px);
|
|
}
|
|
[class*="-small-4"].has-gutter-l > * {
|
|
width: calc(100% / 4 - 2rem - 0.01px);
|
|
}
|
|
[class*="-small-4"].has-gutter-xl > * {
|
|
width: calc(100% / 4 - 4rem - 0.01px);
|
|
}
|
|
}
|
|
*/
|