more homepage and sidenav overhaul

_includes/footer.html

+<!-- Footer
+================================================== -->
+<footer class="bs-footer" role="contentinfo">
+  <div class="container">
+    {% include social-buttons.html %}
+
+    <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
+    <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
+    <ul class="footer-links muted">
+      <li>Currently v{{ site.current_version }}</li>
+      <li>&middot;</li>
+      <li><a href="{{ page.base_url }}2.3.2/">v2.3.2 docs</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ page.base_url }}about/">About</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.blog }}">Blog</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
+      <li>&middot;</li>
+      <li><a href="{{ site.repo }}/releases">Releases</a></li>
+    </ul>
+  </div>
+</footer>
+
 <!-- Bootstrap core JavaScript
 ================================================== -->
 <!-- Placed at the end of the document so the pages load faster -->

_includes/nav-main.html

@@ -27,6 +27,11 @@
           <a href="{{ page.base_url }}customize">Customize</a>
         </li>
       </ul>
+      <ul class="nav navbar-nav navbar-right">
+        <li><a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Expo']);">Expo</a></li>
+        <li><a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'Blog']);">Blog</a></li>
+        <li><a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Navbar', 'Community links', 'GitHub']);">GitHub</a></li>
+      </ul>
     </nav>
   </div>
 </header>

_layouts/default.html

@@ -21,6 +21,9 @@
 
     <div class="container bs-docs-container">
       <div class="row">
+        <div class="col-md-9" role="main">
+          {{ content }}
+        </div>
         <div class="col-md-3">
           <div class="bs-sidebar hidden-print" role="complementary">
             <ul class="nav bs-sidenav">
@@ -40,37 +43,10 @@
             </ul>
           </div>
         </div>
-        <div class="col-md-9" role="main">
-          {{ content }}
-        </div>
       </div>
 
     </div>
 
-    <!-- Footer
-    ================================================== -->
-    <footer class="bs-footer" role="contentinfo">
-      <div class="container">
-        {% include social-buttons.html %}
-
-        <p>Designed and built with all the love in the world by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
-        <p>Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
-        <ul class="footer-links muted">
-          <li>Currently v{{ site.current_version }}</li>
-          <li>&middot;</li>
-          <li><a href="{{ page.base_url }}2.3.2/">v2.3.2 docs</a></li>
-          <li>&middot;</li>
-          <li><a href="{{ page.base_url }}about/">About</a></li>
-          <li>&middot;</li>
-          <li><a href="{{ site.blog }}">Blog</a></li>
-          <li>&middot;</li>
-          <li><a href="{{ site.repo }}/issues?state=open">Issues</a></li>
-          <li>&middot;</li>
-          <li><a href="{{ site.repo }}/releases">Releases</a></li>
-        </ul>
-      </div>
-    </footer>
-
     <!-- JS and analytics only. -->
     {% include footer.html %}
 

_layouts/home.html

@@ -13,33 +13,6 @@
     <!-- Page content of course! -->
     {{ content }}
 
-    <footer class="container" role="contentinfo">
-      {% include ads.html %}
-
-      {% include social-buttons.html %}
-
-      <ul class="bs-masthead-links">
-        <li class="current-version">
-          Currently v{{ site.current_version }}
-        </li>
-        <li>
-          <a href="{{ page.base_url }}2.3.2/">v2.3.2 docs</a>
-        </li>
-        <li>
-          <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'GitHub project']);">GitHub project</a>
-        </li>
-        <li>
-          <a href="{{ page.base_url }}about/" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'About']);">About</a>
-        </li>
-        <li>
-          <a href="{{ site.expo }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Expo']);">Expo</a>
-        </li>
-        <li>
-          <a href="{{ site.blog }}" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Jumbotron links', 'Blog']);">Blog</a>
-        </li>
-      </ul>
-    </footer>
-
     <!-- JS and analytics only. -->
     {% include footer.html %}
 

docs-assets/css/docs.css

@@ -79,6 +79,29 @@ body {
   border-color: #fff;
 }
 
+/* Bootstrap "B" icon */
+.bs-booticon {
+  display: block;
+  font-weight: 500;
+  color: #fff;
+  background-color: #563d7c;
+  border-radius: 15%;
+  cursor: default;
+  text-align: center;
+}
+.bs-booticon-sm {
+  width: 30px;
+  height: 30px;
+  font-size: 20px;
+  line-height: 28px;
+}
+.bs-booticon-lg {
+  width: 144px;
+  height: 144px;
+  font-size: 108px;
+  line-height: 140px;
+}
+
 
 /*
  * Main navigation
@@ -88,7 +111,8 @@ body {
 
 .bs-docs-nav {
   background-color: #fff;
-  border-color: #eee;
+  border-color: #e5e5e5;
+  box-shadow: 0 0 5px rgba(0,0,0,.05);
 }
 .bs-docs-nav .navbar-brand,
 .bs-docs-nav .navbar-nav > li > a {
@@ -197,7 +221,6 @@ body {
  */
 
 .bs-docs-home {
-  padding-top: 120px;
   background-color: #f9f9f9;
 }
 
@@ -206,15 +229,20 @@ body {
   position: relative;
   padding: 30px 15px;
   text-align: center;
+  border-bottom: 1px solid #e5e5e5;
+}
+.bs-masthead .bs-booticon {
+  margin: 0 auto 30px;
 }
 .bs-masthead h1 {
-  display: none;
+  font-size: 60px;
+  font-weight: 300;
   line-height: 1;
-  color: #563d7c;
 }
 .bs-masthead .lead {
-  font-size: 20px;
   margin-bottom: 30px;
+  font-size: 20px;
+  color: #555;
 }
 .bs-masthead .btn-outline {
   width: 100%;
@@ -226,47 +254,6 @@ body {
   margin-top: 10px;
 }
 
-.bs-booticon {
-  display: block;
-  margin: -40px auto 30px;
-  width: 144px;
-  height: 144px;
-  font-size: 108px;
-  font-weight: 500;
-  color: #563d7c;
-  line-height: 140px;
-  border: 1px solid #563d7c;
-  border-radius: 15%;
-  cursor: default;
-}
-
-/* Links to project-level content like the repo, Expo, etc */
-.bs-masthead-links {
-  margin-top: 20px;
-  margin-bottom: 40px;
-  padding-left: 0;
-  list-style: none;
-  text-align: center;
-}
-.bs-masthead-links li {
-  display: inline-block;
-  color: #777;
-  padding: 0 10px;
-}
-
-.bs-masthead .popover {
-  max-width: 260px;
-  margin-top: -15px;
-  border-radius: 9px;
-  box-shadow: 0 4px 12px rgba(0,0,0,.25);
-}
-.bs-masthead .popover-content {
-  padding: 15px;
-  font-size: 16px;
-  font-weight: 300;
-  text-align: center;
-}
-
 @media (min-width: 480px) {
   .bs-masthead .btn-outline {
     width: auto;
@@ -274,6 +261,10 @@ body {
 }
 
 @media (min-width: 768px) {
+  .bs-masthead {
+    padding-top: 80px;
+    padding-bottom: 80px;
+  }
   .bs-masthead .lead {
     font-size: 24px;
   }
@@ -288,10 +279,6 @@ body {
   .bs-masthead .btn-outline {
     padding: 18px 24px;
   }
-  .bs-masthead-links {
-    padding: 0;
-    text-align: left;
-  }
 }
 
 
@@ -399,7 +386,7 @@ body {
     border-width: 1px !important;
   }
   .bs-docs-home .carbonad {
-    margin: 0 auto 40px !important;
+    margin: 0 auto !important;
   }
 }
 
@@ -408,7 +395,7 @@ body {
     margin: 0 !important;
   }
   .bs-docs-home .carbonad {
-    margin: 0 auto 40px !important;
+    margin: 0 auto !important;
   }
 }
 
@@ -425,17 +412,56 @@ body {
   }
 }
 
-@media (min-width: 768px) {
-  .bs-docs-home .bs-social {
-    margin-bottom: 10px;
-  }
-  .bs-docs-home .bs-masthead-links {
-    margin-top: 10px;
-  }
-  .bs-docs-home .bs-social,
-  .bs-docs-home .bs-masthead-links {
-    text-align: center;
-  }
+
+/*
+ * Homepage featurettes
+ *
+ * Reasons to use Bootstrap, entries from the Expo, and more.
+ */
+
+.bs-featurette {
+  padding-top: 100px;
+  padding-bottom: 100px;
+  font-size: 16px;
+  line-height: 1.5;
+  color: #555;
+  text-align: center;
+  background-color: #fff;
+  border-bottom: 1px solid #e5e5e5;
+}
+.bs-featurette + .bs-footer {
+  margin-top: 0;
+  border-top: 0;
+}
+
+.bs-featurette-title {
+  font-size: 40px;
+  font-weight: normal;
+  color: #333;
+  margin-bottom: 5px;
+}
+.bs-featurette .lead {
+  margin-left:  auto;
+  margin-right: auto;
+  max-width: 80%;
+}
+
+.bs-featurette h3,
+.bs-featurette h4 {
+  color: #333;
+  font-weight: normal;
+}
+.bs-featurette h3 {
+  margin-bottom: 5px;
+}
+/*.bs-featurette h4 {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+*/
+.half-rule {
+  max-width: 100px;
+  margin: 40px auto;
 }
 
 
@@ -450,49 +476,68 @@ body {
 .bs-sidebar.affix {
   position: static;
 }
+@media (min-width: 768px) {
+  .bs-sidebar {
+    padding-left: 10px;
+  }
+}
 
 /* First level of nav */
 .bs-sidenav {
   margin-top: 30px;
   margin-bottom: 30px;
-  padding-top:    10px;
-  padding-bottom: 10px;
-  text-shadow: 0 1px 0 #fff;
-  background-color: #f7f5fa;
-  border-radius: 5px;
+  padding-top: 5px;
+  padding-bottom: 5px;
+  border-left: 1px solid #eee;
 }
 
 /* All levels of nav */
 .bs-sidebar .nav > li > a {
   display: block;
-  color: #716b7a;
+  font-weight: 500;
+  color: #999;
   padding: 5px 20px;
+  margin-left: -1px;
 }
 .bs-sidebar .nav > li > a:hover,
 .bs-sidebar .nav > li > a:focus {
+  padding-left: 19px;
+  color: #563d7c;
   text-decoration: none;
-  background-color: #e5e3e9;
-  border-right: 1px solid #dbd8e0;
+  background-color: transparent;
+  border-left: 1px solid #563d7c;
 }
 .bs-sidebar .nav > .active > a,
 .bs-sidebar .nav > .active:hover > a,
 .bs-sidebar .nav > .active:focus > a {
+  padding-left: 18px;
   font-weight: bold;
   color: #563d7c;
   background-color: transparent;
-  border-right: 1px solid #563d7c;
+  border-left: 2px solid #563d7c;
 }
 
 /* Nav: second level (shown on .active) */
 .bs-sidebar .nav .nav {
   display: none; /* Hide by default, but at >768px, show it */
-  margin-bottom: 8px;
+  padding-bottom: 10px;
 }
 .bs-sidebar .nav .nav > li > a {
   padding-top:    3px;
   padding-bottom: 3px;
   padding-left: 30px;
   font-size: 90%;
+  font-weight: normal;
+}
+.bs-sidebar .nav .nav > li > a:hover,
+.bs-sidebar .nav .nav > li > a:focus {
+  padding-left: 29px;
+}
+.bs-sidebar .nav .nav > .active > a,
+.bs-sidebar .nav .nav > .active:hover > a,
+.bs-sidebar .nav .nav > .active:focus > a {
+  font-weight: 500;
+  padding-left: 28px;
 }
 
 /* Show and affix the side nav when space allows it */

index.html

@@ -6,12 +6,79 @@ base_url: "./"
 
 <main class="bs-masthead" id="content" role="main">
   <div class="container">
-    <span class="bs-booticon">B</span>
+    <span class="bs-booticon bs-booticon-lg">B</span>
     <h1>Bootstrap</h1>
-    <p class="lead">Bootstrap is a sleek and powerful mobile first front-end framework for faster and easier web development.</p>
+    <p class="lead">The most popular front-end framework for building on the web.</p>
     <p class="lead">
       <a href="{{ site.download_dist }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version }}']);" data-content="Quickly get started with Bootstrap's precompiled CSS, JavaScript, and fonts.">Download Bootstrap</a>
       <a href="{{ site.download_source }}" class="btn btn-outline btn-lg" onclick="_gaq.push(['_trackEvent', 'Jumbotron actions', 'Download', 'Download {{ site.current_version source }}']);" data-content="Download Bootstrap's LESS, JavaScript, font, and documentation source code.">Download source</a>
     </p>
+    {% include ads.html %}
   </div>
 </main>
+
+
+<div class="bs-featurette">
+  <div class="container">
+    <h2 class="bs-featurette-title">Designed for everyone, everywhere.</h2>
+    <p class="lead">Bootstrap is a responsive and mobile first framework for faster and easier web development. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
+
+    <hr class="half-rule">
+
+    <div class="row">
+      <div class="col-sm-4">
+        <img src="docs-assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
+        <h3>Preprocesors</h3>
+        <p>In addition to vanilla CSS, Bootstrap includes support for the two most popular CSS preprocessors, Less and Sass.</p>
+      </div>
+      <div class="col-sm-4">
+        <img src="docs-assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
+        <h3>One framework, every device.</h3>
+        <p>Bootstrap easily and efficiently scales your project from phones to tablets to desktops with a single CSS file.</p>
+      </div>
+      <div class="col-sm-4">
+        <img src="docs-assets/img/components.png" alt="Components" class="img-responsive">
+        <h3>Comprehensive docs</h3>
+        <p>With Bootstrap, you get extensive and beautiful documentation with hundreds of live examples, code snippets, and more.</p>
+      </div>
+    </div>
+
+    <hr class="half-rule">
+
+    <p class="lead">Bootstrap is an open source project, hosted and maintained on GitHub.</p>
+    <a href="{{ site.repo }}" class="btn btn-outline btn-lg">View the GitHub project</a>
+  </div>
+</div>
+
+<div class="bs-featurette">
+  <div class="container">
+    <h2 class="bs-featurette-title">Built with Bootstrap.</h2>
+    <p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started with your own with our growing <a href="{{ site.url }}/getting-started/#examples">collection of examples</a> or by exploring some of our favorites from <a href="{{ site.expo }}">the Expo</a>.</p>
+
+    <hr class="half-rule">
+
+    <div class="row">
+      <div class="col-sm-3">
+        <img src="http://expo.getbootstrap.com/screenshots/coinbase.jpg" alt="" class="thumbnail">
+        <h4>Coinbase</h4>
+      </div>
+      <div class="col-sm-3">
+        <img src="http://expo.getbootstrap.com/screenshots/localcrime.jpg" alt="" class="thumbnail">
+        <h4>Localcrime</h4>
+      </div>
+      <div class="col-sm-3">
+        <img src="http://expo.getbootstrap.com/screenshots/fortrabbit.jpg" alt="" class="thumbnail">
+        <h4>Fortrabbit</h4>
+      </div>
+      <div class="col-sm-3">
+        <img src="http://expo.getbootstrap.com/screenshots/sentry.jpg" alt="" class="thumbnail">
+        <h4>Sentry</h4>
+      </div>
+    </div>
+
+    <hr class="half-rule">
+
+    <p class="lead">Head to the Bootstrap Expo for dozens of inspiring projects built on Bootstrap.</p>
+    <a href="{{ site.expo }}" class="btn btn-outline btn-lg">Explore the showcase</a>
+  </div>
+</div>