From c9cec89764bd3c8617dbde278e9aa6da5a3cc77c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 6 Jul 2021 19:34:12 -0700 Subject: Convert navbar to CSS variables MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Gaël Poupard --- site/content/docs/5.1/components/navbar.md | 75 +++++++++++++---------- site/content/docs/5.1/customize/css-variables.md | 12 +++- site/content/docs/5.1/examples/navbars/index.html | 4 +- 3 files changed, 55 insertions(+), 36 deletions(-) (limited to 'site') diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md index 9fb669849e..3c1b7cae9f 100644 --- a/site/content/docs/5.1/components/navbar.md +++ b/site/content/docs/5.1/components/navbar.md @@ -16,6 +16,7 @@ Here's what you need to know before getting started with the navbar: - Navbars are responsive by default, but you can easily modify them to change that. Responsive behavior depends on our Collapse JavaScript plugin. - Ensure accessibility by using a `

` element or, if using a more generic element such as a `

`, add a `role="navigation"` to every navbar to explicitly identify it as a landmark region for users of assistive technologies. - Indicate the current item by using `aria-current="page"` for the current page or `aria-current="true"` for the current item in a set. +- **New in v5.2.0:** Navbars can be themed with CSS variables that are scoped to the `.navbar` base class. `.navbar-light` has been deprecated and `.navbar-dark` has been rewritten to override CSS variables instead of adding additional styles. {{< callout info >}} {{< partial "callout-info-prefersreducedmotion.md" >}} @@ -36,7 +37,7 @@ Navbars come with built-in support for a handful of sub-components. Choose from Here's an example of all the sub-components included in a responsive light-themed navbar that automatically collapses at the `lg` (large) breakpoint. {{< example >}} -

@@ -279,7 +280,7 @@ Various buttons are supported as part of these navbar forms, too. This is also a Navbars may contain bits of text with the help of `.navbar-text`. This class adjusts vertical alignment and horizontal spacing for strings of text. {{< example >}} -

Navbar text with an inline element @@ -291,7 +292,7 @@ Navbars may contain bits of text with the help of `.navbar-text`. This class adj Mix and match with other components and utilities as needed. {{< example >}} -

+ -

+ ``` @@ -430,7 +435,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it {{< example >}}

@@ -441,7 +446,7 @@ Although it's not required, you can wrap a navbar in a `.container` to center it Use any of the responsive containers to change how wide the content in your navbar is presented. {{< example >}} -

@@ -455,7 +460,7 @@ Use our [position utilities]({{< docsref "/utilities/position" >}}) to place nav Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow of the DOM and may require custom CSS (e.g., `padding-top` on the ``) to prevent overlap with other elements. {{< example >}} -

@@ -463,7 +468,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -

@@ -471,7 +476,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -

@@ -479,7 +484,7 @@ Fixed navbars use `position: fixed`, meaning they're pulled from the normal flow {{< /example >}} {{< example >}} -

@@ -503,7 +508,7 @@ Please note that this behavior comes with a potential drawback of `overflow`—w Here's an example navbar using `.navbar-nav-scroll` with `style="--bs-scroll-height: 100px;"`, with some extra margin utilities for optimum spacing. {{< example >}} -

+ ``` -## Sass +## CSS ### Variables +Added in v5.2.0 + +As part of Bootstrap's evolving CSS variables approach, navbars now use local CSS variables on `.navbar` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. + +{{< scss-docs name="navbar-css-vars" file="scss/_navbar.scss" >}} + +### Sass variables + {{< scss-docs name="navbar-variables" file="scss/_variables.scss" >}} {{< scss-docs name="navbar-theme-variables" file="scss/_variables.scss" >}} -### Loop +### Sass loop [Responsive navbar expand/collapse classes](#responsive-behaviors) (e.g., `.navbar-expand-lg`) are combined with the `$breakpoints` map and generated through a loop in `scss/_navbar.scss`. diff --git a/site/content/docs/5.1/customize/css-variables.md b/site/content/docs/5.1/customize/css-variables.md index 079f9ad23f..b6a6493348 100644 --- a/site/content/docs/5.1/customize/css-variables.md +++ b/site/content/docs/5.1/customize/css-variables.md @@ -30,11 +30,17 @@ Here are the variables we include (note that the `:root` is required) that can b ## Component variables -We're also beginning to make use of custom properties as local variables for various components. This way we can reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation. +Bootstrap 5 is increasingly making use of custom properties as local variables for various components. This way we reduce our compiled CSS, ensure styles aren't inherited in places like nested tables, and allow some basic restyling and extending of Bootstrap components after Sass compilation. -Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}). +Have a look at our table documentation for some [insight into how we're using CSS variables]({{< docsref "/content/tables#how-do-the-variants-and-accented-tables-work" >}}). Our [navbars also use CSS variables]({{< docsref "/components/navbar#css" >}}) as of v5.2.0. We're also using CSS variables across our grids—primarily for gutters the [new opt-in CSS grid]({{< docsref "/layout/css-grid" >}})—with more component usage coming in the future. -We're also using CSS variables across our grids—primarily for gutters—with more component usage coming in the future. +Whenever possible, we'll assign CSS variables at the base component level (e.g., `.navbar` for navbar and it's sub-components). This reduces guessing on where and how to customize, and allows for easy modifications by our team in future updates. + +## Prefix + +Most CSS variables use a prefix to avoid collisions with your own codebase. This prefix is in addition to the `--` that's required on every CSS variable. + +Customize the prefix via the `$variable-prefix` Sass variable. By default, it's set to `bs-` (note the trailing dash). ## Examples diff --git a/site/content/docs/5.1/examples/navbars/index.html b/site/content/docs/5.1/examples/navbars/index.html index d1c3675e4b..f0a49c1d40 100644 --- a/site/content/docs/5.1/examples/navbars/index.html +++ b/site/content/docs/5.1/examples/navbars/index.html @@ -336,7 +336,7 @@ extra_css: