11 files changed, 82 insertions, 57 deletions
diff --git a/docs/assets/scss/_ads.scss b/docs/assets/scss/_ads.scss
index 405cac30a..237b1e70b 100644
--- a/docs/assets/scss/_ads.scss
+++ b/docs/assets/scss/_ads.scss
@@ -1,66 +1,50 @@
-// scss-lint:disable ImportantRule
+// scss-lint:disable ImportantRule, IdSelector
 
 //
 // Carbon ads
 //
 
-.carbonad {
-  width: auto !important;
-  height: auto !important;
-  padding: 1.25rem !important;
-  margin: 2rem ($grid-gutter-width * -1) -2rem !important;
-  overflow: hidden; // clearfix
-  font-family: inherit !important;
-  font-size: .8rem !important;
-  line-height: 1rem !important;
-  color: $bd-purple-light !important;
+#carbonads {
+  display: block;
+  padding: 15px 15px 15px 160px;
+  margin: 50px -15px 0;
+  overflow: hidden;
+  font-size: 13px;
+  line-height: 1.5;
   text-align: left;
-  background: darken($bd-purple, 10%) !important;
-  border: 0 !important;
-}
-
-.carbonad-img {
-  margin: 0 !important;
-}
+  border: solid #866ab3;
+  border-width: 1px 0 0;
 
-.carbonad-text,
-.carbonad-tag {
-  display: block !important;
-  float: none !important;
-  width: auto !important;
-  height: auto !important;
-  margin-left: 145px !important;
-  font-family: inherit !important;
-}
-
-.carbonad-text {
-  padding-top: 0 !important;
-}
+  a {
+    color: #fff;
+    text-decoration: none;
+  }
 
-.carbonad-tag {
-  color: inherit !important;
-  text-align: left !important;
-}
+  @include media-breakpoint-up(sm) {
+    max-width: 330px;
+    margin: 50px auto 0;
+    border-width: 1px;
+    border-radius: 4px;
+  }
 
-.carbonad-text a,
-.carbonad-tag a {
-  color: $bd-purple-light !important;
+  @include media-breakpoint-up(lg) {
+    position: absolute;
+    top: 0;
+    right: 15px;
+    margin-top: 0;
 
-  &:hover {
-    color: #fff !important;
+    .bd-masthead & {
+      position: static;
+    }
   }
 }
 
-@include media-breakpoint-up(sm) {
-  .carbonad {
-    width: 330px !important;
-    padding: 1rem !important;
-    margin-right: auto !important;
-    margin-left: auto !important;
-    border-radius: .25rem;
-  }
+.carbon-img {
+  float: left;
+  margin-left: -145px;
 }
 
-@include media-breakpoint-up(md) {
-
+.carbon-poweredby {
+  display: block;
+  color: #cdbfe3 !important;
 }
diff --git a/docs/assets/scss/_clipboard-js.scss b/docs/assets/scss/_clipboard-js.scss
index 22abfbd65..cc3176a99 100644
--- a/docs/assets/scss/_clipboard-js.scss
+++ b/docs/assets/scss/_clipboard-js.scss
@@ -1,6 +1,6 @@
 // clipboard.js
 //
-// Flash-based `Copy` buttons for code snippets.
+// JS-based `Copy` buttons for code snippets.
 
 .bd-clipboard {
   position: relative;
diff --git a/docs/assets/scss/_component-examples.scss b/docs/assets/scss/_component-examples.scss
index 1ab49218c..a429b9aae 100644
--- a/docs/assets/scss/_component-examples.scss
+++ b/docs/assets/scss/_component-examples.scss
@@ -324,7 +324,7 @@
 
 .highlight {
   padding: 1rem;
-  margin: 1rem (-$grid-gutter-width / 2);
+  margin: 1rem (-$grid-gutter-width-base / 2);
   background-color: #f7f7f9;
 
   @include media-breakpoint-up(sm) {
diff --git a/docs/assets/scss/_featurettes.scss b/docs/assets/scss/_featurettes.scss
index a74834387..03119ce50 100644
--- a/docs/assets/scss/_featurettes.scss
+++ b/docs/assets/scss/_featurettes.scss
@@ -26,10 +26,10 @@
 
   @include media-breakpoint-up(md) {
     .col-sm-6:first-child {
-      padding-right: ($grid-gutter-width * 1.5);
+      padding-right: ($grid-gutter-width-base * 1.5);
     };
     .col-sm-6:last-child {
-      padding-left: ($grid-gutter-width * 1.5);
+      padding-left: ($grid-gutter-width-base * 1.5);
     }
   }
 }
diff --git a/docs/assets/scss/_masthead.scss b/docs/assets/scss/_masthead.scss
index f0ebe9363..aa59ffbfc 100644
--- a/docs/assets/scss/_masthead.scss
+++ b/docs/assets/scss/_masthead.scss
@@ -2,7 +2,7 @@
 
 .bd-masthead {
   position: relative;
-  padding: 3rem ($grid-gutter-width / 2) 2rem;
+  padding: 3rem ($grid-gutter-width-base / 2) 2rem;
   color: $bd-purple-light;
   text-align: center;
   background-image: linear-gradient(135deg, darken($bd-purple, 20%), $bd-purple, lighten(saturate($bd-purple, 5%), 15%));
diff --git a/docs/assets/scss/_nav.scss b/docs/assets/scss/_nav.scss
index 476a3efed..141811d41 100644
--- a/docs/assets/scss/_nav.scss
+++ b/docs/assets/scss/_nav.scss
@@ -3,6 +3,9 @@
 //
 
 .bd-navbar {
+  padding-right: 0;
+  padding-left: 0;
+
   .navbar-nav {
     .nav-link {
       color: $bd-graphite-light;
diff --git a/docs/assets/scss/_page-header.scss b/docs/assets/scss/_page-header.scss
index 457d3fbef..e51459903 100644
--- a/docs/assets/scss/_page-header.scss
+++ b/docs/assets/scss/_page-header.scss
@@ -1,7 +1,7 @@
 // scss-lint:disable ImportantRule
 
 .bd-pageheader {
-  padding: 2rem ($grid-gutter-width / 2);
+  padding: 2rem ($grid-gutter-width-base / 2);
   margin-bottom: 1.5rem;
   color: $bd-purple-light;
   text-align: center;
diff --git a/docs/assets/scss/_responsive-tests.scss b/docs/assets/scss/_responsive-tests.scss
index 79fe721bb..edba088c6 100644
--- a/docs/assets/scss/_responsive-tests.scss
+++ b/docs/assets/scss/_responsive-tests.scss
@@ -36,6 +36,7 @@
   margin-top: .25rem;
 }
 .responsive-utilities-test .col-xs-6 {
+  margin-top: .5rem;
   margin-bottom: .5rem;
 }
 .responsive-utilities-test span {
diff --git a/docs/assets/scss/_syntax.scss b/docs/assets/scss/_syntax.scss
index ac08f818d..9b5b2e712 100644
--- a/docs/assets/scss/_syntax.scss
+++ b/docs/assets/scss/_syntax.scss
@@ -61,3 +61,6 @@
 .css .o,
 .css .o + .nt,
 .css .nt + .nt { color: #999; }
+
+.language-bash::before { color: #009; content: "$ "; user-select: none; }
+.language-powershell::before { color: #009; content: "PM> "; user-select: none; }
diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 0362198fd..c55657af3 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -1,5 +1,6 @@
 /*!
- * Bootstrap Docs (http://getbootstrap.com)
+ * Bootstrap Docs (https://getbootstrap.com)
+ * Copyright 2011-2016 The Bootstrap Authors
  * Copyright 2011-2016 Twitter, Inc.
  * Licensed under the Creative Commons Attribution 3.0 Unported License. For
  * details, see https://creativecommons.org/licenses/by/3.0/.
diff --git a/docs/assets/scss/flex-grid.scss b/docs/assets/scss/flex-grid.scss
new file mode 100644
index 000000000..725a4aa68
--- /dev/null
+++ b/docs/assets/scss/flex-grid.scss
@@ -0,0 +1,33 @@
+// Bootstrap flexbox grid for our docs page
+
+
+//
+// Variables
+//
+
+@import "custom";
+@import "variables";
+
+// Override for flexbox mode
+$enable-flex: true;
+
+//
+// Grid mixins
+//
+
+@import "mixins/clearfix";
+@import "mixins/breakpoints";
+@import "mixins/grid-framework";
+@import "mixins/grid";
+
+//
+// Utilities for flex alignment
+//
+
+@import "utilities/flex";
+
+//
+// Generate the grid class
+//
+
+@import "grid";