Update docs for new XXL grid tier

- Updates mentions of number and exact tiers
- Updates grid example to include xxl container
- Adds some scss-docs references
- Cleans up other grid mentions and docs
- Updates navbar example to include an expand at XXL variant

3 files changed, 59 insertions, 23 deletions

diff --git a/site/assets/scss/_layout.scss b/site/assets/scss/_layout.scss
new file mode 100644
index 0000000000..116df720ee
--- /dev/null
+++ b/site/assets/scss/_layout.scss
@@ -0,0 +1,35 @@
+.bd-layout {
+  @include media-breakpoint-up(md) {
+    display: grid;
+    gap: $grid-gutter-width;
+    grid-template-areas:
+      "sidebar intro"
+      "sidebar toc"
+      "sidebar content";
+    grid-template-columns: 1fr 3fr;
+  }
+
+  @include media-breakpoint-up(lg) {
+    grid-template-areas:
+      "sidebar intro toc"
+      "sidebar content toc";
+    grid-template-columns: 1fr 4fr 1fr;
+  }
+}
+
+.bd-sidebar {
+  grid-area: sidebar;
+}
+
+.bd-intro {
+  grid-area: intro;
+}
+
+.bd-toc {
+  grid-area: toc;
+}
+
+.bd-content {
+  grid-area: content;
+  min-width: 1px; // Fix width when bd-content contains a `<pre>` https://github.com/twbs/bootstrap/issues/25410
+}
diff --git a/site/assets/scss/_toc.scss b/site/assets/scss/_toc.scss
index cc9a6d6ddf..17ac4b819c 100644
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -1,6 +1,6 @@
-// stylelint-disable selector-max-type, selector-max-compound-selectors
+// stylelint-disable selector-max-type
 
-.bd-toc-wrap {
+.bd-toc {
   @include media-breakpoint-up(lg) {
     @supports (position: sticky) {
       position: sticky;
@@ -11,34 +11,34 @@
       overflow-y: auto;
     }
   }
-}
-
-.bd-toc nav {
-  @include font-size(.875rem);
 
-  ul {
-    padding-left: 0;
-    list-style: none;
+  nav {
+    @include font-size(.875rem);
 
     ul {
-      padding-left: 1rem;
-      margin-top: .25rem;
+      padding-left: 0;
+      list-style: none;
+
+      ul {
+        padding-left: 1rem;
+        margin-top: .25rem;
+      }
     }
-  }
 
-  li {
-    margin-bottom: .25rem;
-  }
+    li {
+      margin-bottom: .25rem;
+    }
 
-  a {
-    color: inherit;
-  }
+    a {
+      color: inherit;
 
-  a:not(:hover) {
-    text-decoration: none;
-  }
+      &:not(:hover) {
+        text-decoration: none;
+      }
 
-  a code {
-    font: inherit;
+      code {
+        font: inherit;
+      }
+    }
   }
 }
diff --git a/site/assets/scss/docs.scss b/site/assets/scss/docs.scss
index 53622b9c2c..4da387aa4a 100644
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -37,6 +37,7 @@
 @import "content";
 @import "skippy";
 @import "sidebar";
+@import "layout";
 @import "toc";
 @import "footer";
 @import "component-examples";