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.

Sign up for GitHub

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

Jump to bottom

Allow fewer breakpoints for navbars #38909

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

Allow fewer breakpoints for navbars #38909

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efc5459
Add separate $navbar-breakpoints variable in maps
pine3ree Jun 7, 2022
55dffaa
Add doc entry for custom navbar-breakpoints
pine3ree Jul 15, 2023
702801f
Fix doc: $navbar-breakpoints is not defined before includind the default
pine3ree Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions scss/_maps.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,3 +172,8 @@ $utilities-links-underline: map-loop($utilities-colors, rgba-css-var, "$key", "l
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;

$gutters: $spacers !default;

// 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


6 changes: 3 additions & 3 deletions scss/_navbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,9 +190,9 @@
// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
.navbar-expand {
@each $breakpoint in map-keys($grid-breakpoints) {
$next: breakpoint-next($breakpoint, $grid-breakpoints);
$infix: breakpoint-infix($next, $grid-breakpoints);
@each $breakpoint in map-keys($navbar-breakpoints) {
$next: breakpoint-next($breakpoint, $navbar-breakpoints);
$infix: breakpoint-infix($next, $navbar-breakpoints);

// stylelint-disable-next-line scss/selector-no-union-class-name
&#{$infix} {
Expand Down
28 changes: 28 additions & 0 deletions site/content/docs/5.3/customize/sass.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,34 @@ $theme-colors: map-remove($theme-colors, "info", "light", "dark");
// etc
```

To remove breakpoints from `$navbar-breakpoints`, use `map-remove` on `$navbar-breakpoints` or `$grid-breakpoints`. Be aware that the initial breakpoint is always skipped by the `navbar-expand-` class generation loop:
louismaximepiton marked this conversation as resolved.
Show resolved Hide resolved

```scss
// Required
@import "../node_modules/bootstrap/scss/functions";
@import "../node_modules/bootstrap/scss/variables";
@import "../node_modules/bootstrap/scss/variables-dark";

// $navbar-breakpoints MUST be a sub-map of $grid-breakpoints and it is defined
// equal to it by default.
// The following $navbar-breakpoints will be: sm, md, lg.
// Since the first breakpoint is regarded as the base collapsed mode it will be
// skipped and the resulting navbar classes will be:
// - navbar-expand-md
// - navbar-expand-lg
// - navbar-expand
$navbar-breakpoints: map-remove($navbar-breakpoints, "xs", "xl", "xxl");

@import "../node_modules/bootstrap/scss/maps";
@import "../node_modules/bootstrap/scss/mixins";
@import "../node_modules/bootstrap/scss/root";

// Optional
@import "../node_modules/bootstrap/scss/reboot";
@import "../node_modules/bootstrap/scss/type";
// etc
```

## Required keys

Bootstrap assumes the presence of some specific keys within Sass maps as we used and extend these ourselves. As you customize the included maps, you may encounter errors where a specific Sass map's key is being used.
Expand Down