Use Hugo for our docs Sass and JS. (#29280)

Now there's only one command needed to run the docs: `npm run docs-serve`. Also, simplify the npm scripts.
2025-08-31 17:11:48 +02:00 · 2019-09-17 00:22:49 +03:00
parent a9c05ab798
commit 129bb08fc4
35 changed files with 45 additions and 70 deletions
--- a/site/assets/js/src/application.js
+++ b/site/assets/js/src/application.js
@@ -0,0 +1,179 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+/*!
+ * JavaScript for Bootstrap's docs (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+/* global ClipboardJS: false, anchors: false, bootstrap: false, bsCustomFileInput: false */
+
+(function () {
+  'use strict'
+
+  function makeArray(list) {
+    return [].slice.call(list)
+  }
+
+  (function () {
+    var checkbox = document.getElementById('flexCheckIndeterminate')
+
+    if (!checkbox) {
+      return
+    }
+
+    checkbox.indeterminate = true
+  })()
+
+  makeArray(document.querySelectorAll('.js-sidenav-group'))
+    .forEach(function (sidenavGroup) {
+      var groupHasLinks = Boolean(sidenavGroup.querySelector('li'))
+      var groupLink = sidenavGroup.querySelector('a')
+
+      if (groupHasLinks) {
+        groupLink.addEventListener('click', function (e) {
+          e.preventDefault()
+          e.target.parentNode.classList.toggle('active')
+        }, true)
+      }
+    })
+
+  // Tooltip and popover demos
+  makeArray(document.querySelectorAll('.tooltip-demo'))
+    .forEach(function (tooltip) {
+      new bootstrap.Tooltip(tooltip, {
+        selector: '[data-toggle="tooltip"]'
+      })
+    })
+
+  makeArray(document.querySelectorAll('[data-toggle="popover"]'))
+    .forEach(function (popover) {
+      new bootstrap.Popover(popover)
+    })
+
+  makeArray(document.querySelectorAll('.toast'))
+    .forEach(function (toastNode) {
+      var toast = new bootstrap.Toast(toastNode, {
+        autohide: false
+      })
+
+      toast.show()
+    })
+
+  // Demos within modals
+  makeArray(document.querySelectorAll('.tooltip-test'))
+    .forEach(function (tooltip) {
+      new bootstrap.Tooltip(tooltip)
+    })
+
+  makeArray(document.querySelectorAll('.popover-test'))
+    .forEach(function (popover) {
+      new bootstrap.Popover(popover)
+    })
+
+  // Indeterminate checkbox example
+  makeArray(document.querySelectorAll('.bd-example-indeterminate [type="checkbox"]'))
+    .forEach(function (checkbox) {
+      checkbox.indeterminate = true
+    })
+
+  // Disable empty links in docs examples
+  makeArray(document.querySelectorAll('.bd-content [href="#"]'))
+    .forEach(function (link) {
+      link.addEventListener('click', function (e) {
+        e.preventDefault()
+      })
+    })
+
+  // Modal relatedTarget demo
+  var exampleModal = document.getElementById('exampleModal')
+  if (exampleModal) {
+    exampleModal.addEventListener('show.bs.modal', function (event) {
+      var button = event.relatedTarget // Button that triggered the modal
+      var recipient = button.getAttribute('data-whatever') // Extract info from data-* attributes
+
+      // Update the modal's content.
+      var modalTitle = exampleModal.querySelector('.modal-title')
+      var modalBodyInput = exampleModal.querySelector('.modal-body input')
+
+      modalTitle.innerHTML = 'New message to ' + recipient
+      modalBodyInput.value = recipient
+    })
+  }
+
+  // Activate animated progress bar
+  var btnToggleAnimatedProgress = document.getElementById('btnToggleAnimatedProgress')
+  if (btnToggleAnimatedProgress) {
+    btnToggleAnimatedProgress.addEventListener('click', function () {
+      btnToggleAnimatedProgress.parentNode
+        .querySelector('.progress-bar-striped')
+        .classList
+        .toggle('progress-bar-animated')
+    })
+  }
+
+  // Insert copy to clipboard button before .highlight
+  var btnHtml = '<div class="bd-clipboard"><button type="button" class="btn-clipboard" title="Copy to clipboard">Copy</button></div>'
+  makeArray(document.querySelectorAll('figure.highlight, div.highlight'))
+    .forEach(function (element) {
+      element.insertAdjacentHTML('beforebegin', btnHtml)
+    })
+
+  makeArray(document.querySelectorAll('.btn-clipboard'))
+    .forEach(function (btn) {
+      var tooltipBtn = new bootstrap.Tooltip(btn)
+
+      btn.addEventListener('mouseleave', function () {
+        // Explicitly hide tooltip, since after clicking it remains
+        // focused (as it's a button), so tooltip would otherwise
+        // remain visible until focus is moved away
+        tooltipBtn.hide()
+      })
+    })
+
+  var clipboard = new ClipboardJS('.btn-clipboard', {
+    target: function (trigger) {
+      return trigger.parentNode.nextElementSibling
+    }
+  })
+
+  clipboard.on('success', function (e) {
+    var tooltipBtn = bootstrap.Tooltip.getInstance(e.trigger)
+
+    e.trigger.setAttribute('data-original-title', 'Copied!')
+    tooltipBtn.show()
+
+    e.trigger.setAttribute('data-original-title', 'Copy to clipboard')
+    e.clearSelection()
+  })
+
+  clipboard.on('error', function (e) {
+    var modifierKey = /Mac/i.test(navigator.userAgent) ? '\u2318' : 'Ctrl-'
+    var fallbackMsg = 'Press ' + modifierKey + 'C to copy'
+    var tooltipBtn = bootstrap.Tooltip.getInstance(e.trigger)
+
+    e.trigger.setAttribute('title', fallbackMsg)
+    tooltipBtn._fixTitle()
+    tooltipBtn.show()
+
+    e.trigger.setAttribute('title', 'Copy to clipboard')
+    tooltipBtn._fixTitle()
+  })
+
+  anchors.options = {
+    icon: '#'
+  }
+  anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
+
+  // Wrap inner
+  makeArray(document.querySelectorAll('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5'))
+    .forEach(function (hEl) {
+      hEl.innerHTML = '<span class="bd-content-title">' + hEl.innerHTML + '</span>'
+    })
+
+  bsCustomFileInput.init()
+})()
--- a/site/assets/js/src/search.js
+++ b/site/assets/js/src/search.js
@@ -0,0 +1,59 @@
+// NOTICE!! DO NOT USE ANY OF THIS JAVASCRIPT
+// IT'S ALL JUST JUNK FOR OUR DOCS!
+// ++++++++++++++++++++++++++++++++++++++++++
+
+(function () {
+  'use strict'
+
+  if (!window.docsearch) {
+    return
+  }
+
+  var inputElement = document.getElementById('search-input')
+  var siteDocsVersion = inputElement.getAttribute('data-docs-version')
+
+  function getOrigin() {
+    var location = window.location
+    var origin = location.origin
+
+    if (!origin) {
+      var port = location.port ? ':' + location.port : ''
+
+      origin = location.protocol + '//' + location.hostname + port
+    }
+
+    return origin
+  }
+
+  window.docsearch({
+    apiKey: '5990ad008512000bba2cf951ccf0332f',
+    indexName: 'bootstrap',
+    inputSelector: '#search-input',
+    algoliaOptions: {
+      facetFilters: ['version:' + siteDocsVersion]
+    },
+    transformData: function (hits) {
+      return hits.map(function (hit) {
+        var currentUrl = getOrigin()
+        var liveUrl = 'https://getbootstrap.com'
+
+        // When in production, return the result as is,
+        // otherwise remove our url from it.
+        // eslint-disable-next-line no-negated-condition
+        hit.url = currentUrl.indexOf(liveUrl) !== -1 ?
+          hit.url :
+          hit.url.replace(liveUrl, '')
+
+        // Prevent jumping to first header
+        if (hit.anchor === 'content') {
+          hit.url = hit.url.replace(/#content$/, '')
+          hit.anchor = null
+        }
+
+        return hit
+      })
+    },
+    // Set debug to `true` if you want to inspect the dropdown
+    debug: false
+  })
+})()
--- a/site/assets/js/vendor/anchor.min.js
+++ b/site/assets/js/vendor/anchor.min.js
--- a/site/assets/js/vendor/bs-custom-file-input.min.js
+++ b/site/assets/js/vendor/bs-custom-file-input.min.js
@@ -0,0 +1,7 @@
+/*!
+ * bsCustomFileInput v1.3.2 (https://github.com/Johann-S/bs-custom-file-input)
+ * Copyright 2018 - 2019 Johann-S <johann.servoire@gmail.com>
+ * Licensed under MIT (https://github.com/Johann-S/bs-custom-file-input/blob/master/LICENSE)
+ */
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).bsCustomFileInput=t()}(this,function(){"use strict";var d={CUSTOMFILE:'.custom-file input[type="file"]',CUSTOMFILELABEL:".custom-file-label",FORM:"form",INPUT:"input"},r=function(e){if(0<e.childNodes.length)for(var t=[].slice.call(e.childNodes),n=0;n<t.length;n++){var r=t[n];if(3!==r.nodeType)return r}return e},u=function(e){var t=e.bsCustomFileInput.defaultText,n=e.parentNode.querySelector(d.CUSTOMFILELABEL);n&&(r(n).innerHTML=t)},n=!!window.File,l=function(e){if(e.hasAttribute("multiple")&&n)return[].slice.call(e.files).map(function(e){return e.name}).join(", ");if(-1===e.value.indexOf("fakepath"))return e.value;var t=e.value.split("\\");return t[t.length-1]};function v(){var e=this.parentNode.querySelector(d.CUSTOMFILELABEL);if(e){var t=r(e),n=l(this);n.length?t.innerHTML=n:u(this)}}function p(){for(var e=[].slice.call(this.querySelectorAll(d.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),t=0,n=e.length;t<n;t++)u(e[t])}var m="bsCustomFileInput",L="reset",h="change";return{init:function(e,t){void 0===e&&(e=d.CUSTOMFILE),void 0===t&&(t=d.FORM);for(var n,r,l,i=[].slice.call(document.querySelectorAll(e)),o=[].slice.call(document.querySelectorAll(t)),u=0,c=i.length;u<c;u++){var f=i[u];Object.defineProperty(f,m,{value:{defaultText:(n=f,r=void 0,void 0,r="",l=n.parentNode.querySelector(d.CUSTOMFILELABEL),l&&(r=l.innerHTML),r)},writable:!0}),v.call(f),f.addEventListener(h,v)}for(var a=0,s=o.length;a<s;a++)o[a].addEventListener(L,p),Object.defineProperty(o[a],m,{value:!0,writable:!0})},destroy:function(){for(var e=[].slice.call(document.querySelectorAll(d.FORM)).filter(function(e){return!!e.bsCustomFileInput}),t=[].slice.call(document.querySelectorAll(d.INPUT)).filter(function(e){return!!e.bsCustomFileInput}),n=0,r=t.length;n<r;n++){var l=t[n];u(l),l[m]=void 0,l.removeEventListener(h,v)}for(var i=0,o=e.length;i<o;i++)e[i].removeEventListener(L,p),e[i][m]=void 0}}});
+//# sourceMappingURL=bs-custom-file-input.min.js.map
--- a/site/assets/js/vendor/clipboard.min.js
+++ b/site/assets/js/vendor/clipboard.min.js
--- a/site/assets/scss/_ads.scss
+++ b/site/assets/scss/_ads.scss
@@ -0,0 +1,39 @@
+// stylelint-disable declaration-no-important, selector-max-id
+
+//
+// Carbon ads
+//
+
+#carbonads {
+  position: static;
+  display: block;
+  max-width: 400px;
+  padding: 15px 15px 15px 160px;
+  margin: 2rem 0;
+  overflow: hidden;
+  @include font-size(.8125rem);
+  line-height: 1.4;
+  text-align: left;
+  background-color: rgba(0, 0, 0, .05);
+
+  a {
+    color: $gray-800;
+    text-decoration: none;
+  }
+
+  @include media-breakpoint-up(sm) {
+    max-width: 330px;
+    @include border-radius(4px);
+  }
+}
+
+.carbon-img {
+  float: left;
+  margin-left: -145px;
+}
+
+.carbon-poweredby {
+  display: block;
+  margin-top: .75rem;
+  color: $gray-700 !important;
+}
--- a/site/assets/scss/_algolia.scss
+++ b/site/assets/scss/_algolia.scss
@@ -0,0 +1,155 @@
+// stylelint-disable declaration-no-important
+
+// Docsearch overrides
+//
+// `!important` indicates overridden properties.
+.algolia-autocomplete {
+  display: block !important;
+  flex: 1;
+
+  // Menu container
+  .ds-dropdown-menu {
+    width: 100%;
+    min-width: 0 !important;
+    max-width: none !important;
+    padding: .75rem 0 !important;
+    background-color: $white;
+    background-clip: padding-box;
+    border: 1px solid rgba(0, 0, 0, .1);
+    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
+
+    @include media-breakpoint-up(md) {
+      width: 175%;
+    }
+
+    // Caret
+    &::before {
+      display: none !important;
+    }
+
+    [class^="ds-dataset-"] {
+      padding: 0 !important;
+      overflow: visible !important;
+      background-color: transparent !important;
+      border: 0 !important;
+    }
+
+    .ds-suggestions {
+      margin-top: 0 !important;
+    }
+  }
+
+  .algolia-docsearch-suggestion {
+    padding: 0 !important;
+    overflow: visible !important;
+  }
+
+  .algolia-docsearch-suggestion--category-header {
+    padding: .125rem 1rem !important;
+    margin-top: 0 !important;
+    @include font-size(.875rem, true);
+    font-weight: 600 !important;
+    color: $bd-purple-bright !important;
+    border-bottom: 0 !important;
+  }
+
+  .algolia-docsearch-suggestion--wrapper {
+    float: none !important;
+    padding-top: 0 !important;
+  }
+
+  // Section header
+  .algolia-docsearch-suggestion--subcategory-column {
+    float: none !important;
+    width: auto !important;
+    padding: 0 !important;
+    text-align: left !important;
+  }
+
+  .algolia-docsearch-suggestion--subcategory-inline {
+    display: block !important;
+    @include font-size(.875rem);
+    color: $gray-700;
+
+    &::after {
+      padding: 0 .25rem;
+      content: "/";
+    }
+  }
+
+  .algolia-docsearch-suggestion--content {
+    display: flex;
+    flex-wrap: wrap;
+    float: none !important;
+    width: 100% !important;
+    padding: .25rem 1rem !important;
+
+    // Vertical divider between column header and content
+    &::before {
+      display: none !important;
+    }
+  }
+
+  .ds-suggestion {
+    &:not(:first-child) {
+      .algolia-docsearch-suggestion--category-header {
+        padding-top: .75rem !important;
+        margin-top: .75rem !important;
+        border-top: 1px solid rgba(0, 0, 0, .1);
+      }
+    }
+
+    .algolia-docsearch-suggestion--subcategory-column {
+      display: none !important;
+    }
+  }
+
+  .algolia-docsearch-suggestion--title {
+    display: block;
+    margin-bottom: 0 !important;
+    @include font-size(.875rem, true);
+    font-weight: 400 !important;
+  }
+
+  .algolia-docsearch-suggestion--text {
+    flex: 0 0 100%;
+    max-width: 100%;
+    padding: .2rem 0;
+    @include font-size(.8125rem, true);
+    font-weight: 400;
+    line-height: 1.25 !important;
+    color: $gray-600;
+  }
+
+  .algolia-docsearch-footer {
+    float: none !important;
+    width: auto !important;
+    height: auto !important;
+    padding: .75rem 1rem 0;
+    @include font-size(.75rem, true);
+    line-height: 1 !important;
+    color: $gray-600 !important;
+    border-top: 1px solid rgba(0, 0, 0, .1);
+  }
+
+  .algolia-docsearch-footer--logo {
+    display: inline !important;
+    overflow: visible !important;
+    color: inherit !important;
+    text-indent: 0 !important;
+    background: none !important;
+  }
+
+  .algolia-docsearch-suggestion--highlight {
+    color: #5f2dab;
+    background-color: rgba(154, 132, 187, .12);
+  }
+
+  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
+    box-shadow: inset 0 -2px 0 0 rgba(95, 45, 171, .5) !important;
+  }
+
+  .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
+    background-color: rgba(208, 189, 236, .15) !important;
+  }
+}
--- a/site/assets/scss/_anchor.scss
+++ b/site/assets/scss/_anchor.scss
@@ -0,0 +1,10 @@
+.anchorjs-link {
+  font-weight: 400;
+  color: rgba($link-color, .5);
+  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+  &:hover {
+    color: $link-color;
+    text-decoration: none;
+  }
+}
--- a/site/assets/scss/_brand.scss
+++ b/site/assets/scss/_brand.scss
@@ -0,0 +1,67 @@
+//
+// Brand guidelines
+//
+
+// Logo series wrapper
+.bd-brand-logos {
+  color: $bd-purple;
+
+  .inverse {
+    color: $white;
+    background-color: $bd-purple;
+  }
+}
+
+// Individual items
+.bd-brand-item {
+  width: 100%;
+  padding: 4rem 1rem;
+
+  + .bd-brand-item {
+    border-top: 1px solid $white;
+  }
+
+  @include media-breakpoint-up(md) {
+    + .bd-brand-item {
+      border-top: 0;
+      border-left: 1px solid $white;
+    }
+  }
+}
+
+
+//
+// Color swatches
+//
+
+.color-swatches {
+  display: flex;
+  margin: 0 -5px;
+
+  // Docs colors
+  .bd-purple {
+    background-color: $bd-purple;
+  }
+  .bd-purple-light {
+    background-color: $bd-purple-light;
+  }
+  .bd-purple-lighter {
+    background-color: #e5e1ea;
+  }
+  .bd-gray {
+    background-color: #f9f9f9;
+  }
+}
+
+.color-swatch {
+  width: 4rem;
+  height: 4rem;
+  margin-right: .25rem;
+  margin-left: .25rem;
+  @include border-radius();
+
+  @include media-breakpoint-up(md) {
+    width: 6rem;
+    height: 6rem;
+  }
+}
--- a/site/assets/scss/_buttons.scss
+++ b/site/assets/scss/_buttons.scss
@@ -0,0 +1,54 @@
+// Buttons
+//
+// Custom buttons for the docs.
+
+.btn-bd-primary {
+  font-weight: 600;
+  color: $bd-purple-bright;
+  border-color: $bd-purple-bright;
+
+  &:hover,
+  &:active {
+    color: $white;
+    background-color: $bd-purple-bright;
+    border-color: $bd-purple-bright;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+}
+
+.btn-bd-download {
+  font-weight: 600;
+  color: $bd-download;
+  border-color: $bd-download;
+
+  &:hover,
+  &:active {
+    color: $bd-dark;
+    background-color: $bd-download;
+    border-color: $bd-download;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bd-download, .25);
+  }
+}
+
+.btn-bd-light {
+  color: $gray-600;
+  border-color: $gray-300;
+
+  .show > &,
+  &:hover,
+  &:active {
+    color: $bd-purple-bright;
+    background-color: $white;
+    border-color: $bd-purple-bright;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+}
--- a/site/assets/scss/_callouts.scss
+++ b/site/assets/scss/_callouts.scss
@@ -0,0 +1,39 @@
+//
+// Callouts
+//
+
+.bd-callout {
+  padding: 1.25rem;
+  margin-top: 1.25rem;
+  margin-bottom: 1.25rem;
+  border: 1px solid $gray-200;
+  border-left-width: .25rem;
+  @include border-radius();
+
+  h4 {
+    margin-bottom: .25rem;
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
+  code {
+    @include border-radius();
+  }
+
+  + .bd-callout {
+    margin-top: -.25rem;
+  }
+}
+
+// Variations
+@mixin bs-callout-variant($color) {
+  border-left-color: $color;
+
+  h4 { color: $color; }
+}
+
+.bd-callout-info { @include bs-callout-variant($bd-info); }
+.bd-callout-warning { @include bs-callout-variant($bd-warning); }
+.bd-callout-danger { @include bs-callout-variant($bd-danger); }
--- a/site/assets/scss/_clipboard-js.scss
+++ b/site/assets/scss/_clipboard-js.scss
@@ -0,0 +1,36 @@
+// clipboard.js
+//
+// JS-based `Copy` buttons for code snippets.
+
+.bd-clipboard {
+  position: relative;
+  display: none;
+  float: right;
+
+  + .highlight {
+    margin-top: 0;
+  }
+
+  @include media-breakpoint-up(md) {
+    display: block;
+  }
+}
+
+.btn-clipboard {
+  position: absolute;
+  top: .5rem;
+  right: .5rem;
+  z-index: 10;
+  display: block;
+  padding: .25rem .5rem;
+  @include font-size(.75em);
+  color: $gray-800;
+  background-color: transparent;
+  border: 0;
+  @include border-radius();
+
+  &:hover {
+    color: $white;
+    background-color: $primary;
+  }
+}
--- a/site/assets/scss/_colors.scss
+++ b/site/assets/scss/_colors.scss
@@ -0,0 +1,17 @@
+//
+// Docs color palette classes
+//
+
+@each $color, $value in $colors {
+  .swatch-#{$color} {
+    color: color-yiq($value);
+    background-color: #{$value};
+  }
+}
+
+@each $color, $value in $grays {
+  .swatch-#{$color} {
+    color: color-yiq($value);
+    background-color: #{$value};
+  }
+}
--- a/site/assets/scss/_component-examples.scss
+++ b/site/assets/scss/_component-examples.scss
@@ -0,0 +1,270 @@
+// stylelint-disable no-duplicate-selectors
+
+//
+// Grid examples
+//
+
+.bd-example-row {
+  .row {
+    > .col,
+    > [class^="col-"] {
+      padding-top: .75rem;
+      padding-bottom: .75rem;
+      background-color: rgba(86, 61, 124, .15);
+      border: 1px solid rgba(86, 61, 124, .2);
+    }
+  }
+
+  .row + .row {
+    margin-top: 1rem;
+  }
+}
+
+.bd-example-row-flex-cols .row {
+  min-height: 10rem;
+  background-color: rgba(255, 0, 0, .1);
+}
+
+.bd-highlight {
+  background-color: rgba($bd-purple, .15);
+  border: 1px solid rgba($bd-purple, .15);
+}
+
+.bd-example-responsive-containers {
+  [class^="container"] {
+    padding-top: .75rem;
+    padding-bottom: .75rem;
+    background-color: rgba(86, 61, 124, .15);
+    border: 1px solid rgba(86, 61, 124, .2);
+  }
+}
+
+// Grid mixins
+.example-container {
+  width: 800px;
+  @include make-container();
+}
+
+.example-row {
+  @include make-row();
+}
+
+.example-content-main {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(8);
+  }
+}
+
+.example-content-secondary {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(4);
+  }
+}
+
+
+//
+// Docs examples
+//
+
+.bd-example {
+  position: relative;
+  padding: 1rem;
+  margin: 1rem (-$grid-gutter-width / 2) 0;
+  border: solid $gray-100;
+  border-width: .2rem 0 0;
+  @include clearfix();
+
+  @include media-breakpoint-up(sm) {
+    padding: 1.5rem;
+    margin-right: 0;
+    margin-left: 0;
+    border-width: .2rem;
+  }
+
+  + .highlight,
+  + .clipboard + .highlight {
+    margin-top: 0;
+  }
+
+  + p {
+    margin-top: 2rem;
+  }
+
+  > .form-control {
+    + .form-control {
+      margin-top: .5rem;
+    }
+  }
+
+  > .nav + .nav,
+  > .alert + .alert,
+  > .navbar + .navbar,
+  > .progress + .progress {
+    margin-top: 1rem;
+  }
+
+  > .dropdown-menu {
+    position: static;
+    display: block;
+  }
+
+  > .form-group:last-child {
+    margin-bottom: 0;
+  }
+}
+
+// Images
+.bd-example {
+  > svg + svg,
+  > img + img {
+    margin-left: .5rem;
+  }
+}
+
+// Buttons
+.bd-example {
+  > .btn,
+  > .btn-group {
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+  }
+  > .btn-toolbar + .btn-toolbar {
+    margin-top: .5rem;
+  }
+}
+
+// List groups
+.bd-example > .list-group {
+  max-width: 400px;
+}
+
+.bd-example > [class*="list-group-horizontal"] {
+  max-width: 100%;
+}
+
+// Navbars
+.bd-example {
+  .fixed-top,
+  .sticky-top {
+    position: static;
+    margin: -1rem -1rem 1rem;
+  }
+
+  .fixed-bottom {
+    position: static;
+    margin: 1rem -1rem -1rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    .fixed-top,
+    .sticky-top {
+      margin: -1.5rem -1.5rem 1rem;
+    }
+    .fixed-bottom {
+      margin: 1rem -1.5rem -1.5rem;
+    }
+  }
+}
+
+// Pagination
+.bd-example .pagination {
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+}
+
+.bd-example-modal {
+  background-color: #fafafa;
+
+  .modal {
+    position: static;
+    display: block;
+  }
+}
+
+// Tooltips
+.tooltip-demo a {
+  white-space: nowrap;
+}
+
+// Scrollspy demo on fixed height div
+.scrollspy-example {
+  position: relative;
+  height: 200px;
+  margin-top: .5rem;
+  overflow: auto;
+}
+
+.scrollspy-example-2 {
+  position: relative;
+  height: 350px;
+  overflow: auto;
+}
+
+.bd-example-border-utils {
+  [class^="border"] {
+    display: inline-block;
+    width: 5rem;
+    height: 5rem;
+    margin: .25rem;
+    background-color: #f5f5f5;
+  }
+}
+
+.bd-example-border-utils-0 {
+  [class^="border"] {
+    border: 1px solid $border-color;
+  }
+}
+
+//
+// Code snippets
+//
+
+.highlight {
+  padding: 1rem;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  background-color: $gray-100;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  @include media-breakpoint-up(sm) {
+    padding: 1.5rem;
+  }
+}
+
+.bd-content .highlight {
+  margin-right: (-$grid-gutter-width / 2);
+  margin-left: (-$grid-gutter-width / 2);
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+.highlight {
+  pre {
+    padding: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+    background-color: transparent;
+    border: 0;
+  }
+
+  pre code {
+    @include font-size(inherit);
+    color: $gray-900; // Effectively the base text color
+  }
+}
--- a/site/assets/scss/_content.scss
+++ b/site/assets/scss/_content.scss
@@ -0,0 +1,98 @@
+// stylelint-disable no-duplicate-selectors, selector-max-combinators, selector-max-compound-selectors, selector-max-type, selector-no-qualifying-type
+
+//
+// Automatically style Markdown-based tables like a Bootstrap `.table`.
+//
+
+.bd-content {
+  order: 1;
+
+  // Hack the sticky header
+  > h2[id],
+  > h3[id],
+  > h4[id] {
+    pointer-events: none;
+
+    &::before {
+      display: block;
+      height: 6rem;
+      margin-top: -6rem;
+      content: "";
+    }
+  }
+
+  // Override Bootstrap defaults
+  > .table {
+    max-width: 100%;
+    margin-bottom: 1.5rem;
+
+    @include media-breakpoint-down(md) {
+      display: block;
+      overflow-x: auto;
+
+      &.table-bordered {
+        border: 0;
+      }
+    }
+
+    th,
+    td {
+      &:first-child { padding-left: 0; }
+      &:not(:last-child) { padding-right: 1.5rem; }
+    }
+
+    // Prevent breaking of code (e.g., Grunt tasks list)
+    td:first-child > code {
+      white-space: nowrap;
+    }
+  }
+}
+
+.bd-content-title {
+  display: block;
+  pointer-events: auto;
+}
+
+//
+// Docs sections
+//
+
+.bd-content {
+  > h2 {
+    @include font-size($h2-font-size);
+  }
+
+  > h3 {
+    @include font-size($h3-font-size);
+  }
+
+  > h4 {
+    @include font-size($h4-font-size);
+  }
+
+  > h2:not(:first-child) {
+    margin-top: 3rem;
+  }
+
+  > h3 {
+    margin-top: 1.5rem;
+  }
+
+  > ul li,
+  > ol li {
+    margin-bottom: .25rem;
+  }
+}
+
+.bd-title {
+  margin-bottom: .5rem;
+  @include font-size(3rem);
+}
+
+.bd-lead {
+  @include font-size(1.5rem);
+  font-weight: 300;
+}
+
+.bd-text-purple { color: $bd-purple; }
+.bd-text-purple-bright { color: $bd-purple-bright; }
--- a/site/assets/scss/_footer.scss
+++ b/site/assets/scss/_footer.scss
@@ -0,0 +1,35 @@
+//
+// Footer
+//
+
+.bd-footer {
+  @include font-size(.875rem);
+  color: #63707c;
+
+  a {
+    font-weight: 600;
+    color: $gray-700;
+
+    &:hover,
+    &:focus {
+      color: $link-color;
+    }
+  }
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.bd-footer-links {
+  padding-left: 0;
+  margin-bottom: 1rem;
+
+  li {
+    display: inline-block;
+
+    + li {
+      margin-left: 1rem;
+    }
+  }
+}
--- a/site/assets/scss/_masthead.scss
+++ b/site/assets/scss/_masthead.scss
@@ -0,0 +1,58 @@
+// stylelint-disable declaration-no-important
+
+.bd-masthead {
+  padding: 3rem 0;
+  background-image: linear-gradient(45deg, #fafafa, #f5f5f5);
+
+  h1 {
+    @include font-size(4rem);
+    line-height: 1;
+  }
+
+  p:not(.lead) {
+    color: $gray-700;
+  }
+
+  .btn {
+    padding: .8rem 2rem;
+    font-weight: 600;
+  }
+
+  @include media-breakpoint-up(sm) {
+    padding: 5rem 0;
+  }
+}
+
+.lead-lg {
+  @include font-size(1.5rem);
+}
+
+.home-icon {
+  width: 6rem;
+  height: 6rem;
+  padding: 1.5rem;
+  color: $white;
+  @include border-radius(25%);
+  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .15), inset 0 -1px 0 rgba(0, 0, 0, .15);
+
+  &-purple {
+    background-image: linear-gradient(180deg, $pink, $purple);
+  }
+
+  &-blue {
+    background-image: linear-gradient(180deg, $teal, $blue);
+  }
+
+  &-yellow {
+    background-image: linear-gradient(180deg, $yellow, $orange);
+  }
+}
+
+@include media-breakpoint-up(md) {
+  .mw-md-75 { max-width: 75%; }
+}
+
+.half-rule {
+  width: 6rem;
+  margin: 2rem 0;
+}
--- a/site/assets/scss/_navbar.scss
+++ b/site/assets/scss/_navbar.scss
@@ -0,0 +1,43 @@
+.bd-navbar {
+  min-height: 4rem;
+  background-color: $bd-purple-bright;
+
+  @include media-breakpoint-down(md) {
+    .navbar-nav-scroll {
+      width: 100%;
+      height: 2.5rem;
+      margin-top: .25rem;
+      overflow: hidden;
+
+      .navbar-nav {
+        padding-bottom: 2rem;
+        overflow-x: auto;
+        white-space: nowrap;
+        -webkit-overflow-scrolling: touch;
+      }
+    }
+  }
+
+  .navbar-nav {
+    .nav-link {
+      color: rgba($white, .85);
+
+      &.active,
+      &:hover,
+      &:focus {
+        color: $white;
+      }
+
+      &.active {
+        font-weight: 600;
+      }
+    }
+  }
+
+  .navbar-nav-svg {
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    vertical-align: text-top;
+  }
+}
--- a/site/assets/scss/_placeholder-img.scss
+++ b/site/assets/scss/_placeholder-img.scss
@@ -0,0 +1,15 @@
+//
+// Placeholder svg used in the docs.
+//
+
+// Remember to update `site/_layouts/examples.html` too if this changes!
+
+.bd-placeholder-img {
+  @include font-size(1.125rem);
+  text-anchor: middle;
+  user-select: none;
+}
+
+.bd-placeholder-img-lg {
+  @include font-size(3.5rem);
+}
--- a/site/assets/scss/_sidebar.scss
+++ b/site/assets/scss/_sidebar.scss
@@ -0,0 +1,83 @@
+// stylelint-disable declaration-no-important
+
+.bd-links {
+  @include media-breakpoint-up(md) {
+    @supports (position: sticky) {
+      position: sticky;
+      top: 5rem;
+      height: calc(100vh - 7rem);
+      overflow-y: auto;
+    }
+  }
+
+  // Override collapse behaviors
+  @include media-breakpoint-up(md) {
+    display: block !important;
+  }
+}
+
+:not(.active) > .bd-sidenav {
+  display: none;
+}
+
+.bd-sidenav-group-link {
+  padding: .25rem .625rem .25rem .5rem;
+  font-weight: 600;
+  color: rgba($black, .65);
+  @include border-radius(.25rem);
+
+  > * { pointer-events: none; }
+
+  &:hover,
+  &:focus {
+    color: rgba($black, .85);
+    text-decoration: none;
+    background-color: rgba($bd-purple-bright, .1);
+  }
+}
+
+.bd-sidenav-group {
+  &.has-children .bd-sidenav-group-link::before {
+    display: inline-block;
+    margin-right: .25rem;
+    line-height: 0; // Align in the middle
+    content: escape-svg($sidebar-collapse-icon);
+  }
+
+  &.active {
+    .bd-sidenav-group-link::before {
+      transform: rotate(90deg);
+    }
+
+    > .bd-sidenav-group-link {
+      color: rgba($black, .85);
+    }
+  }
+}
+
+// All levels of nav
+.bd-sidebar .nav {
+  padding-left: 1.25rem;
+
+  > li > a {
+    display: inline-block;
+    padding: .25rem .5rem;
+    @include font-size(.875rem);
+    color: rgba($black, .65);
+    @include border-radius(.25rem);
+
+    &:hover,
+    &:focus {
+      color: rgba($black, .85);
+      text-decoration: none;
+      background-color: rgba($bd-purple-bright, .1);
+    }
+  }
+
+  > .active > a,
+  > .active:hover > a,
+  > .active:focus > a {
+    font-weight: 600;
+    color: rgba($black, .85);
+  }
+}
--- a/site/assets/scss/_skippy.scss
+++ b/site/assets/scss/_skippy.scss
@@ -0,0 +1,17 @@
+.skippy {
+  display: block;
+  padding: 1em;
+  color: $white;
+  text-align: center;
+  background-color: $bd-purple;
+  outline: 0;
+
+  &:hover {
+    color: $white;
+  }
+}
+
+.skippy-text {
+  padding: .5em;
+  outline: 1px dotted;
+}
--- a/site/assets/scss/_subnav.scss
+++ b/site/assets/scss/_subnav.scss
@@ -0,0 +1,42 @@
+.bd-subnavbar {
+  // 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, .75);
+  backdrop-filter: blur(1rem);
+  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.active {
+    font-weight: 600;
+    color: $gray-900;
+    background: escape-svg($dropdown-active-icon) no-repeat .4rem .6rem/.75rem .75rem;
+  }
+
+  @include media-breakpoint-up(md) {
+    position: sticky;
+    top: 0;
+  }
+}
+
+.bd-search {
+  position: relative; // To contain the Algolia search
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+  }
+
+  .form-control:focus {
+    border-color: $bd-purple-bright;
+    box-shadow: 0 0 0 3px rgba($bd-purple-bright, .25);
+  }
+}
+
+.bd-search-docs-toggle {
+  line-height: 1;
+  color: $gray-900;
+}
--- a/site/assets/scss/_syntax.scss
+++ b/site/assets/scss/_syntax.scss
@@ -0,0 +1,94 @@
+// stylelint-disable comment-empty-line-before, declaration-block-single-line-max-declarations, selector-class-pattern
+
+/* NEW Background .chroma { background-color: #f0f0f0; } */
+/* NEW Error .chroma .err { } */
+/* NEW LineTableTD .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } */
+/* NEW LineTable .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } */
+/* NEW LineHighlight .chroma .hl { display: block; width: 100%; background-color: #ffffcc; } */
+/* NEW LineNumbersTable .chroma .lnt { margin-right: .4em; padding: 0 .4em; } */
+/* NEW LineNumbers .chroma .ln { margin-right: .4em; padding: 0 .4em; } */
+
+/* LiteralStringDelimiter */ .chroma .dl { color: #4070a0; } /* NEW */
+/* Comment */ .chroma .c { color: #727272; }
+/* CommentMultiline */ .chroma .c1 { color: #727272; }
+/* CommentHashbang */ .chroma .ch { font-style: italic; color: #60a0b0; } /* NEW */
+/* CommentMultiline */ .chroma .cm { color: #727272; }
+/* CommentPreproc */ .chroma .cp { color: #008085; }
+/* CommentPreprocFile */ .chroma .cpf { color: #007020; } /* NEW */
+/* CommentSpecial */ .chroma .cs { color: #727272; }
+/* GenericDeleted */ .chroma .gd { background-color: #fcc; border: 1px solid #c00; }
+/* GenericEmph */ .chroma .ge { font-style: italic; }
+/* GenericHeading */ .chroma .gh { color: #030; }
+/* GenericInserted */ .chroma .gi { background-color: #cfc; border: 1px solid #0c0; }
+/* GenericUnderline */ .chroma .gl { text-decoration: underline; } /* NEW */
+/* GenericOutput */ .chroma .go { color: #aaa; }
+/* GenericPrompt */ .chroma .gp { color: #009; }
+/* GenericError */ .chroma .gr { color: #f00; }
+/* GenericStrong */ .chroma .gs { font-weight: 700; } /* NEW */
+/* GenericTraceback */ .chroma .gt { color: #9c6; }
+/* GenericSubheading */ .chroma .gu { color: #030; }
+/* LiteralNumberIntegerLong */ .chroma .il { color: #c24f19; }
+/* Keyword */ .chroma .k { color: #069; }
+/* KeywordConstant */ .chroma .kc { color: #069; }
+/* KeywordDeclaration */ .chroma .kd { color: #069; }
+/* KeywordNamespace */ .chroma .kn { color: #069; }
+/* KeywordPseudo */ .chroma .kp { color: #069; }
+/* KeywordReserved */ .chroma .kr { color: #069; }
+/* KeywordType */ .chroma .kt { color: #078; }
+/* LiteralNumber */ .chroma .m { color: #c24f19; }
+/* LiteralNumberFloat */ .chroma .mf { color: #c24f19; }
+/* LiteralNumberBin */ .chroma .mb { color: #40a070; } /* NEW */
+/* LiteralNumberHex */ .chroma .mh { color: #c24f19; }
+/* LiteralNumberInteger */ .chroma .mi { color: #c24f19; }
+/* LiteralNumberOct */ .chroma .mo { color: #c24f19; }
+/* NameAttribute */ .chroma .na { color: #006ee0; }
+/* NameBuiltin */ .chroma .nb { color: #366; }
+/* NameClass */ .chroma .nc { color: #168174; }
+/* NameDecorator */ .chroma .nd { color: #6b62de; }
+/* NameException */ .chroma .ne { color: #c00; }
+/* NameFunction */ .chroma .nf { color: #b715f4; }
+/* NameEntity */ .chroma .ni { color: #727272; }
+/* NameLabel */ .chroma .nl { color: #6b62de; }
+/* NameNamespace */ .chroma .nn { color: #007ca5; }
+/* NameConstant */ .chroma .no { color: #360; }
+/* NameTag */ .chroma .nt { color: #2f6f9f; }
+/* NameVariable */ .chroma .nv { color: #033; }
+/* Operator */ .chroma .o { color: #555; }
+/* OperatorWord */ .chroma .ow { color: #000; }
+/* LiteralString */ .chroma .s { color: #d73038; }
+/* LiteralStringSingle */ .chroma .s1 { color: #c30; }
+/* LiteralStringDouble */ .chroma .s2 { color: #c30; }
+/* LiteralStringAffix */ .chroma .sa { color: #4070a0; } /* NEW */
+/* LiteralStringBacktick */ .chroma .sb { color: #c30; }
+/* LiteralStringChar */ .chroma .sc { color: #c30; }
+/* LiteralStringDoc */ .chroma .sd { font-style: italic; color: #c30; }
+/* LiteralStringEscape */ .chroma .se { color: #c30; }
+/* LiteralStringHeredoc */ .chroma .sh { color: #c30; }
+/* LiteralStringInterpol */ .chroma .si { color: #a00; }
+/* LiteralStringRegex */ .chroma .sr { color: #337e7e; }
+/* LiteralStringSymbol */ .chroma .ss { color: #fc3; }
+/* LiteralStringOther */ .chroma .sx { color: #c30; }
+/* TextWhitespace */ .chroma .w { color: #bbb; }
+
+.chroma {
+  .language-bash,
+  .language-sh {
+    &::before {
+      color: #009;
+      content: "$ ";
+      user-select: none;
+    }
+
+    // This is just to work around a Chroma bug;
+    // should be removed when fixed upstream
+    .m {
+      color: inherit;
+    }
+  }
+
+  .language-powershell::before {
+    color: #009;
+    content: "PM> ";
+    user-select: none;
+  }
+}
--- a/site/assets/scss/_toc.scss
+++ b/site/assets/scss/_toc.scss
@@ -0,0 +1,25 @@
+// stylelint-disable selector-max-type, selector-max-combinators, selector-max-compound-selectors
+
+.bd-toc nav {
+  padding-top: .125em;
+  padding-bottom: .125em;
+  border-left: .25em solid $gray-200;
+
+  > ul {
+    padding-left: .5rem;
+    margin-bottom: 0;
+  }
+
+  > ul > li {
+    display: block;
+  }
+
+  li ul li {
+    margin-bottom: .25rem;
+    list-style-type: disc;
+  }
+
+  a code {
+    font: inherit;
+  }
+}
--- a/site/assets/scss/_variables.scss
+++ b/site/assets/scss/_variables.scss
@@ -0,0 +1,18 @@
+// stylelint-disable scss/dollar-variable-default
+
+// Local docs variables
+$bd-purple:        #563d7c;
+$bd-purple-bright: lighten(saturate($bd-purple, 5%), 15%);
+$bd-purple-light:  lighten(saturate($bd-purple, 5%), 45%);
+$bd-dark:          #2a2730;
+$bd-download:      #ffe484;
+$bd-info:          #5bc0de;
+$bd-warning:       #f0ad4e;
+$bd-danger:        #d9534f;
+$dropdown-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'><path fill='#292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>");
+$sidebar-collapse-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'><path fill='none' stroke='rgba(0,0,0,.5)' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/></svg>");
+
+// Enable responsive font sizes for font sizes defined in the docs
+// The weird if test is made as a workaround to prevent a false fusv error.
+//
+$enable-responsive-font-sizes: if($enable-responsive-font-sizes, true, true);
--- a/site/assets/scss/docs.scss
+++ b/site/assets/scss/docs.scss
@@ -0,0 +1,67 @@
+/*!
+ * Bootstrap Docs (https://getbootstrap.com/)
+ * Copyright 2011-2019 The Bootstrap Authors
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under the Creative Commons Attribution 3.0 Unported License.
+ * For details, see https://creativecommons.org/licenses/by/3.0/.
+ */
+
+// Dev notes
+//
+// Background information on nomenclature and architecture decisions here.
+//
+// - Bootstrap functions, variables, and mixins are included for easy reuse.
+//   Doing so gives us access to the same core utilities provided by Bootstrap.
+//   For example, consistent media queries through those mixins.
+//
+// - Bootstrap's **docs variables** are prefixed with `$bd-`.
+//   These custom colors avoid collision with the components Bootstrap provides.
+//
+// - Classes are prefixed with `.bd-`.
+//   These classes indicate custom-built or modified components for the design
+//   and layout of the Bootstrap docs. They are not included in our builds.
+//
+// Happy Bootstrapping!
+
+// Load Bootstrap variables and mixins
+@import "../../../scss/functions";
+@import "../../../scss/variables";
+@import "../../../scss/mixins";
+
+// Load docs components
+@import "variables";
+@import "navbar";
+@import "subnav";
+@import "masthead";
+@import "ads";
+@import "content";
+@import "skippy";
+@import "sidebar";
+@import "toc";
+@import "footer";
+@import "component-examples";
+@import "buttons";
+@import "callouts";
+@import "brand";
+@import "colors";
+@import "clipboard-js";
+@import "placeholder-img";
+
+// Load docs dependencies
+@import "syntax";
+@import "anchor";
+@import "algolia";
+
+// Temp
+.booticons-list {
+  .booticon {
+    display: inline;
+    width: 4rem;
+    padding: 1rem;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+    background-color: $white;
+    border: 1px solid rgba(0, 0, 0, .1);
+    @include border-radius(.25rem);
+  }
+}