KNACSS/css/grillade.scss

350 lines
7.4 KiB
SCSS
Raw Permalink 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))
$tiny: 544px !default; // or 'em' if you prefer, of course
$small: 768px !default;
$medium: 1024px !default;
$large: 1200px !default;
$extra-large: 1440px !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 */
// Grids variables
$grid-gutter: 1rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
$grid-gutter-l: $grid-gutter * 2;
$grid-gutter-xl: $grid-gutter * 4;
/* Grids common rules (for mono- and multi-lines grid) */
@media (min-width: ($tiny + 1)) {
[class*=" grid"],
[class^="grid"] {
& > * {
box-sizing: border-box;
min-width: 0; /* avoid min-width: auto */
min-height: 0; /* avoid min-height: auto */
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter {
margin-right: -$grid-gutter / 2;
margin-left: -$grid-gutter / 2;
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
& > * {
margin-right: $grid-gutter / 2;
margin-left: $grid-gutter / 2;
}
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter-l {
margin-right: -$grid-gutter-l / 2;
margin-left: -$grid-gutter-l / 2;
& > * {
margin-right: $grid-gutter-l / 2;
margin-left: $grid-gutter-l / 2;
}
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter-xl {
margin-right: -$grid-gutter-xl / 2;
margin-left: -$grid-gutter-xl / 2;
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
& > * {
margin-right: $grid-gutter-xl / 2;
margin-left: $grid-gutter-xl / 2;
2016-05-23 14:28:55 +02:00
}
}
}
2016-09-21 11:05:00 +02:00
/* Mono-line grid system (.grid) */
.grid {
display: flex;
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
& > * {
flex: 1 1 0;
2016-05-23 14:28:55 +02:00
}
}
2016-09-21 11:05:00 +02:00
/* Multi-line grid system (.grid-X) */
[class*=" grid-"],
[class^="grid-"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
& > * {
flex: 0 0 auto;
width: calc(100% - .01px); /* @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; */
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter > * {
width: calc(100% - #{$grid-gutter} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter-l > * {
width: calc(100% - #{$grid-gutter-l} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter-xl > * {
width: calc(100% - #{$grid-gutter-xl} - .01px);
}
}
}
/* Grid offsets */
.push {
margin-left: auto;
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
.pull {
margin-right: auto;
}
/* Grid order */
.grid-item-first {
order: -1;
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
.grid-item-last {
order: 1;
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
[class*="--reverse"] {
flex-direction: row-reverse;
}
// Sass mixin for Multi-line grid system
// example : .grid-perso { @include grid(12, 3rem); }
@mixin grid($grid-number:4, $new-gutter:$grid-gutter) {
& > * {
width: calc(100% * 1 / #{$grid-number} - .01px);
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
&.has-gutter > * {
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter-l > * {
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-l} - .01px);
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
&.has-gutter-xl > * {
width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-xl} - .01px);
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
@if ($new-gutter != 0) {
@if ($new-gutter != $grid-gutter){
margin-right: -$new-gutter / 2;
margin-left: -$new-gutter / 2;
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
& > * {
margin-right: $new-gutter / 2;
margin-left: $new-gutter / 2;
width: calc(100% * 1 / #{$grid-number} - #{$new-gutter} - .01px);
}
}
}
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
// Constructing grids : will be compiled in CSS
@media (min-width: ($tiny + 1)) {
@for $i from 2 through 12{
[class*="grid-#{$i}"] {
@include grid(#{$i},0);
}
2016-05-23 14:28:55 +02:00
}
}
2016-09-21 11:05:00 +02:00
/* Sizing individual children */
@media (min-width: ($tiny + 1)) {
.full {
flex: 0 0 auto;
width: calc(100% - .01px);
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter & {
width: calc(100% - #{$grid-gutter} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter-l & {
width: calc(100% - #{$grid-gutter-l} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter-xl & {
width: calc(100% - #{$grid-gutter-xl} - .01px);
}
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
.one-half {
flex: 0 0 auto;
width: calc(50% - .01px);
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter & {
width: calc(50% - #{$grid-gutter} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter-l & {
width: calc(50% - #{$grid-gutter-l} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter-xl & {
width: calc(50% - #{$grid-gutter-xl} - .01px);
}
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
.one-third {
flex: 0 0 auto;
width: calc(100% / 3 - .01px);
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter & {
width: calc(100% / 3 - #{$grid-gutter} - .01px);
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
.has-gutter-l & {
width: calc(100% / 3 - #{$grid-gutter-l} - .01px);
}
.has-gutter-xl & {
width: calc(100% / 3 - #{$grid-gutter-xl} - .01px);
2016-05-23 14:28:55 +02:00
}
}
2016-09-21 11:05:00 +02:00
.one-quarter {
flex: 0 0 auto;
width: calc(100% / 4 - .01px);
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter & {
width: calc(100% / 4 - #{$grid-gutter} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter-l & {
width: calc(100% / 4 - #{$grid-gutter-l} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter-xl & {
width: calc(100% / 4 - #{$grid-gutter-xl} - .01px);
}
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
.one-fifth {
flex: 0 0 auto;
width: calc(100% / 5 - .01px);
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter & {
width: calc(100% / 5 - #{$grid-gutter} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter-l & {
width: calc(100% / 5 - #{$grid-gutter-l} - .01px);
}
.has-gutter-xl & {
width: calc(100% / 5 - #{$grid-gutter-xl} - .01px);
2016-05-23 14:28:55 +02:00
}
}
2016-09-21 11:05:00 +02:00
.two-thirds {
flex: 0 0 auto;
width: calc(100% / 3 * 2 - .01px);
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter & {
width: calc(100% / 3 * 2 - #{$grid-gutter} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter-l & {
width: calc(100% / 3 * 2 - #{$grid-gutter-l} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
.has-gutter-xl & {
width: calc(100% / 3 * 2 - #{$grid-gutter-xl} - .01px);
2016-05-23 14:28:55 +02:00
}
}
2016-09-21 11:05:00 +02:00
.three-quarters {
flex: 0 0 auto;
width: calc(100% / 4 * 3 - .01px);
.has-gutter & {
width: calc(100% / 4 * 3 - #{$grid-gutter} - .01px);
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
.has-gutter-l & {
width: calc(100% / 4 * 3 - #{$grid-gutter-l} - .01px);
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
.has-gutter-xl & {
width: calc(100% / 4 * 3 - #{$grid-gutter-xl} - .01px);
}
2016-05-23 14:28:55 +02:00
}
}
2016-09-21 11:05:00 +02:00
/* Responsive Small Breakpoint */
// -small-X suffix means "X columns on small screen"
// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until small) then 4 columns
@media (min-width: ($tiny + 1)) and (max-width: $small) {
[class*="-small-4"] {
& > * {
width: calc(100% / 4 - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter > * {
width: calc(100% / 4 - #{$grid-gutter} - .01px);
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
&.has-gutter-l > * {
width: calc(100% / 4 - #{$grid-gutter-l} - .01px);
2016-05-23 14:28:55 +02:00
}
2016-09-21 11:05:00 +02:00
&.has-gutter-xl > * {
width: calc(100% / 4 - #{$grid-gutter-xl} - .01px);
2016-05-23 14:28:55 +02:00
}
}
2016-09-21 11:05:00 +02:00
[class*="-small-3"] {
& > * {
width: calc(100% / 3 - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter > * {
width: calc(100% / 3 - #{$grid-gutter} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter-l > * {
width: calc(100% / 3 - #{$grid-gutter-l} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter-xl > * {
width: calc(100% / 3 - #{$grid-gutter-xl} - .01px);
}
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
[class*="-small-2"] {
& > * {
width: calc(100% / 2 - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter > * {
width: calc(100% / 2 - #{$grid-gutter} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter-l > * {
width: calc(100% / 2 - #{$grid-gutter-l} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter-xl > * {
width: calc(100% / 2 - #{$grid-gutter-xl} - .01px);
}
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
[class*="-small-1"] {
& > * {
width: calc(100% - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter > * {
width: calc(100% - #{$grid-gutter} - .01px);
}
2016-05-23 14:28:55 +02:00
2016-09-21 11:05:00 +02:00
&.has-gutter-l > * {
width: calc(100% - #{$grid-gutter-l} - .01px);
}
&.has-gutter-xl > * {
width: calc(100% - #{$grid-gutter-xl} - .01px);
}
}
2016-05-23 14:28:55 +02:00
}