KNACSS/sass/base/grillade-grid.scss

163 lines
3.4 KiB
SCSS
Raw Normal View History

2017-09-19 16:36:10 +02:00
/* --------------------------------------- */
/* ==Grillade : ultra light Grid System */
/* --------------------------------------- */
// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
// if you need complex Grid :
// 1- use vanilla CSS Grid Layout spec (perfect for you)
// 2- use Bootstrap (good luck)
2017-12-04 17:11:58 +01:00
// use these variables only for a standalone Grillade
2017-12-04 17:54:43 +01:00
// in KNACSS, you shall modify variables file instead
2019-08-28 10:24:32 +02:00
$tiny : 480px !default;
$medium : 768px !default;
$large : 992px !default;
$cols : 12 !default;
2017-12-04 17:11:58 +01:00
// classic Grid
[class*=" grillade-"],
[class^="grillade-"] {
2017-09-19 16:36:10 +02:00
@media (min-width: $tiny) {
display: grid;
// gutters
@if variable_exists(grid-gutters) {
$gutter: $grid-gutters !global;
}
@else {
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
}
@each $affix, $size in $gutter {
&.has-gutter#{$affix} {
grid-gap: $size;
}
}
}
}
// autogrid
.autogrillade,
.grillade {
@media (min-width: $tiny) {
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
// gutters
@if variable_exists(grid-gutters) {
$gutter: $grid-gutters !global;
} @else {
$gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
}
@each $affix, $size in $gutter {
&.has-gutter#{$affix} {
grid-column-gap: $size;
}
}
}
}
// grid constructor (.grillade-2 to .grillade-$cols)
2018-09-24 09:14:03 +02:00
@for $i from 2 through $cols {
[class*="grillade-#{$i}"] {
2017-09-19 16:36:10 +02:00
grid-template-columns: repeat(#{$i}, 1fr);
}
}
2018-09-24 09:14:03 +02:00
// grid items constructor (.col-1 to .col-$cols, .row-1 to .row-$cols)
@for $i from 1 through $cols {
2017-09-19 16:36:10 +02:00
[class*="col-#{$i}"] {
grid-column: auto / span #{$i};
}
[class*="row-#{$i}"] {
grid-row: auto / span #{$i};
}
}
2019-08-28 10:24:32 +02:00
/* medium intermediate breakpoints */
// -medium-X suffix means "X columns when < large screen"
// example : .grillade-4-medium-2 will be 1 column (< tiny) then 2 columns (< large) then 4 columns
@media (min-width: $tiny) and (max-width: ($large - 1)) {
@for $i from 1 through 4 {
[class*="grillade-"][class*="-medium-#{$i}"] {
grid-template-columns: repeat(#{$i}, 1fr);
}
[class*="col-"][class*="-medium-#{$i}"] {
grid-column: auto / span #{$i};
}
}
[class*="-medium-all"] {
grid-column: 1 / -1;
}
}
/* small intermediate breakpoints */
2017-09-19 16:36:10 +02:00
// -small-X suffix means "X columns when < medium screen"
// example : .grillade-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
2017-09-19 16:36:10 +02:00
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
2019-08-28 10:24:32 +02:00
@for $i from 1 through 4 {
[class*="grillade-"][class*="-small-#{$i}"] {
2017-09-19 16:36:10 +02:00
grid-template-columns: repeat(#{$i}, 1fr);
}
[class*="col-"][class*="-small-#{$i}"] {
grid-column: auto / span #{$i};
}
}
2018-05-11 19:53:09 +02:00
2017-09-19 16:36:10 +02:00
[class*="-small-all"] {
grid-column: 1 / -1;
}
}
2019-08-28 10:24:32 +02:00
// grid overall alignment
[class*="-start"] {
justify-content: start;
}
[class*="-end"] {
justify-content: end;
}
[class*="-center"] {
justify-content: center;
}
[class*="-space-between"] {
justify-content: space-between;
}
[class*="-space-around"] {
justify-content: space-around;
}
[class*="-space-evenly"] {
justify-content: space-evenly;
}
2017-09-19 16:36:10 +02:00
// grid order
.item-first {
order: -1;
}
.item-last {
order: 1;
}
// grid offset
.grid-offset {
visibility: hidden;
}
2018-10-31 08:18:22 +01:00
// spanning all columns or rows
2017-09-19 16:36:10 +02:00
.col-all {
grid-column: 1 / -1;
}
.row-all {
grid-row: 1 / -1;
}