colourgarden
Responsive gutter classes
In response to a tweet - would anyone find responsive gutter classes like .grid--small--portable useful?
Currently, Avalanche has .grid--small etc where the gutter width can be modified for a grid but maybe there is a need for these to be controlled at a breakpoint level as well?
To achieve this, add a new Sass map to settings for the required gutters:
$av-gutters: (
"tiny": 0.25,
"small": 0.5,
"large": 2,
"huge": 4
);
Then loop through these and the breakpoints to create the responsive breakpoint gutter classes:
@each $alias, $query in $av-breakpoints{
@media #{$query}{
@each $gutter-alias, $multiplier in $av-gutters{
.#{$av-namespace}--#{$gutter-alias}--#{$alias}{
margin-left: -($av-gutter * $multiplier);
> .#{$av-namespace}__cell{
padding-left: ($av-gutter * $multiplier);
}
}
}
}
}
yes, thanks a lot, we implement your avalanche grid system in your framework: http://sandbox.devbea.fr/bff_avalanche/html/05-grid-avalanche.php
Merci
@igaman Hi. There's authentication on the link you sent so I can't access.
I currently need it. I would like to be able to set/unset a grid--right depending the breakpoint. I think it would make sense to include that in the core of Avalanche ⚡️
Something like that:
@if $av-enable-grid-center {
@each $alias, $query in $av-breakpoints {
@media #{$query} {
.#{avCreateBlockClassName('center')}-at-#{$alias} {
text-align: center;
> .#{avCreateElementClassName()} {
text-align: left;
}
}
}
}
}
@if $av-enable-grid-right {
@each $alias, $query in $av-breakpoints {
@media #{$query} {
.#{avCreateBlockClassName('right')}-at-#{$alias} {
text-align: right;
> .#{avCreateElementClassName()} {
text-align: left;
}
}
}
}
}
Hi @GesJeremie. Could you submit a PR for this? Seems like a good option.