gridlex
gridlex copied to clipboard
Custom Class Names and Breakpoints (scss)
I personally feel that a more logical scale and corresponding class designation would drop xs
in favor of xl
. Thankfully, with access to the .scss, you don't have to agree – and I should be able to change it myself.
But whenever I adjust gridlex-vars.scss
and gridlex.scss
as follows I'm not getting the desired result.
$gl-sm: "screen and (max-width: 35.5em)"; // up to 568px
$gl-md: "screen and (max-width: 48em)"; // max 768px
$gl-lg: "screen and (max-width: 64em)"; // max 1024px
$gl-xl: "screen and (max-width: 90em)"; // max 1440px
...and...
/************************
GRID BY NUMBER
*************************/
@include makeGridByNumber(grid);
@media #{$gl-xl}{
@include makeGridByNumber(_xl);
}
@media #{$gl-lg}{
@include makeGridByNumber(_lg);
}
@media #{$gl-md}{
@include makeGridByNumber(_md);
}
@media #{$gl-sm}{
@include makeGridByNumber(_sm);
}
/************************
COLS SIZES
*************************/
@include makeCol(col);
@include makeOff(off);
@media #{$gl-xl}{
@include makeCol(_xl);
@include makeOff(_xl);
}
@media #{$gl-lg}{
@include makeCol(_lg);
@include makeOff(_lg);
}
@media #{$gl-md}{
@include makeCol(_md);
@include makeOff(_md);
}
@media #{$gl-sm}{
@include makeCol(_sm);
@include makeOff(_sm);
}
For example <div class="grid-3_xl-6">
produces almost the opposite of what you'd expect – where the grid will display 6 items on a row at all breakpoints except xl
, ...and where at xl
it will then display 3 items on a row.
Strange. Am I missing something – have any ideas as to why this would be the case?
Closed as in... fixed? :-)
Not fixed... In a very quick test, I haven't had the same result as you... But I need more time to redo the test and see why and how to. Thx
@devlint I have a related question to this thread. I usually use Codekit to build my project files, if I change the gridlex-vars.scss
and compile the gridlex.scss
to dist, will the output include the changes made in gridlex-vars.scss
?