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

Update package

Browse source
This commit is contained in:
Rodolphe 2019-08-28 10:24:32 +02:00 • committed by Raphael
parent e6dcf97f60
commit d7214f2fdd
8 changed files with 2699 additions and 1919 deletions
Download patch file Download diff file Expand all files Collapse all files

56
sass/base/grillade-grid.scss
View file

@ -8,16 +8,16 @@
// use these variables only for a standalone Grillade
// in KNACSS, you shall modify variables file instead
$tiny: 480px !default;
$medium: 768px !default;
$cols: 12 !default;
$tiny : 480px !default;
$medium : 768px !default;
$large : 992px !default;
$cols : 12 !default;
// classic Grid
[class*=" grillade-"],
[class^="grillade-"] {
@media (min-width: $tiny) {
display: grid;
grid-auto-flow: dense;
// gutters
@if variable_exists(grid-gutters) {
@ -75,11 +75,30 @@ $cols: 12 !default;
}
}
/* intermediate breakpoints */
/* 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 */
// -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
@media (min-width: $tiny) and (max-width: ($medium - 1)) {
@for $i from 1 through 4{
@for $i from 1 through 4 {
[class*="grillade-"][class*="-small-#{$i}"] {
grid-template-columns: repeat(#{$i}, 1fr);
}
@ -94,6 +113,31 @@ $cols: 12 !default;
}
}
// 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;
}
// grid order
.item-first {
order: -1;