Custom Class Names and Breakpoints (scss)

[kerns]

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?

[kerns]

Closed as in... fixed? :-)

[devlint]

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

[didacus]

@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?