Add navbar-breakpoint variable to Bulma CSS framework

Tue, Oct 2, 2018

Turned out there wasn’t a good way to do it without having to override a lot of Bulma code.

… until this merge request got accepted!!!

Add and use $navbar-breakpoint variable; Fixes #1042 https://github.com/jgthms/bulma/pull/2109

This fixes the problem of a hard-coded breakpoint for when the hamburger menu becomes a full menu.

This is an improvement; it gives Bulma users needed flexibility without requiring hacking, workarounds like redefining breakpoints that may have unwanted side effects, or code duplication.

Proposed solution

Replace hard-coded desktop/touch mixins with from/until mixins that take a new $navbar-breakpoint variable.

Fixes #1042

Now people bringing in Bulma with Sass or SCSS can do something like the following; in their main .scss file in this example:

// Update Bulma's derived variables
@import "../../node_modules/bulma/sass/utilities/initial-variables.sass";
$navbar-breakpoint: $tablet;

Tradeoffs

None; it continues to work identically as before if no-one sets this variable.

Testing Done

I replaced Bulma in node_modules with a clone of my forked repository that has only this change, and it worked exactly as intended. Bulma provided all the tools to make this an easy modification; now everyone can have access to it.

Thanks!

mariozig commented 9 days ago

Nice PR! This fixes a year old issue and addresses at least 3 different stack overflow questions:

https://stackoverflow.com/questions/48809328/bulma-navbar-breakpoint
https://stackoverflow.com/questions/50548193/bulma-horizontal-navbar-menu-on-tablet-breakpoint
https://stackoverflow.com/questions/52467626/bulma-show-uncollapsed-navbar-on-tablet