Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow fewer breakpoints for navbars #38909

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

pine3ree
Copy link
Contributor

Description

Add the ability to remove navbar breakpoints

(Rebased PR replacing #36521)

Motivation & Context

We usually do not need so many breakpoints for navbars as for grids: see #36517 for feature description.

Type of changes

  • New feature (non-breaking change which adds functionality)

Checklist

  • I have read the contributing guidelines
  • [X ] My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • [ X] All existing tests passed

Related issues

Related issue/discussion

@pine3ree pine3ree requested a review from a team as a code owner July 15, 2023 19:55
@pine3ree pine3ree force-pushed the custom-navbar-breakpoints branch 2 times, most recently from df80866 to f703036 Compare July 16, 2023 11:21
Signed-off-by: pine3ree <pine3ree@gmail.com>
Signed-off-by: pine3ree <pine3ree@gmail.com>
Copy link
Member

@louismaximepiton louismaximepiton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this can help people, I see no reason why it shouldn't be added. It doesn't increase the bundle and offer more possibility to customize the framework.
Thanks for this PR!


// scss-docs-start navbar-breakpoints
$navbar-breakpoints: $grid-breakpoints !default;
// scss-docs-end navbar-breakpoints
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is never used, should be removed or used imo.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @louismaximepiton. The extra sass var is used to keep the two breakpoints separate. If we alter the $grid-breakpoints map before the inclusion of _maps we implicitly alter the $navbar-breakpoints as well. If we remove only from $navbar-breakpoints we can keep the $grid-breakpoints variable as defined inside the configuration file. e.g.

  1. Define before the default value
// @import...
$navbar-breakpoints: map-remove($grid-breakpoints, "xl", "xxl");
@import "../node_modules/bootstrap/scss/maps";
// @import...
  1. Override (after) the default value
// @import...
@import "../node_modules/bootstrap/scss/maps";
$navbar-breakpoints: map-remove($navbar-breakpoints, "xl", "xxl");
// @import...

Now that I think about it, maybe it would be better to define the $navbar-breakpoints: $grid-breakpoints !default; in the main variables configuration file, like I did in the first version. Otherwise I would need to change the added documentation, that could lead to confusion.

kind regards

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes I'm a bit confused,

I think I didn't explain well my thought on this.
I mean the change you mention is totally fine. My comment was more about the // scss-docs* thing which isn't used in the doc. Or did I miss something ?

Sorry for the confusion and thanks again for the appreciated contribution.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@louismaximepiton Ah, ok. :-) I thought you meant the actual variable...not the docs. But I think it would make more sense either:

  1. to move the extra variable into the main configuration file, or
  2. to simply keep only the instruction to define the navbar-breakpoints using the grid-breakpoints var (as in my previous example 1) according to bootstraps docs that recommend to add/remove to/from maps before including the _maps.scss file.

kind regards

site/content/docs/5.3/customize/sass.md Outdated Show resolved Hide resolved
maps file

Signed-off-by: pine3ree <pine3ree@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
Status: Needs review
Development

Successfully merging this pull request may close these issues.

3 participants