138 lines
2.7 KiB
SCSS
138 lines
2.7 KiB
SCSS
/* --------------------------------------- */
|
|
/* ==Grillade : ultra light Grid Layout */
|
|
/* --------------------------------------- */
|
|
// Grillade is heavily inspired by tailwindcss.com Grid utility classes
|
|
|
|
// use these variables only for a standalone Grillade
|
|
// in KNACSS, you shall modify variables file instead
|
|
$grid-columns: 6 !default;
|
|
|
|
$gaps: (
|
|
"0": 0,
|
|
"10": 0.625rem,
|
|
"16": 1rem,
|
|
"20": 1.25rem,
|
|
"30": 1.875rem,
|
|
"50": 3.125rem,
|
|
"100": 6.25rem,
|
|
);
|
|
|
|
@if variable_exists(breakpoints) {
|
|
$breakpoints: $breakpoints !global;
|
|
} @else {
|
|
$breakpoints: (
|
|
sm: 576px,
|
|
md: 992px,
|
|
lg: 1330px,
|
|
) !global;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
}
|
|
// grid class for each breakpoint
|
|
@each $bp, $bpv in $breakpoints {
|
|
@media (min-width: #{$bpv}) {
|
|
.#{$bp}\:grid {
|
|
display: grid;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* grid-template-columns classes */
|
|
@for $i from 1 through $grid-columns {
|
|
.grid-cols-#{$i} {
|
|
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
|
}
|
|
}
|
|
@for $i from 1 through $grid-columns {
|
|
@each $bp, $bpv in $breakpoints {
|
|
@media (min-width: #{$bpv}) {
|
|
.#{$bp}\:grid-cols-#{$i} {
|
|
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* gap classes */
|
|
@each $key, $value in $gaps {
|
|
.gap-#{$key} {
|
|
gap: $value;
|
|
}
|
|
.gap-x-#{$key} {
|
|
column-gap: $value;
|
|
}
|
|
.gap-y-#{$key} {
|
|
row-gap: $value;
|
|
}
|
|
}
|
|
@each $key, $value in $gaps {
|
|
@each $bp, $bpv in $breakpoints {
|
|
@media (min-width: #{$bpv}) {
|
|
.#{$bp}\:gap-#{$key} {
|
|
gap: $value;
|
|
}
|
|
.#{$bp}\:gap-x-#{$key} {
|
|
column-gap: $value;
|
|
}
|
|
.#{$bp}\:gap-y-#{$key} {
|
|
row-gap: $value;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/* grid-items classes */
|
|
@for $i from 1 through $grid-columns {
|
|
.col-start-#{$i} {
|
|
grid-column-start: #{$i};
|
|
}
|
|
.col-end-#{$i} {
|
|
grid-column-end: #{$i};
|
|
}
|
|
.col-span-#{$i} {
|
|
grid-column: span #{$i} / span #{$i};
|
|
}
|
|
.col-span-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.row-start-#{$i} {
|
|
grid-row-start: #{$i};
|
|
}
|
|
.row-end-#{$i} {
|
|
grid-row-end: #{$i};
|
|
}
|
|
.row-span-#{$i} {
|
|
grid-row: span #{$i} / span #{$i};
|
|
}
|
|
}
|
|
|
|
// loop for each breakpoint
|
|
@for $i from 1 through $grid-columns {
|
|
@each $bp, $bpv in $breakpoints {
|
|
@media (min-width: #{$bpv}) {
|
|
.#{$bp}\:col-start-#{$i} {
|
|
grid-column-start: #{$i};
|
|
}
|
|
.#{$bp}\:col-end-#{$i} {
|
|
grid-column-end: #{$i};
|
|
}
|
|
.#{$bp}\:col-span-#{$i} {
|
|
grid-column: span #{$i} / span #{$i};
|
|
}
|
|
.#{$bp}\:col-span-full {
|
|
grid-column: 1 / -1;
|
|
}
|
|
.#{$bp}\:row-start-#{$i} {
|
|
grid-row-start: #{$i};
|
|
}
|
|
.#{$bp}\:row-end-#{$i} {
|
|
grid-row-end: #{$i};
|
|
}
|
|
.#{$bp}\:row-span-#{$i} {
|
|
grid-row: span #{$i} / span #{$i};
|
|
}
|
|
}
|
|
}
|
|
}
|