KNACSS/css/grillade.scss

143 lines
3.5 KiB
SCSS
Raw Normal View History

2016-09-21 11:05:00 +02:00
// Responsive breakpoints variables
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
// Warning : you should use your own values, regardless of the devices
// Best practise : (max-width: $BP) and (min-width: ($BP + 1))
2016-12-01 15:45:23 +01:00
$tiny: 543px !default; // or 'em' if you prefer, of course
$small: 767px !default;
$medium: 991px !default;
$large: 1199px !default;
$extra-large: 1439px !default;
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
/* ---------------------------------- */
/* ==Grillade : Simple Grid System */
/* ---------------------------------- */
/* Doc : http://grillade.knacss.com */
2016-10-27 14:35:07 +02:00
// gutter values for grid layouts. Unit can be: %, px, em, rem
2016-10-27 15:16:29 +02:00
$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
// IEfixing, see
2016-10-27 14:35:07 +02:00
// https://github.com/alsacreations/KNACSS/issues/133;
$iefix: 0.01px;
2016-09-21 11:05:00 +02:00
@media (min-width: ($tiny + 1)) {
2016-10-27 14:35:07 +02:00
[class*=" grid-"],
[class^="grid-"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
2016-09-21 11:05:00 +02:00
& > * {
box-sizing: border-box;
2016-10-27 14:35:07 +02:00
min-width: 0;
min-height: 0;
2016-09-21 11:05:00 +02:00
}
2016-10-27 14:35:07 +02:00
}
}
// Multi-line grid constructor
// example : .grid-perso { @include grid(12, 3rem); }
@mixin grid($grid-number: 1, $own-gutter: 0) {
2016-10-27 14:35:07 +02:00
& > * {
width: calc(100% / #{$grid-number} - #{$iefix});
}
@each $affix, $size in $grid-gutters {
&.has-gutter#{$affix} {
margin-right: -$size / 2;
margin-left: -$size / 2;
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
& > * {
2016-10-27 14:35:07 +02:00
width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
margin-right: $size / 2;
margin-left: $size / 2;
2016-05-23 14:28:55 +02:00
}
}
}
2016-10-27 14:35:07 +02:00
@if ($own-gutter != 0) {
margin-right: -$own-gutter / 2;
margin-left: -$own-gutter / 2;
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
& > * {
2016-10-27 14:35:07 +02:00
width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
margin-right: $own-gutter / 2;
margin-left: $own-gutter / 2;
2016-05-23 14:28:55 +02:00
}
}
2016-10-27 14:35:07 +02:00
}
// Mono-line grid constructor (.grid)
@media (min-width: ($tiny + 1)) {
2016-11-25 15:47:42 +01:00
.grid,
.grid--reverse {
2016-09-21 11:05:00 +02:00
display: flex;
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
& > * {
2016-11-25 15:47:42 +01:00
flex: 1 1 0%;
2016-10-27 14:35:07 +02:00
box-sizing: border-box;
min-width: 0;
min-height: 0;
2016-09-21 11:05:00 +02:00
}
2016-10-27 14:35:07 +02:00
@each $affix, $size in $grid-gutters {
&.has-gutter#{$affix} > * + * {
margin-left: calc(#{$size} - #{$iefix});
}
2016-09-21 11:05:00 +02:00
}
2016-10-27 14:35:07 +02:00
}
}
// Constructing grids : will be compiled in CSS
@media (min-width: ($tiny + 1)) {
@for $i from 2 through 12 {
2016-10-27 14:35:07 +02:00
[class*="grid-#{$i}"] {
@include grid(#{$i}, 0);
2016-09-21 11:05:00 +02:00
}
}
}
2016-10-27 14:35:07 +02:00
// Grid offsets
2016-09-21 11:05:00 +02:00
.push {
margin-left: auto !important;
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
.pull {
margin-right: auto !important;
2016-09-21 11:05:00 +02:00
}
2016-10-27 15:16:29 +02:00
// Grid order
.item-first {
2016-09-21 11:05:00 +02:00
order: -1;
2016-05-23 14:28:55 +02:00
}
.item-last {
2016-09-21 11:05:00 +02:00
order: 1;
}
2016-05-23 14:28:55 +02:00
2016-11-26 21:20:32 +01:00
[class*="grid-"][class*="--reverse"] {
2016-09-21 11:05:00 +02:00
flex-direction: row-reverse;
}
2016-10-27 14:35:07 +02:00
// sizing individual children
2016-09-21 11:05:00 +02:00
@media (min-width: ($tiny + 1)) {
@each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
2016-10-27 14:35:07 +02:00
.#{$flow} {
flex: 0 0 auto;
width: calc(100% / #{$divider} - #{$iefix});
}
2016-10-27 14:35:07 +02:00
@each $affix, $size in $grid-gutters {
2017-03-03 16:51:48 +01:00
.has-gutter#{$affix} > .#{$flow} {
2016-10-27 14:35:07 +02:00
width: calc(100% / #{$divider} - #{$size} - #{$iefix});
}
}
}
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
/* Responsive Small Breakpoint */
2016-12-02 16:19:53 +01:00
// -small-X suffix means "X columns on small-medium screen"
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
@media (min-width: ($tiny + 1)) and (max-width: $medium) {
@for $i from 1 through 4 {
2016-10-27 14:35:07 +02:00
[class*="-small-#{$i}"] {
& > * {
width: calc(100% / #{$i} - #{$iefix});
}
@each $affix, $size in $grid-gutters {
&.has-gutter#{$affix} > * {
width: calc(100% / #{$i} - #{$size} - #{$iefix});
}
}
2016-09-21 11:05:00 +02:00
}
}
2016-05-23 14:28:55 +02:00
}