remove unused examples, update examples docs page, add starter template to examples, remove warning alert banner, add screenshots

7 files changed, 32 insertions, 74 deletions

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 4fb2128321..26f9b997a7 100644
--- a/docs/assets/bootstrap.zip
+++ b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 2e6da9c797..c3a6848d74 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -61,6 +61,7 @@ hr.soften {
   position: relative;
 }
 .jumbotron h1 {
+  margin-bottom: 9px;
   font-size: 81px;
   letter-spacing: -1px;
   line-height: 1;
@@ -568,6 +569,13 @@ form.well {
   margin-left: 6px;
 }
 
+/* Eaxmples page
+------------------------- */
+.bootstrap-examples .thumbnail {
+  margin-bottom: 9px;
+  background-color: #fff;
+}
+
 
 /* Responsive Docs
 -------------------------------------------------- */
diff --git a/docs/assets/img/examples/bootstrap-example-fluid.jpg b/docs/assets/img/examples/bootstrap-example-fluid.jpg
new file mode 100644
index 0000000000..151b987cb7
--- /dev/null
+++ b/docs/assets/img/examples/bootstrap-example-fluid.jpg
diff --git a/docs/assets/img/examples/bootstrap-example-hero.jpg b/docs/assets/img/examples/bootstrap-example-hero.jpg
new file mode 100644
index 0000000000..cd4a321078
--- /dev/null
+++ b/docs/assets/img/examples/bootstrap-example-hero.jpg
diff --git a/docs/assets/img/examples/bootstrap-example-starter.jpg b/docs/assets/img/examples/bootstrap-example-starter.jpg
new file mode 100644
index 0000000000..09c8a066d8
--- /dev/null
+++ b/docs/assets/img/examples/bootstrap-example-starter.jpg
diff --git a/docs/examples.html b/docs/examples.html
index 83188c77f1..aee632a3d3 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -74,60 +74,35 @@
 
     <div class="container">
 
-<div class="alert">
-  <strong>Heads up!</strong> This page is still under construction and is missing plenty of documentation. Hang tight!
-</div>
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>Bootstrap examples</h1>
-  <p class="lead">Use these examples as starting points for your work with Bootstrap. We encourage everyone to iterate on these examples and not simply use them as an end result.</p>
+  <p class="lead">We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.</p>
 </header>
 
 
 <ul class="thumbnails bootstrap-examples">
   <li class="span4">
-    <a href="../examples/hero.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/hero.html">
+      <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
     </a>
     <h3>Basic marketing site</h3>
-    <p></p>
+    <p>Featuring a hero unit for a primary message and three supporting elements.</p>
   </li>
   <li class="span4">
-    <a href="../examples/fluid.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/fluid.html">
+      <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
     </a>
     <h3>Fluid layout</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="../examples/fluid-reverse.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Fluid layout reversed</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="../examples/container-app.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Container application</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Fullscreen</h3>
-    <p></p>
+    <p>Uses are new responsive, fluid grid system to create seamless liquid layout.</p>
   </li>
   <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/starter-template.html">
+      <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
     </a>
-    <h3>Simple layout</h3>
-    <p></p>
+    <h3>Starter template</h3>
+    <p>A barebones HTML document with all the Bootstrap CSS and javascript included.</p>
   </li>
 </ul>
 
diff --git a/docs/templates/pages/examples.mustache b/docs/templates/pages/examples.mustache
index 850ac0fa69..22d78b982b 100644
--- a/docs/templates/pages/examples.mustache
+++ b/docs/templates/pages/examples.mustache
@@ -1,56 +1,31 @@
-<div class="alert">
-  <strong>Heads up!</strong> This page is still under construction and is missing plenty of documentation. Hang tight!
-</div>
-
 <!-- Masthead
 ================================================== -->
 <header class="jumbotron subhead" id="overview">
   <h1>{{_i}}Bootstrap examples{{/i}}</h1>
-  <p class="lead">{{_i}}Use these examples as starting points for your work with Bootstrap. We encourage everyone to iterate on these examples and not simply use them as an end result.{{/i}}</p>
+  <p class="lead">{{_i}}We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.{{/i}}</p>
 </header>
 
 
 <ul class="thumbnails bootstrap-examples">
   <li class="span4">
-    <a href="../examples/hero.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Basic marketing site</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="../examples/fluid.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Fluid layout</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="../examples/fluid-reverse.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
-    </a>
-    <h3>Fluid layout reversed</h3>
-    <p></p>
-  </li>
-  <li class="span4">
-    <a href="../examples/container-app.html" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/hero.html">
+      <img src="assets/img/examples/bootstrap-example-hero.jpg" alt="">
     </a>
-    <h3>Container application</h3>
-    <p></p>
+    <h3>{{_i}}Basic marketing site{{/i}}</h3>
+    <p>{{_i}}Featuring a hero unit for a primary message and three supporting elements.{{/i}}</p>
   </li>
   <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/fluid.html">
+      <img src="assets/img/examples/bootstrap-example-fluid.jpg" alt="">
     </a>
-    <h3>Fullscreen</h3>
-    <p></p>
+    <h3>{{_i}}Fluid layout{{/i}}</h3>
+    <p>{{_i}}Uses are new responsive, fluid grid system to create seamless liquid layout.{{/i}}</p>
   </li>
   <li class="span4">
-    <a href="#" class="thumbnail">
-      <img src="http://placehold.it/360x240" alt="">
+    <a class="thumbnail" href="../examples/starter-template.html">
+      <img src="assets/img/examples/bootstrap-example-starter.jpg" alt="">
     </a>
-    <h3>Simple layout</h3>
-    <p></p>
+    <h3>{{_i}}Starter template{{/i}}</h3>
+    <p>{{_i}}A barebones HTML document with all the Bootstrap CSS and javascript included.{{/i}}</p>
   </li>
 </ul>