Grid-breakpoint and grid-container customization

ReidenXerx commented 5 years ago

Expected behavior

Hello. I am trying to change grid breakpoints and container max width by means of creating my own custom.scss file that contain code below (1).

I added @import "custom" at the end of mdb.scss file and compiled it. I have also experimented with adding imports in custom.scss file.

Actual behavior

Breakpoints dont change. Adding @import "mdb" at the end of custom.scss file deletes breakpoints not pointed in overrided variables but doesn`t override values that i wrote (2).

Your working environment and MDB version information

Windows 10, mdb free 4.5.14, gulp

Resources (screenshots, code snippets etc.)

https://mdbootstrap.com/docs/jquery/layout/grid-usage/ manual used

Supposed code $grid-breakpoints: ( sm: 0px, md: 768px, lg: 1170px );

$container-max-widths: ( sm: 445px, md: 750px, lg: 1230px );

Code that semi works @import "core/bootstrap/functions"; @import "core/bootstrap/variables"; $grid-breakpoints: ( sm: 0px, md: 768px, lg: 1170px );

$container-max-widths: ( sm: 445px, md: 750px, lg: 1230px ); @import "mdb"

Adding or overriding other variables works, for example Ive created my own class and overrided $blue variable. I dont forget to recompile classes.

For every question of technical nature, in order to get the most detailed answer as soon as possible, ask on our dedicated Support Forum

Martussky commented 5 years ago

Hi,

there is a thing, that these scss breakpoints values are taken from the bootstrap.css file and in MDB we don't overwrite the bootstrap grid. For now, we don't have a better solution than this your one above. We will try to work on it.

Best,

Marta

Martussky commented 5 years ago

Hi,

there is no problem to overwrite just bootstrap grid variables but if you want to change values of bootstrap classes like .col-md-5, .col-lg-2, .container etc., you have to add code from these files from an original bootstrap source package:

@import "mixins/breakpoints";
@import "mixins/grid-framework";
@import "mixins/grid";

@import "grid";
@import "utilities/display";
@import "utilities/flex";

We don't do this in MDB package because we don't need to overwrite bootstrap grid classes. Tell me if you need more help.

Best, Marta

mdbootstrap / material-design-for-bootstrap