dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

gouttières de Grillade

Browse source
This commit is contained in:
Raphaël Goetter 2021-03-11 10:21:11 +01:00
parent ad3b8c2081
commit b9f1adc09a
4 changed files with 358 additions and 468 deletions
Download patch file Download diff file Expand all files Collapse all files

64
sass/utils/grillade.scss
View file

@ -3,37 +3,27 @@
/* --------------------------------------- */
// 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;
@if variable_exists(spacers) {
$spacers: $spacers !global;
}
@else {
$spacers : (
'0' : 0,
'1' : .5rem,
'2' : .75rem,
'3' : 1rem,
'4' : 1.5rem,
'5' : 2rem,
'6' : 3rem,
'7' : 5rem,
'auto' : auto
) !global;
}
$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: 768px,
lg: 1024px,
xl: 1330px
} @else {
$breakpoints: (
sm: 576px,
md: 992px,
lg: 1330px,
) !global;
}
@ -42,7 +32,7 @@ $grid-columns: 6 !default;
}
// grid class for each breakpoint
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
@media (min-width: #{$bpv}) {
.#{$bp}\:grid {
display: grid;
}
@ -51,24 +41,22 @@ $grid-columns: 6 !default;
/* 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 $spacers {
@each $key, $value in $gaps {
.gap-#{$key} {
gap: $value;
}
@ -78,9 +66,9 @@ $grid-columns: 6 !default;
.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;
@ -93,12 +81,10 @@ $grid-columns: 6 !default;
}
}
}
}
/* grid-items classes */
@for $i from 1 through $grid-columns {
.col-start-#{$i} {
grid-column-start: #{$i};
}
@ -120,10 +106,11 @@ $grid-columns: 6 !default;
.row-span-#{$i} {
grid-row: span #{$i} / span #{$i};
}
// loop for each breakpoint
}
// 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};
@ -148,5 +135,4 @@ $grid-columns: 6 !default;
}
}
}
}
}