KNACSS/sass/utils/grillade.scss

153 lines
3.1 KiB
SCSS
Raw Normal View History

/* -------------------------------------------------- */
/* ==Grillade : système de micro-grille de KNACSS */
/* ------------------------------------------------ */
// Grillade est directement inspiré tailwindcss.com et de ses classes utilitaires
// Les variables ci-dessous ne sont appliquées que si elles n'ont pas été renseignées
// dans le fichiers de variables de KNACSS.
@if variable_exists(grid-columns) {
$grid-columns: $grid-columns !global;
} @else {
$grid-columns: 6 !global;
}
@if variable_exists(gaps) {
$gaps: $gaps !global;
} @else {
$gaps: (
"0": 0,
"5": 0.313rem,
"10": 0.625rem,
"16": 1rem,
"20": 1.25rem,
"36": 2.25rem,
) !global;
}
@if variable_exists(breakpoints) {
$breakpoints: $breakpoints !global;
2021-03-11 10:21:11 +01:00
} @else {
$breakpoints: (
sm: 576px,
md: 992px,
lg: 1330px,
) !global;
}
.grid {
display: grid;
}
// grid class for each breakpoint
@each $bp, $bpv in $breakpoints {
2021-03-11 10:21:11 +01:00
@media (min-width: #{$bpv}) {
.#{$bp}\:grid {
display: grid;
}
}
}
/* grid-template-columns initialisation */
@for $i from 1 through $grid-columns {
.grid-cols-#{$i} {
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
}
2021-03-11 10:21:11 +01:00
}
/* grid-template-columns au sein des breakpoints */
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
@for $i from 1 through $grid-columns {
.#{$bp}\:grid-cols-#{$i} {
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
}
}
}
}
/* gap initialisation */
2021-03-11 10:21:11 +01:00
@each $key, $value in $gaps {
.gap-#{$key} {
gap: $value;
}
.gap-x-#{$key} {
column-gap: $value;
}
.gap-y-#{$key} {
row-gap: $value;
}
2021-03-11 10:21:11 +01:00
}
/* gap au sein des breakpoints */
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
@each $key, $value in $gaps {
.#{$bp}\:gap-#{$key} {
gap: $value;
}
.#{$bp}\:gap-x-#{$key} {
column-gap: $value;
}
.#{$bp}\:gap-y-#{$key} {
row-gap: $value;
}
}
}
}
/* grid-items initialisation */
@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};
}
2021-03-11 10:21:11 +01:00
}
/* grid-items au sein des breakpoints */
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
@for $i from 1 through $grid-columns {
// loop for each breakpoint
.#{$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};
}
}
}
2021-03-11 10:21:11 +01:00
}