create folder and files in rep styl
This commit is contained in:
Arnaud CARIOU
parent
b33501b2b7
commit
7a8701c929
17 changed files with 2030 additions and 0 deletions
293
styl/grids/_grillade.styl
Normal file
293
styl/grids/_grillade.styl
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
/* ---------------------------------- */
|
||||
/* ==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);
|
||||
}
|
||||
}
|
||||
*/
|
||||
Loading…
Add table
Add a link
Reference in a new issue