Adding more breakpoints

[zmanring-zz]

Hey all, love the library but I would love a way to add more breakpoints.. I have tried to manually add it using...

// Create XLG breakpoint
$gl-xlg: 'screen and (max-width: 120em)' !default; // max 1920px

// Must load after variables
@import '~gridlex/src/gridlex';

@media #{$gl-xlg} {
  @include makeGridByNumber(_xlg);
}

@media #{$gl-xlg} {
  @include makeCol(_xlg);
  @include makeOff(_xlg);
  @include makeFirstLast(_xlg);
}

Though this works it messes up all other breakpoints. because they're declared in a particular order, the only way ive been able to get it to work is to rerun the same mixin calls but with mine on top and in order.

Am I missing something? Is this not possible?

[didacus]

Please if you manage to solve this issue let me know. I also need larger breakpoints.

[devlint]

Hello both!

In the release 2.4, you can now @import gridlex with your custom breakpoints:

$gl-mq-list: (
  lg: "screen and (max-width: 80em)", // max 1280px
  md: "screen and (max-width: 64em)", // max 1024px
  sm: "screen and (max-width: 48em)", // max 768px
  xs: "screen and (max-width: 35.5em)" // up to 568px
) !default;

$gl-mq-list: (
  xlg: 'screen and (max-width: 120em)' !default; // max 1920px
  xs: "screen and (max-width: 35.5em)" // up to 568px
) !default;

See: http://gridlex.devlint.fr/#sass-documentation

[zmanring-zz]

Nice! Thank you!

[devlint]

If it is ok for you, can I close the issue?

[didacus]

@devlint In order to implement the new breakpoints, I would need to add it to the gridlex-vars, correct? If not, how would that work?

Thank you in advance.

[migueljteixeira]

@didacus you don't have to touch the gridlex-vars file. You can simply override the variable in your own css file.