unaffix sidebar and simplify styles of docs side nav to be more like v3

dist/css/bootstrap-reboot.css

@@ -1,19 +1,11 @@
-/*!
- * Bootstrap v4.0.0-alpha (http://getbootstrap.com)
- * Copyright 2011-2015 Twitter, Inc.
- * Licensed under  ()
- */
-
 /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
 html {
   font-family: sans-serif;
-  -webkit-text-size-adjust: 100%; 
+  -ms-text-size-adjust: 100%;
-      -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%; }
-}
 
 body {
-  margin: 0;
+  margin: 0; }
-}
 
 article,
 aside,
@@ -28,367 +20,294 @@ menu,
 nav,
 section,
 summary {
-  display: block;
+  display: block; }
-}
 
 audio,
 canvas,
 progress,
 video {
   display: inline-block;
-  vertical-align: baseline;
+  vertical-align: baseline; }
-}
 
 audio:not([controls]) {
   display: none;
-  height: 0;
+  height: 0; }
-}
 
 [hidden],
 template {
-  display: none;
+  display: none; }
-}
 
 a {
-  background-color: transparent;
+  background-color: transparent; }
-}
 
 a:active {
-  outline: 0;
+  outline: 0; }
-}
 
 a:hover {
-  outline: 0;
+  outline: 0; }
-}
 
 abbr[title] {
-  border-bottom: 1px dotted;
+  border-bottom: 1px dotted; }
-}
 
 b,
 strong {
-  font-weight: bold;
+  font-weight: bold; }
-}
 
 dfn {
-  font-style: italic;
+  font-style: italic; }
-}
 
 h1 {
-  margin: .67em 0; 
   font-size: 2em;
-}
+  margin: 0.67em 0; }
 
 mark {
-  color: #000; 
   background: #ff0;
-}
+  color: #000; }
 
 small {
-  font-size: 80%;
+  font-size: 80%; }
-}
 
 sub,
 sup {
-  position: relative;
   font-size: 75%;
   line-height: 0;
-  vertical-align: baseline;
+  position: relative;
-}
+  vertical-align: baseline; }
 
 sup {
-  top: -.5em;
+  top: -0.5em; }
-}
 
 sub {
-  bottom: -.25em;
+  bottom: -0.25em; }
-}
 
 img {
-  border: 0;
+  border: 0; }
-}
 
 svg:not(:root) {
-  overflow: hidden;
+  overflow: hidden; }
-}
 
 figure {
-  margin: 1em 40px;
+  margin: 1em 40px; }
-}
 
 hr {
-  height: 0; 
+  box-sizing: content-box;
-  -webkit-box-sizing: content-box;
+  height: 0; }
-          box-sizing: content-box;
-}
 
 pre {
-  overflow: auto;
+  overflow: auto; }
-}
 
 code,
 kbd,
 pre,
 samp {
   font-family: monospace, monospace;
-  font-size: 1em;
+  font-size: 1em; }
-}
 
 button,
 input,
 optgroup,
 select,
 textarea {
-  margin: 0; 
-  font: inherit;
   color: inherit;
-}
+  font: inherit;
+  margin: 0; }
 
 button {
-  overflow: visible;
+  overflow: visible; }
-}
 
 button,
 select {
-  text-transform: none;
+  text-transform: none; }
-}
 
 button,
 html input[type="button"], input[type="reset"],
 input[type="submit"] {
   -webkit-appearance: button;
-  cursor: pointer;
+  cursor: pointer; }
-}
 
 button[disabled],
 html input[disabled] {
-  cursor: default;
+  cursor: default; }
-}
 
 button::-moz-focus-inner,
 input::-moz-focus-inner {
-  padding: 0; 
   border: 0;
-}
+  padding: 0; }
 
 input {
-  line-height: normal;
+  line-height: normal; }
-}
 
 input[type="checkbox"],
 input[type="radio"] {
-  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
-          box-sizing: border-box;
+  padding: 0; }
-  padding: 0;
-}
 
 input[type="number"]::-webkit-inner-spin-button,
 input[type="number"]::-webkit-outer-spin-button {
-  height: auto;
+  height: auto; }
-}
 
 input[type="search"] {
-  -webkit-box-sizing: content-box;
-          box-sizing: content-box; 
   -webkit-appearance: textfield;
-}
+  box-sizing: content-box; }
 
 input[type="search"]::-webkit-search-cancel-button,
 input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+  -webkit-appearance: none; }
-}
 
 fieldset {
-  padding: .35em .625em .75em; 
-  margin: 0 2px;
   border: 1px solid #c0c0c0;
-}
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em; }
 
 legend {
-  padding: 0; 
   border: 0;
-}
+  padding: 0; }
 
 textarea {
-  overflow: auto;
+  overflow: auto; }
-}
 
 optgroup {
-  font-weight: bold;
+  font-weight: bold; }
-}
 
 table {
-  border-spacing: 0; 
   border-collapse: collapse;
-}
+  border-spacing: 0; }
 
 td,
 th {
-  padding: 0;
+  padding: 0; }
-}
 
 html {
-  -webkit-box-sizing: border-box;
+  box-sizing: border-box; }
-          box-sizing: border-box;
-}
 
 *,
 *:before,
 *:after {
-  -webkit-box-sizing: inherit;
+  box-sizing: inherit; }
-          box-sizing: inherit;
-}
 
 @-moz-viewport {
-  width: device-width;
+  width: device-width; }
-}
 
 @-ms-viewport {
-  width: device-width;
+  width: device-width; }
-}
+
+@-o-viewport {
+  width: device-width; }
 
 @-webkit-viewport {
-  width: device-width;
+  width: device-width; }
-}
 
 @viewport {
-  width: device-width;
+  width: device-width; }
-}
 
 html {
   font-size: 16px;
-
+  -webkit-tap-highlight-color: transparent; }
-  -webkit-tap-highlight-color: transparent;
-}
 
 body {
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 1rem;
   line-height: 1.5;
   color: #373a3c;
-  background-color: #fff;
+  background-color: #fff; }
-}
 
 h1, h2, h3, h4, h5, h6 {
   margin-top: 0;
-  margin-bottom: .5rem;
+  margin-bottom: .5rem; }
-}
 
 p {
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 1rem; }
-}
 
 abbr[title],
 abbr[data-original-title] {
   cursor: help;
-  border-bottom: 1px dotted #818a91;
+  border-bottom: 1px dotted #818a91; }
-}
 
 address {
   margin-bottom: 1rem;
   font-style: normal;
-  line-height: inherit;
+  line-height: inherit; }
-}
 
 ol,
 ul,
 dl {
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 1rem; }
-}
 
 ol ol,
 ul ul,
 ol ul,
 ul ol {
-  margin-bottom: 0;
+  margin-bottom: 0; }
-}
 
 dt {
-  font-weight: bold;
+  font-weight: bold; }
-}
 
 dd {
   margin-bottom: .5rem;
-  margin-left: 0;
+  margin-left: 0; }
-}
 
 blockquote {
-  margin: 0 0 1rem;
+  margin: 0 0 1rem; }
-}
 
 a {
   color: #0275d8;
-  text-decoration: none;
+  text-decoration: none; }
-}
+  a:focus,
-a:focus,
   a:hover {
-  color: #014c8c;
+    color: #014c8c;
-  text-decoration: underline;
+    text-decoration: underline; }
-}
+  a:focus {
-a:focus {
+    outline: thin dotted;
-  outline: thin dotted;
+    outline: 5px auto -webkit-focus-ring-color;
-  outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px; }
-  outline-offset: -2px;
-}
 
 pre {
   margin-top: 0;
-  margin-bottom: 1rem;
+  margin-bottom: 1rem; }
-}
 
 figure {
-  margin: 0 0 1rem;
+  margin: 0 0 1rem; }
-}
 
 img {
-  vertical-align: middle;
+  vertical-align: middle; }
-}
 
 [role="button"] {
-  cursor: pointer;
+  cursor: pointer; }
-}
 
 table {
-  background-color: transparent;
+  background-color: transparent; }
-}
 
 caption {
-  padding-top: .75rem;
+  padding-top: 0.75rem;
-  padding-bottom: .75rem;
+  padding-bottom: 0.75rem;
   color: #818a91;
   text-align: left;
-  caption-side: bottom;
+  caption-side: bottom; }
-}
 
 th {
-  text-align: left;
+  text-align: left; }
-}
 
 label {
   display: inline-block;
-  margin-bottom: .5rem;
+  margin-bottom: .5rem; }
-}
 
 input,
 button,
 select,
 textarea {
   margin: 0;
-  line-height: inherit;
+  line-height: inherit; }
-}
 
 textarea {
-  resize: vertical;
+  resize: vertical; }
-}
 
 fieldset {
   min-width: 0;
   padding: 0;
   margin: 0;
-  border: 0;
+  border: 0; }
-}
 
 legend {
   display: block;
@@ -396,14 +315,12 @@ legend {
   padding: 0;
   margin-bottom: .5rem;
   font-size: 1.5rem;
-  line-height: inherit;
+  line-height: inherit; }
-}
 
 input[type="search"] {
-  -webkit-appearance: none;
+  -webkit-appearance: none; }
-}
 
 output {
-  display: inline-block;
+  display: inline-block; }
-}
+
 /*# sourceMappingURL=bootstrap-reboot.css.map */

docs/_includes/nav-docs.html

@@ -1,18 +1,11 @@
-<header class="navbar navbar-static-top bd-sidebar" id="top" role="banner">
+<div class="bd-sidebar">
-  <a href="{{ site.baseurl }}/" class="navbar-brand">
-    Bootstrap 4 Alpha
-  </a>
-
-  <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#docsNavbarContent">
-    &#9776;
-  </button>
 
   <form class="bd-search hidden-sm-down">
     <input type="text" class="form-control" id="search-input" placeholder="Search...">
     <ul class="dropdown-menu bd-search-results" id="search-results"></ul>
   </form>
 
-  <nav class="bd-links collapse navbar-toggleable-xs" id="docsNavbarContent">
+  <nav class="bd-links" id="docsNavbarContent">
     {% for group in site.data.nav %}
       {% assign link = group.pages | first %}
       {% assign slug = group.title | downcase | replace: ' ', '-' || page.title | downcase | replace: ' ', '-' %}
@@ -64,4 +57,4 @@
       </div>
     {% endfor %}
   </nav>
-</header>
+</div>

docs/_layouts/page.html

@@ -2,10 +2,15 @@
 layout: default
 ---
 
-{% include nav-docs.html %}
+<div class="container">
-
+  <div class="row">
-<div class="bd-container bd-content">
+    <div class="col-sm-3 col-sm-push-9 bd-sidebar">
-  {% include ads.html %}
+      {% include nav-docs.html %}
-  <h1 class="bd-title">{{ page.title }}</h1>
+    </div>
-  {{ content }}
+    <div class="col-sm-9 col-sm-pull-3 bd-content">
+      {% include ads.html %}
+      <h1 class="bd-title">{{ page.title }}</h1>
+      {{ content }}
+    </div>
+  </div>
 </div>

docs/assets/css/docs.min.css

@@ -5,7 +5,7 @@
  * details, see http://creativecommons.org/licenses/by/3.0/.
  */
 .bd-docs {
-  padding-top: 3.7rem; }
+  padding-top: 5rem; }
 
 .bd-container {
   position: relative;
@@ -61,50 +61,6 @@
 #markdown-toc > li:first-child {
   display: none; }
 
-.bd-sidebar {
-  padding: 0;
-  margin-bottom: 0;
-  background-color: #fafafa; }
-  .bd-sidebar .navbar-toggler {
-    position: absolute;
-    top: 1rem;
-    right: 0;
-    z-index: 5; }
-
-.bd-sidebar .navbar-header {
-  float: none;
-  margin-right: -15px; }
-
-.bd-sidebar .navbar-collapse {
-  padding: 0;
-  border: 0; }
-
-@media (min-width: 992px) {
-  .bd-docs {
-    margin-left: 240px; }
-  .bd-sidebar {
-    position: fixed;
-    top: 3.7rem;
-    bottom: 0;
-    left: 0;
-    width: 240px;
-    overflow-y: auto;
-    border-right: 1px solid #eee;
-    -webkit-transform: translated3d(0, 0, 0); } }
-
-.bd-sidebar .navbar-brand {
-  display: block;
-  float: none;
-  height: auto;
-  padding: 1.55rem 1.25rem;
-  font-size: 20px;
-  font-weight: 500;
-  line-height: 1; }
-
-.bd-sidebar-brand:hover,
-.bd-sidebar-brand:focus {
-  text-decoration: none; }
-
 .bd-search {
   position: relative;
   margin-right: 1.25rem;

docs/assets/scss/_layout.scss

@@ -1,6 +1,6 @@
 
 .bd-docs {
-  padding-top: 3.7rem;
+  padding-top: 5rem;
 }
 
 // Custom container

docs/assets/scss/_sidebar.scss

@@ -3,59 +3,59 @@
 //
 
 .bd-sidebar {
-  padding: 0;
+  // padding: 0;
-  margin-bottom: 0;
+  // margin-bottom: 0;
-  background-color: #fafafa;
+  // background-color: #fafafa;
 
-  .navbar-toggler {
+  // .navbar-toggler {
-    position: absolute;
+  //   position: absolute;
-    top: 1rem;
+  //   top: 1rem;
-    right: 0;
+  //   right: 0;
-    z-index: 5;
+  //   z-index: 5;
-  }
+  // }
 }
 
-.bd-sidebar .navbar-header {
+// .bd-sidebar .navbar-header {
-  float: none;
+//   float: none;
-  margin-right: -15px;
+//   margin-right: -15px;
-}
+// }
+//
+// .bd-sidebar .navbar-collapse {
+//   padding: 0;
+//   border: 0;
+// }
 
-.bd-sidebar .navbar-collapse {
+// @media (min-width: 992px) {
-  padding: 0;
+  // .bd-docs {
-  border: 0;
+  //   margin-left: 240px;
-}
+  // }
-
+  // .bd-sidebar {
-@media (min-width: 992px) {
+  //   position: fixed;
-  .bd-docs {
+  //   top: 3.7rem;
-    margin-left: 240px;
+  //   bottom: 0;
-  }
+  //   left: 0;
-  .bd-sidebar {
+  //   width: 240px;
-    position: fixed;
+  //   overflow-y: auto;
-    top: 3.7rem;
+  //   border-right: 1px solid #eee;
-    bottom: 0;
+  //   -webkit-transform: translated3d(0,0,0); // Ensure proper scrolling of sidebar
-    left: 0;
+  // }
-    width: 240px;
+// }
-    overflow-y: auto;
+//
-    border-right: 1px solid #eee;
+// .bd-sidebar .navbar-brand {
-    -webkit-transform: translated3d(0,0,0); // Ensure proper scrolling of sidebar
+//   display: block;
-  }
+//   float: none;
-}
+//   height: auto;
-
+//   padding: 1.55rem 1.25rem;
-.bd-sidebar .navbar-brand {
+//   font-size: 20px;
-  display: block;
+//   font-weight: 500;
-  float: none;
+//   line-height: 1;
-  height: auto;
+//   // color: #fff;
-  padding: 1.55rem 1.25rem;
+// }
-  font-size: 20px;
+// .bd-sidebar-brand:hover,
-  font-weight: 500;
+// .bd-sidebar-brand:focus {
-  line-height: 1;
+//   // color: #fff;
-  // color: #fff;
+//   text-decoration: none;
-}
+// }
-.bd-sidebar-brand:hover,
-.bd-sidebar-brand:focus {
-  // color: #fff;
-  text-decoration: none;
-}
 
 .bd-search {
   position: relative;

scss/_variables.scss

@@ -53,8 +53,6 @@ $spacer:                     1rem !default;
 $spacer-x:                   $spacer !default;
 $spacer-y:                   $spacer !default;
 
-$border-width:               (1 / $font-size-root)rem !default;
-
 
 // Typography
 //
@@ -87,6 +85,8 @@ $headings-font-weight:       500 !default;
 $headings-line-height:       1.1 !default;
 $headings-color:             inherit !default;
 
+$border-width:               .0625rem !default;
+
 
 // Components
 //