docs redesign a bit

docs/_includes/header.html

@@ -23,6 +23,9 @@
 <!-- Documentation extras -->
 <link href="{{ site.baseurl }}/assets/css/docs.min.css" rel="stylesheet">
 
+<!-- Google Web fonts -->
+<link href="http://fonts.googleapis.com/css?family=Roboto:400,300,400italic,500,700" rel="stylesheet">
+
 <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
 <script src="{{ site.baseurl }}/assets/js/ie10-viewport-bug-workaround.js"></script>
 <script src="{{ site.baseurl }}/assets/js/ie-emulation-modes-warning.js"></script>

docs/_includes/nav-home.html

-<header class="navbar navbar-static-top bs-nav-home" id="top" role="banner">
-  <div class="container">
-    <h3 class="navbar-brand">
-      <a href="{{ site.baseurl }}">Bootstrap</a>
-    </h3>
-    <ul class="nav nav-pills pull-right">
-      <li class="nav-item">
-        <a class="nav-link" href="{{ site.baseurl }}/getting-started/quick-start" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
-      </li>
-      <li class="nav-item">
-        <a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
-      </li>
-    </ul>
-  </div>
+<header class="bd-header" role="banner">
+  <a class="bd-header-mark" href="{{ site.baseurl }}">Bootstrap</a>
+
+  <nav class="nav nav-pills bd-header-nav">
+    <a class="nav-link" href="{{ site.baseurl }}/getting-started/quick-start" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Documentation</a>
+    <a class="nav-link" href="{{ site.expo }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a>
+    <a class="nav-link" href="{{ site.blog }}" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a>
+  </nav>
 </header>

docs/_layouts/home.html

@@ -11,9 +11,6 @@
       </div>
     </a>
 
-    <!-- Docs master nav -->
-    {% include nav-home.html %}
-
     <!-- Page content of course! -->
     {{ content }}
 

docs/assets/scss/docs.scss

@@ -74,8 +74,7 @@ body {
   width: 9rem;
   height: 9rem;
   font-size: 6.5rem;
-  font-weight: 500;
-  line-height: 8.8rem;
+  line-height: 9rem;
   color: #fff;
   text-align: center;
   cursor: default;
@@ -210,39 +209,81 @@ body {
 // Homepage
 //
 
+
+
+.bd-header {
+  @include clearfix;
+  padding-bottom: .5rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid rgba(255,255,255,.25);
+
+  .bd-header-mark {
+    float: left;
+    padding-top: .6em;
+    padding-bottom: .6em;
+    font-size: 1.25rem;
+    font-weight: 500;
+    color: #fff;
+  }
+}
+
+.bd-header-nav {
+  float: right;
+
+  .nav-link {
+    float: left;
+    color: #fff;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
 // Masthead (headings and download button)
 .bs-docs-masthead {
   position: relative;
   padding: 2rem 1rem;
-  color: #cdbfe3;
-  text-align: center;
-  text-shadow: 0 1px 0 rgba(0,0,0,.1);
-  background-color: #6f5499;
-  @include gradient-vertical($bs-purple, #6f5499);
+  // color: #cdbfe3;
+  // text-align: center;
+  // text-shadow: 0 1px 0 rgba(0,0,0,.1);
+  // background-color: #6f5499;
+  // @include gradient-vertical($bs-purple, #6f5499);
+  background-image: linear-gradient(135deg, #a8b7be, #cdd1d4, #d4d5d7, #cecfd1);
 }
 
 .bs-docs-masthead .bs-docs-booticon {
-  margin: 0 auto 2rem;
+  margin: 0 0 2rem;
+  color: $gray;
+  border-color: $gray;
 }
 .bs-docs-masthead h1 {
   font-weight: 300;
   line-height: 1;
-  color: #fff;
+  // color: #fff;
 }
 .bs-docs-masthead .lead {
-  margin: 0 auto 2rem;
+  margin-bottom: 2rem;
   font-size: 1.25rem;
-  color: #fff;
+  // color: #fff;
 }
 .bs-docs-masthead .version {
   margin-top: -1rem;
   margin-bottom: 2rem;
-  color: #9783b9;
+  // color: #9783b9;
 }
 .bs-docs-masthead .btn {
   width: 100%;
   padding: 1rem 2rem;
   font-size: 1.25rem;
+  font-weight: 500;
+  color: $gray;
+  border-color: $gray;
+
+  &:hover {
+    color: #fff;
+    background-color: $gray;
+  }
 }
 
 @media (min-width: 480px) {
@@ -253,7 +294,11 @@ body {
 
 @media (min-width: 768px) {
   .bs-docs-masthead {
-    padding: 5rem 0;
+    padding: 2rem 0 4rem;
+    // padding: 5rem 0;
+  }
+  .bd-header {
+    margin-bottom: 4rem;
   }
   .bs-docs-masthead h1 {
     font-size: 4rem;
@@ -408,15 +453,15 @@ body {
   .bs-docs-masthead {
     .carbonad {
       float: none;
-      margin: 0 auto !important;
-      color: $bs-purple-light !important;
-      background: transparent !important;
-      border: 1px solid #866ab3 !important;
-    }
-    .carbonad-text a,
-    .carbonad-tag a {
-      color: #fff !important;
+      margin: 0 !important;
+      // color: $bs-purple-light !important;
+      // background: transparent !important;
+      // border: 1px solid #866ab3 !important;
     }
+    // .carbonad-text a,
+    // .carbonad-tag a {
+    //   color: #fff !important;
+    // }
   }
 }
 
@@ -450,7 +495,8 @@ body {
   width: 6rem;
   margin: 2.5rem auto;
 }
-.bs-docs-featurette h3 {
+.bs-docs-featurette h4 {
+  margin-top: 1rem;
   margin-bottom: .5rem;
   font-weight: normal;
   color: #333;
@@ -701,6 +747,10 @@ body {
 }
 
 
+.bs-docs-sidenav {
+  display: none;
+}
+
 .bs-docs-toc-link {
   display: block;
   padding: 4px 20px;

docs/getting-started/quick-start.md

@@ -7,9 +7,10 @@ Quickly add Bootstrap to your project via the [Bootstrap CDN](http://bootstrapcd
 
 Copy-paste the stylesheet `<link>` into your `<head>` before all other stylesheets.
 
-**Disabled for v4 during alpha releases.**
+<div class="alert alert-warning">
+  <strong>Heads up!</strong> Much of this page will be inaccurate during the v4 alpha releases.
+</div>
 
-{% comment %}
 {% highlight html %}
 <link rel="stylesheet" href="{{ site.cdn.css }}">
 {% endhighlight %}
@@ -47,4 +48,3 @@ Put it all together and your pages should look like this:
 {% endhighlight %}
 
 And that's it. Happy Bootstrapping!
-{% endcomment %}

docs/index.html

@@ -3,9 +3,10 @@ layout: home
 title: Bootstrap · The world's most popular mobile-first and responsive front-end framework.
 ---
 
-
 <main class="bs-docs-masthead" id="content" role="main" tabindex="-1">
   <div class="container">
+    {% include nav-home.html %}
+
     <span class="bs-docs-booticon outline">B</span>
     <p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
     <p class="lead">
@@ -26,17 +27,17 @@ title: Bootstrap &middot; The world's most popular mobile-first and responsive f
     <div class="row">
       <div class="col-sm-4">
         <img src="assets/img/sass-less.png" alt="Sass support" class="img-responsive">
-        <h3>Preprocessors</h3>
+        <h4>Preprocessors</h4>
         <p>Bootstrap ships with vanilla CSS, but its source code utilizes <a href="../css/#sass">Sass</a>, a popular CSS preprocessor. Quickly get started with precompiled CSS or build on the source.</p>
       </div>
       <div class="col-sm-4">
         <img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
-        <h3>One framework, every device.</h3>
+        <h4>One framework, every device.</h4>
         <p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
       </div>
       <div class="col-sm-4">
         <img src="assets/img/components.png" alt="Components" class="img-responsive">
-        <h3>Full of features</h3>
+        <h4>Full of features</h4>
         <p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
       </div>
     </div>