From 0bf9187ee354ab1827660b52a661b436f77244a3 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 27 Jan 2022 15:02:34 -0800 Subject: [PATCH] Redesign docs layout - New navbar, no more subnav. Migrated search and version picker into the main navbar and refreshed the design of it all, including the responsive toggles. - New sidebar navigation is always expanded, and now features Bootstrap Icons alongside section headings - Sidebar navigation autoscrolls to active link for better usability - Subnav and navbar padding issues ironed out - Enhanced the version picker in anticipation of v5.2: we can now link right to the same page in the previous version. - Redesign callouts to add more color to our pages - Collapse table of contents on mobile - Cleanup and redesign button styles with CSS variables - Update design for subnav version dropdown - Update highlight and example to be full-width until md - Improve the Added In badges - Turn the ToC into a well on mobile --- site/assets/js/application.js | 18 +++- site/assets/scss/_algolia.scss | 7 +- site/assets/scss/_buttons.scss | 19 +++- site/assets/scss/_callouts.scss | 24 ++--- site/assets/scss/_component-examples.scss | 14 +-- site/assets/scss/_navbar.scss | 75 ++++++++++---- site/assets/scss/_search.scss | 48 +++++++++ site/assets/scss/_sidebar.scss | 93 +++++++----------- site/assets/scss/_subnav.scss | 82 ---------------- site/assets/scss/_toc.scss | 45 +++++++++ site/assets/scss/_variables.scss | 7 +- site/assets/scss/docs.scss | 2 +- site/content/docs/5.1/components/alerts.md | 2 +- site/content/docs/5.1/components/badge.md | 2 +- site/content/docs/5.1/components/buttons.md | 2 +- site/content/docs/5.1/components/dropdowns.md | 2 +- site/content/docs/5.1/components/navbar.md | 2 +- site/content/docs/5.1/customize/color.md | 2 +- site/content/docs/5.1/layout/css-grid.md | 1 + site/content/docs/5.1/utilities/background.md | 2 +- site/content/docs/5.1/utilities/colors.md | 2 +- site/data/sidebar.yml | 20 ++++ site/layouts/_default/docs.html | 23 +++-- site/layouts/partials/docs-navbar.html | 97 +++++++++++-------- site/layouts/partials/docs-sidebar.html | 35 +++---- site/layouts/partials/docs-subnav.html | 14 --- site/layouts/partials/docs-versions.html | 23 ++++- .../partials/home/masthead-followup.html | 2 +- site/layouts/partials/home/masthead.html | 2 + site/layouts/partials/icons.html | 9 ++ 30 files changed, 384 insertions(+), 292 deletions(-) create mode 100644 site/assets/scss/_search.scss delete mode 100644 site/assets/scss/_subnav.scss delete mode 100644 site/layouts/partials/docs-subnav.html diff --git a/site/assets/js/application.js b/site/assets/js/application.js index b267bfb6f..0756b3687 100644 --- a/site/assets/js/application.js +++ b/site/assets/js/application.js @@ -15,6 +15,21 @@ (function () { 'use strict' + // Scroll the active sidebar link into view + var sidenav = document.querySelector('.bd-links') + if (sidenav) { + var sidenavHeight = sidenav.clientHeight + var sidenavActiveLink = document.querySelector('#bd-docs-nav .active') + var sidenavActiveLinkTop = sidenavActiveLink.offsetTop + var sidenavActiveLinkHeight = sidenavActiveLink.clientHeight + var viewportTop = sidenavActiveLinkTop + var viewportBottom = viewportTop - sidenavHeight + sidenavActiveLinkHeight + + if (sidenav.scrollTop > viewportTop || sidenav.scrollTop < viewportBottom) { + sidenav.scrollTop = viewportTop - (sidenavHeight / 2) + (sidenavActiveLinkHeight / 2) + } + } + // Tooltip and popover demos document.querySelectorAll('.tooltip-demo') .forEach(function (tooltip) { @@ -119,7 +134,8 @@ // Insert copy to clipboard button before .highlight var btnTitle = 'Copy to clipboard' - var btnHtml = '
' + var btnHtml = '
' + document.querySelectorAll('div.highlight') .forEach(function (element) { element.insertAdjacentHTML('beforebegin', btnHtml) diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss index 9c457d2e3..ab22ad9a7 100644 --- a/site/assets/scss/_algolia.scss +++ b/site/assets/scss/_algolia.scss @@ -12,12 +12,15 @@ margin: $dropdown-spacer 0 0; @include font-size(.875rem); background-color: $dropdown-bg; + background-clip: padding-box; border: $dropdown-border-width solid $dropdown-border-color; @include border-radius($dropdown-border-radius); - @include box-shadow($dropdown-box-shadow); + box-shadow: $dropdown-box-shadow; @include media-breakpoint-up(md) { - width: 400px; + width: 500px; + margin-top: .5rem; + margin-left: -110px; } } diff --git a/site/assets/scss/_buttons.scss b/site/assets/scss/_buttons.scss index 9ebdc6aa6..13bd6e48a 100644 --- a/site/assets/scss/_buttons.scss +++ b/site/assets/scss/_buttons.scss @@ -8,11 +8,14 @@ --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bd-violet); --bs-btn-border-color: var(--bd-violet); - --bs-btn-hover-color: var(--bs-white); - --bs-btn-hover-bg: #{shade-color($bd-violet, 20%)}; - --bs-btn-hover-border-color: #{shade-color($bd-violet, 20%)}; - --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); --bs-btn-border-radius: .5rem; + --bs-btn-hover-color: var(--bs-white); + --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)}; + --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)}; + --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: #{shade-color($bd-violet, 20%)}; + --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)}; } // scss-docs-end btn-css-vars-example @@ -24,13 +27,19 @@ --bs-btn-hover-bg: var(--bd-accent); --bs-btn-hover-border-color: var(--bd-accent); --bs-btn-focus-shadow-rgb: var(--bd-accent-rgb); + --bs-btn-active-color: var(--bs-btn-hover-color); + --bs-btn-active-bg: var(--bs-btn-hover-bg); + --bs-btn-active-border-color: var(--bs-btn-hover-border-color); } .btn-bd-light { --bs-btn-color: var(--bs-gray-600); - --bs-btn-border-color: var(--bs-gray-300); + --bs-btn-border-color: var(--bs-gray-400); + --bs-btn-hover-color: var(--bd-violet); + --bs-btn-hover-border-color: var(--bd-violet); --bs-btn-active-color: var(--bd-violet); --bs-btn-active-bg: var(--bs-white); --bs-btn-active-border-color: var(--bd-violet); + --bs-btn-focus-border-color: var(--bd-violet); --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb); } diff --git a/site/assets/scss/_callouts.scss b/site/assets/scss/_callouts.scss index aff91f18b..3c3c469b3 100644 --- a/site/assets/scss/_callouts.scss +++ b/site/assets/scss/_callouts.scss @@ -6,9 +6,8 @@ padding: 1.25rem; margin-top: 1.25rem; margin-bottom: 1.25rem; - border: 1px solid $gray-200; - border-left-width: .25rem; - @include border-radius(); + background-color: var(--bd-callout-bg, var(--bs-gray-100)); + border-left: .25rem solid var(--bd-callout-border, var(--bs-gray-300)); h4 { margin-bottom: .25rem; @@ -18,24 +17,15 @@ margin-bottom: 0; } - code { - @include border-radius(); - } - + .bd-callout { margin-top: -.25rem; } } // Variations -.bd-callout-info { - border-left-color: $bd-info; -} - -.bd-callout-warning { - border-left-color: $bd-warning; -} - -.bd-callout-danger { - border-left-color: $bd-danger; +@each $variant in $bd-callout-variants { + .bd-callout-#{$variant} { + --bd-callout-bg: rgba(var(--bs-#{$variant}-rgb), .075); + --bd-callout-border: rgba(var(--bs-#{$variant}-rgb), .5); + } } diff --git a/site/assets/scss/_component-examples.scss b/site/assets/scss/_component-examples.scss index a9d180ab8..426b82c1c 100644 --- a/site/assets/scss/_component-examples.scss +++ b/site/assets/scss/_component-examples.scss @@ -85,12 +85,12 @@ .bd-example { position: relative; padding: 1rem; - margin: 1rem ($bd-gutter-x * -1) 0; + margin: 1rem ($bd-gutter-x * -.5) 0; border: solid $gray-300; border-width: 1px 0 0; @include clearfix(); - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(md) { padding: 1.5rem; margin-right: 0; margin-left: 0; @@ -315,11 +315,11 @@ // .highlight { - padding: .75rem $bd-gutter-x; + padding: .75rem ($bd-gutter-x * .5); margin-bottom: 1rem; background-color: $gray-100; - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(md) { padding: .75rem 1.5rem; } @@ -345,10 +345,10 @@ } .bd-content .highlight { - margin-right: $bd-gutter-x * -1; - margin-left: $bd-gutter-x * -1; + margin-right: $bd-gutter-x * -.5; + margin-left: $bd-gutter-x * -.5; - @include media-breakpoint-up(sm) { + @include media-breakpoint-up(md) { margin-right: 0; margin-left: 0; } diff --git a/site/assets/scss/_navbar.scss b/site/assets/scss/_navbar.scss index 401731ae1..97da98ecf 100644 --- a/site/assets/scss/_navbar.scss +++ b/site/assets/scss/_navbar.scss @@ -1,44 +1,79 @@ .bd-navbar { - --bs-gutter-x: $bd-gutter-x; - --bs-gutter-y: $bd-gutter-x; - padding: .75rem 0; - background-color: $bd-violet; + background-color: transparent; + background-image: linear-gradient(to bottom, rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95)); + box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15); + + .container-xxl { + --bs-gutter-x: #{$bd-gutter-x}; + } .navbar-toggler { padding: 0; border: 0; + + &:focus { + box-shadow: none; + } } - .navbar-nav { - .nav-link { - padding-right: $spacer * .25; - padding-left: $spacer * .25; - color: rgba($white, .85); + .navbar-brand { + transition: .2s ease-in-out transform; // stylelint-disable-line property-disallowed-list - &:hover, - &:focus { - color: $white; - } + &:hover { + transform: rotate(-5deg) scale(1.1); + } + } - &.active { - font-weight: 600; - color: $white; - } + .navbar-toggler, + .nav-link { + padding-right: $spacer * .25; + padding-left: $spacer * .25; + color: rgba($white, .85); + + &:hover, + &:focus { + color: $white; + } + + &.active { + font-weight: 600; + color: $white; } } .navbar-nav-svg { - width: 1rem; - height: 1rem; + display: inline-block; + vertical-align: -.125rem; } .offcanvas { - background-color: $bd-violet; + background-color: var(--bd-violet); border-left: 0; @include media-breakpoint-down(md) { box-shadow: $box-shadow-lg; } } + + .dropdown-toggle { + &:focus { + outline: 0; + } + } + + .dropdown-menu { + --#{$variable-prefix}dropdown-min-width: 12rem; + --#{$variable-prefix}dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1); + @include rfs(.875rem, --#{$variable-prefix}dropdown-font-size); + box-shadow: $dropdown-box-shadow; + } + + .dropdown-item.current { + font-weight: 600; + background-image: escape-svg($dropdown-active-icon); + background-repeat: no-repeat; + background-position: right $dropdown-item-padding-x top .6rem; + background-size: .75rem .75rem; + } } diff --git a/site/assets/scss/_search.scss b/site/assets/scss/_search.scss new file mode 100644 index 000000000..f3ffb01a6 --- /dev/null +++ b/site/assets/scss/_search.scss @@ -0,0 +1,48 @@ +.bd-search { + position: relative; + width: 100%; + + &::after { + position: absolute; + top: .4rem; + right: .4rem; + bottom: .4rem; + display: flex; + align-items: center; + justify-content: center; + padding-right: .3125rem; + padding-left: .3125rem; + @include font-size(.75rem); + color: rgba($white, .65); + content: "Ctrl + /"; + background-color: rgba($white, .1); + @include border-radius(.125rem); + } + + @include media-breakpoint-up(lg) { + position: absolute; + top: .75rem; + left: 50%; + width: 100%; + width: 280px; + margin-left: -140px; + } + + .form-control { + padding-right: 3.75rem; + color: $white; + background-color: rgba($black, .1); + border-color: rgba($white, .4); + transition-property: background-color, border-color, box-shadow; + + &::placeholder { + color: rgba($white, .65); + } + + &:focus { + background-color: rgba($black, .25); + border-color: rgba($bd-accent, 1); + box-shadow: 0 0 0 .25rem rgba($bd-accent, .4); + } + } +} diff --git a/site/assets/scss/_sidebar.scss b/site/assets/scss/_sidebar.scss index 8a1b26074..dd779948a 100644 --- a/site/assets/scss/_sidebar.scss +++ b/site/assets/scss/_sidebar.scss @@ -6,7 +6,6 @@ .bd-links { overflow: auto; - font-weight: 600; @include media-breakpoint-up(md) { position: sticky; @@ -14,74 +13,52 @@ // Override collapse behaviors // stylelint-disable-next-line declaration-no-important display: block !important; - height: subtract(100vh, 7rem); + height: subtract(100vh, 6rem); // Prevent focus styles to be cut off: padding-left: .25rem; margin-left: -.25rem; overflow-y: auto; } +} - > ul { - @include media-breakpoint-down(md) { - padding: 1.5rem .75rem; - background-color: $gray-100; - border-bottom: 1px solid $gray-200; - } +.bd-links-nav { + @include media-breakpoint-down(md) { + padding: 1.5rem 1.25rem; + font-size: .875rem; + background-color: $gray-100; + border-bottom: 1px solid $gray-200; } - a { - padding: .1875rem .5rem; - margin-top: .125rem; - margin-left: 1.25rem; - color: rgba($black, .65); - text-decoration: if($link-decoration == none, null, none); + @include media-breakpoint-between(xs, md) { + column-count: 2; + column-gap: 1.5rem; - &:hover, - &:focus { - color: rgba($black, .85); - text-decoration: if($link-hover-decoration == underline, none, null); - background-color: rgba($bd-violet, .1); - } - } - - .btn { - // Custom styles (as we don't have a completely neutral button style) - padding: .25rem .5rem; - font-weight: 600; - color: rgba($black, .65); - background-color: transparent; - border: 0; - - &:hover, - &:focus { - color: rgba($black, .85); - background-color: rgba($bd-violet, .1); + .bd-links-group { + break-inside: avoid; } - &:focus { - box-shadow: 0 0 0 1px rgba($bd-violet, .7); + .bd-links-span-all { + column-span: all; } - - // Add chevron if there's a submenu - &::before { - width: 1.25em; - line-height: 0; // Align in the middle - content: escape-svg($sidebar-collapse-icon); - @include transition(transform .35s ease); - transform-origin: .5em 50%; - } - - &[aria-expanded="true"] { - color: rgba($black, .85); - - &::before { - transform: rotate(90deg); - } - } - } - - .active { - font-weight: 600; - color: rgba($black, .85); + } +} + +.bd-links-link { + padding: .1875rem .5rem; + margin-top: .125rem; + margin-left: 1.125rem; + color: rgba($black, .65); + text-decoration: if($link-decoration == none, null, none); + + &:hover, + &:focus, + &.active { + color: rgba($black, .85); + text-decoration: if($link-hover-decoration == underline, none, null); + background-color: rgba(var(--bd-violet-rgb), .1); + } + + &.active { + font-weight: 600; } } diff --git a/site/assets/scss/_subnav.scss b/site/assets/scss/_subnav.scss deleted file mode 100644 index db183ff6a..000000000 --- a/site/assets/scss/_subnav.scss +++ /dev/null @@ -1,82 +0,0 @@ -.bd-subnavbar { - --bs-gutter-x: $bd-gutter-x; - --bs-gutter-y: $bd-gutter-x; - - // The position and z-index are needed for the dropdown to stay on top of the content - position: relative; - z-index: $zindex-sticky; - background-color: rgba($white, .95); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05), inset 0 -1px 0 rgba(0, 0, 0, .15); - - .dropdown-menu { - @include font-size(.875rem); - box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .05); - } - - .dropdown-item.current { - font-weight: 600; - background-image: escape-svg($dropdown-active-icon); - background-repeat: no-repeat; - background-position: right $dropdown-item-padding-x top .6rem; - background-size: .75rem .75rem; - } - - @include media-breakpoint-up(md) { - position: sticky; - top: 0; - } -} - -.bd-search { - position: relative; - - &::after { - position: absolute; - top: .4rem; - right: .4rem; - bottom: .4rem; - display: flex; - align-items: center; - justify-content: center; - padding-right: .3125rem; - padding-left: .3125rem; - @include font-size(.75rem); - color: $gray-600; - content: "Ctrl + /"; - background-color: $gray-100; - @include border-radius(.125rem); - } - - @include media-breakpoint-down(md) { - width: 100%; - } - - .form-control { - padding-right: 3.75rem; - - &:focus { - border-color: $bd-violet; - box-shadow: 0 0 0 3px rgba($bd-violet, .25); - } - } -} - -.bd-sidebar-toggle { - color: $text-muted; - - &:hover, - &:focus { - color: $bd-violet; - } - - &:focus { - box-shadow: 0 0 0 3px rgba($bd-violet, .25); - } - - .bi-collapse { display: none; } - - &:not(.collapsed) { - .bi-expand { display: none; } - .bi-collapse { display: inline-block; } - } -} diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss index 596945628..512a11b42 100644 --- a/site/assets/scss/_toc.scss +++ b/site/assets/scss/_toc.scss @@ -15,6 +15,7 @@ ul { padding-left: 0; + margin-bottom: 0; list-style: none; ul { @@ -40,3 +41,47 @@ } } } + +.bd-toc-toggle { + display: flex; + align-items: center; + + @include media-breakpoint-down(sm) { + justify-content: space-between; + width: 100%; + } + + @include media-breakpoint-down(md) { + border: 1px solid $border-color; + @include border-radius(.4rem); + + &:hover, + &:focus, + &:active, + &[aria-expanded="true"] { + color: var(--bd-violet); + background-color: $white; + border-color: var(--bd-violet); + } + + &:focus, + &[aria-expanded="true"] { + box-shadow: 0 0 0 3px rgba(var(--bd-violet-rgb), .25); + } + } +} + +.bd-toc-collapse { + @include media-breakpoint-down(md) { + nav { + padding: 1.25rem; + background-color: var(--bs-gray-100); + border: 1px solid $border-color; + @include border-radius(.25rem); + } + } + + @include media-breakpoint-up(md) { + display: block !important; // stylelint-disable-line declaration-no-important + } +} diff --git a/site/assets/scss/_variables.scss b/site/assets/scss/_variables.scss index 2d5364430..8c00d8d45 100644 --- a/site/assets/scss/_variables.scss +++ b/site/assets/scss/_variables.scss @@ -5,13 +5,10 @@ $bd-purple: #4c0bce; $bd-violet: lighten(saturate($bd-purple, 5%), 15%); // stylelint-disable-line function-disallowed-list $bd-purple-light: lighten(saturate($bd-purple, 5%), 45%); // stylelint-disable-line function-disallowed-list $bd-accent: #ffe484; -$bd-info: #5bc0de; -$bd-warning: #f0ad4e; -$bd-danger: #d9534f; $dropdown-active-icon: url("data:image/svg+xml,"); -$sidebar-collapse-icon: url("data:image/svg+xml,"); -$bd-gutter-x: 1.25rem; +$bd-gutter-x: 2rem; +$bd-callout-variants: info, warning, danger !default; :root { --bd-purple: #{$bd-purple}; diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss index 0029e83af..f1390e2fa 100644 --- a/site/assets/scss/docs.scss +++ b/site/assets/scss/docs.scss @@ -37,7 +37,7 @@ $enable-cssgrid: true; // stylelint-disable-line scss/dollar-variable-default // Load docs components @import "variables"; @import "navbar"; -@import "subnav"; +@import "search"; @import "masthead"; @import "ads"; @import "content"; diff --git a/site/content/docs/5.1/components/alerts.md b/site/content/docs/5.1/components/alerts.md index 27feda577..54e211348 100644 --- a/site/content/docs/5.1/components/alerts.md +++ b/site/content/docs/5.1/components/alerts.md @@ -160,7 +160,7 @@ When an alert is dismissed, the element is completely removed from the page stru ### Variables -Added in v5.2.0 +Added in v5.2.0 As part of Bootstrap's evolving CSS variables approach, alerts now use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/badge.md b/site/content/docs/5.1/components/badge.md index e9b75f716..2e604c82a 100644 --- a/site/content/docs/5.1/components/badge.md +++ b/site/content/docs/5.1/components/badge.md @@ -90,7 +90,7 @@ Use the `.rounded-pill` utility class to make badges more rounded with a larger ### Variables -Added in v5.2.0 +Added in v5.2.0 As part of Bootstrap's evolving CSS variables approach, badges now use local CSS variables on `.badge` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/buttons.md b/site/content/docs/5.1/components/buttons.md index c2416700b..59a013a73 100644 --- a/site/content/docs/5.1/components/buttons.md +++ b/site/content/docs/5.1/components/buttons.md @@ -242,7 +242,7 @@ buttons.forEach(function (button) { ### Variables -Added in v5.2.0 +Added in v5.2.0 As part of Bootstrap's evolving CSS variables approach, buttons now use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/dropdowns.md b/site/content/docs/5.1/components/dropdowns.md index c98dd778e..4a53be28d 100644 --- a/site/content/docs/5.1/components/dropdowns.md +++ b/site/content/docs/5.1/components/dropdowns.md @@ -957,7 +957,7 @@ By default, the dropdown menu is closed when clicking inside or outside the drop ### Variables -Added in v5.2.0 +Added in v5.2.0 As part of Bootstrap's evolving CSS variables approach, dropdowns now use local CSS variables on `.dropdown-menu` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too. diff --git a/site/content/docs/5.1/components/navbar.md b/site/content/docs/5.1/components/navbar.md index 08eb70527..f54b8ff8c 100644 --- a/site/content/docs/5.1/components/navbar.md +++ b/site/content/docs/5.1/components/navbar.md @@ -736,7 +736,7 @@ To create an offcanvas navbar that expands into a normal navbar at a specific br ### Variables -Added in v5.2.0 +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. diff --git a/site/content/docs/5.1/customize/color.md b/site/content/docs/5.1/customize/color.md index 785179bb8..1b9647645 100644 --- a/site/content/docs/5.1/customize/color.md +++ b/site/content/docs/5.1/customize/color.md @@ -109,7 +109,7 @@ Here's how you can use these in your Sass: ## Generating utilities -Added in v5.1.0 +Added in v5.1.0 Bootstrap doesn't include `color` and `background-color` utilities for every color variable, but you can generate these yourself with our [utility API]({{< docsref "/utilities/api" >}}) and our extended Sass maps added in v5.1.0. diff --git a/site/content/docs/5.1/layout/css-grid.md b/site/content/docs/5.1/layout/css-grid.md index c3a1831c1..8f3ea36ba 100644 --- a/site/content/docs/5.1/layout/css-grid.md +++ b/site/content/docs/5.1/layout/css-grid.md @@ -4,6 +4,7 @@ title: CSS Grid description: Learn how to enable, use, and customize our alternate layout system built on CSS Grid with examples and code snippets. group: layout toc: true +added: 5.1 --- Bootstrap's default grid system represents the culmination of over a decade of CSS layout techniques, tried and tested by millions of people. But, it was also created without many of the modern CSS features and techniques we're seeing in browsers like the new CSS Grid. diff --git a/site/content/docs/5.1/utilities/background.md b/site/content/docs/5.1/utilities/background.md index b6f7a8bdf..728254f1c 100644 --- a/site/content/docs/5.1/utilities/background.md +++ b/site/content/docs/5.1/utilities/background.md @@ -37,7 +37,7 @@ Do you need a gradient in your custom CSS? Just add `background-image: var(--bs- ## Opacity -Added in v5.1.0 +Added in v5.1.0 As of v5.1.0, `background-color` utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes. diff --git a/site/content/docs/5.1/utilities/colors.md b/site/content/docs/5.1/utilities/colors.md index 95752ed64..329c371d1 100644 --- a/site/content/docs/5.1/utilities/colors.md +++ b/site/content/docs/5.1/utilities/colors.md @@ -33,7 +33,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t ## Opacity -Added in v5.1.0 +Added in v5.1.0 As of v5.1.0, text color utilities are generated with Sass using CSS variables. This allows for real-time color changes without compilation and dynamic alpha transparency changes. diff --git a/site/data/sidebar.yml b/site/data/sidebar.yml index df95692af..b1e6efd0c 100644 --- a/site/data/sidebar.yml +++ b/site/data/sidebar.yml @@ -2,6 +2,8 @@ # The logic for the sidebar generation is in "site/layouts/partials/docs-sidebar.html". - title: Getting started + icon: book-half + icon_color: indigo pages: - title: Introduction - title: Download @@ -16,6 +18,8 @@ - title: Contribute - title: Customize + icon: palette2 + icon_color: pink pages: - title: Overview - title: Sass @@ -26,6 +30,8 @@ - title: Optimize - title: Layout + icon: grid-fill + icon_color: teal pages: - title: Breakpoints - title: Containers @@ -37,6 +43,8 @@ - title: CSS Grid - title: Content + icon: file-earmark-richtext + icon_color: gray pages: - title: Reboot - title: Typography @@ -45,6 +53,8 @@ - title: Figures - title: Forms + icon: ui-radios + icon_color: blue pages: - title: Overview - title: Form control @@ -57,6 +67,8 @@ - title: Validation - title: Components + icon: menu-button-wide-fill + icon_color: cyan pages: - title: Accordion - title: Alerts @@ -84,6 +96,8 @@ - title: Tooltips - title: Helpers + icon: magic + icon_color: orange pages: - title: Clearfix - title: Colored links @@ -96,6 +110,8 @@ - title: Vertical rule - title: Utilities + icon: braces-asterisk + icon_color: red pages: - title: API - title: Background @@ -116,11 +132,15 @@ - title: Visibility - title: Extend + icon: tools + icon_color: blue pages: - title: Approach - title: Icons - title: About + icon: globe2 + icon_color: indigo pages: - title: Overview - title: Team diff --git a/site/layouts/_default/docs.html b/site/layouts/_default/docs.html index dd063c5dc..7658301a2 100644 --- a/site/layouts/_default/docs.html +++ b/site/layouts/_default/docs.html @@ -1,16 +1,16 @@ {{ define "main" }} - {{ partial "docs-subnav" . }} -
-
+
- View on GitHub -

{{ .Title | markdownify }}

+ + View on GitHub + +

{{ .Title | markdownify }}

{{ .Page.Params.Description | markdownify }}

{{ partial "ads" . }} @@ -18,12 +18,19 @@ {{ if (eq .Page.Params.toc true) }}
- On this page - {{ .TableOfContents }} + + On this page +
+
+ {{ .TableOfContents }} +
{{ end }} -
+
{{ if .Page.Params.sections }}
{{ range .Page.Params.sections }} diff --git a/site/layouts/partials/docs-navbar.html b/site/layouts/partials/docs-navbar.html index 171a2ad73..b0856a72d 100644 --- a/site/layouts/partials/docs-navbar.html +++ b/site/layouts/partials/docs-navbar.html @@ -1,74 +1,89 @@ -
+
diff --git a/site/layouts/partials/docs-sidebar.html b/site/layouts/partials/docs-sidebar.html index eec268ceb..3dc72b881 100644 --- a/site/layouts/partials/docs-sidebar.html +++ b/site/layouts/partials/docs-sidebar.html @@ -2,7 +2,7 @@ {{- $url := split .Permalink "/" -}} {{- $page_slug := index $url (sub (len $url) 2) -}} -
    +
      {{- range $group := .Site.Data.sidebar -}} {{- $link := $group.title -}} {{- $link_slug := $link | urlize -}} @@ -16,26 +16,27 @@ {{- $is_active_group := eq $.Page.Params.group $group_slug -}} {{- if $group.pages }} -
    • - + -
      -
        - {{- range $doc := $group.pages -}} - {{- $doc_slug := $doc.title | urlize -}} - {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}} - {{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }} -
      • {{ $doc.title }}
        • - {{- end }} -
      -
      +
        + {{- range $doc := $group.pages -}} + {{- $doc_slug := $doc.title | urlize -}} + {{- $is_active := and $is_active_group (eq $page_slug $doc_slug) -}} + {{- $href := printf "/docs/%s/%s/%s/" $.Site.Params.docs_version $group_slug $doc_slug }} +
      • {{ $doc.title }}
        • + {{- end }} +
      • {{- else }} -
    • -
    • - +
    • +
    • + {{ $group.title }}
      • diff --git a/site/layouts/partials/docs-subnav.html b/site/layouts/partials/docs-subnav.html deleted file mode 100644 index 9f2faf3e2..000000000 --- a/site/layouts/partials/docs-subnav.html +++ /dev/null @@ -1,14 +0,0 @@ - diff --git a/site/layouts/partials/docs-versions.html b/site/layouts/partials/docs-versions.html index a38a81823..e2b76e431 100644 --- a/site/layouts/partials/docs-versions.html +++ b/site/layouts/partials/docs-versions.html @@ -1,14 +1,27 @@ -
      - +{{- $url := split .Permalink "/" -}} +{{- $group_slug := index $url (sub (len $url) 3) -}} +{{- $page_slug := index $url (sub (len $url) 2) -}} + +
    • + -
      • + diff --git a/site/layouts/partials/home/masthead-followup.html b/site/layouts/partials/home/masthead-followup.html index 3e720c52e..2c0fec2f2 100644 --- a/site/layouts/partials/home/masthead-followup.html +++ b/site/layouts/partials/home/masthead-followup.html @@ -3,7 +3,7 @@
      -

      Get started anyway you want

      +

      Get started any way you want

      Jump right into building with Bootstrap—use the CDN, install it via package manager, or download the source code.

      diff --git a/site/layouts/partials/home/masthead.html b/site/layouts/partials/home/masthead.html index 9d4f79473..f63838123 100644 --- a/site/layouts/partials/home/masthead.html +++ b/site/layouts/partials/home/masthead.html @@ -21,6 +21,8 @@

      Currently v{{ .Site.Params.current_version }} · + Download + · v4.6.x docs · All releases diff --git a/site/layouts/partials/icons.html b/site/layouts/partials/icons.html index 69a8c991d..477e3ca37 100644 --- a/site/layouts/partials/icons.html +++ b/site/layouts/partials/icons.html @@ -18,6 +18,9 @@ Check + + + @@ -35,6 +38,9 @@ + + + @@ -51,6 +57,9 @@ + + +