addng docs for the themes stuff and examples

5 files changed, 43 insertions, 14 deletions

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index f72cd3953..d46656103 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -151,10 +151,8 @@ div.quickstart form textarea {
 }
 /* Render mini layout previews
 -------------------------------------------------- */
-div.mini-layout {
-  height: 340px;
-  margin-bottom: 20px;
-  padding: 9px;
+.diagram,
+.mini-layout {
   border: 1px solid #ccc;
   -webkit-border-radius: 6px;
      -moz-border-radius: 6px;
@@ -163,28 +161,36 @@ div.mini-layout {
      -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.125);
           box-shadow: 0 1px 3px rgba(0, 0, 0, 0.125);
 }
-div.mini-layout div {
+.diagram {
+  padding: 4px;
+}
+.mini-layout {
+  height: 340px;
+  margin-bottom: 20px;
+  padding: 9px;
+}
+.mini-layout div {
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
 }
-div.mini-layout div.mini-layout-body {
+.mini-layout .mini-layout-body {
   background-color: #dceaf4;
   margin: 0 auto;
   width: 340px;
   height: 340px;
 }
-div.mini-layout.fluid div.mini-layout-sidebar,
-div.mini-layout.fluid div.mini-layout-header,
-div.mini-layout.fluid div.mini-layout-body {
+.mini-layout.fluid .mini-layout-sidebar,
+.mini-layout.fluid .mini-layout-header,
+.mini-layout.fluid .mini-layout-body {
   float: left;
 }
-div.mini-layout.fluid div.mini-layout-sidebar {
+.mini-layout.fluid .mini-layout-sidebar {
   background-color: #bbd8e9;
   width: 90px;
   height: 340px;
 }
-div.mini-layout.fluid div.mini-layout-body {
+.mini-layout.fluid .mini-layout-body {
   width: 300px;
   margin-left: 10px;
 }
diff --git a/docs/assets/img/example-diagram-01.png b/docs/assets/img/example-diagram-01.png
new file mode 100644
index 000000000..16ac0c44e
--- /dev/null
+++ b/docs/assets/img/example-diagram-01.png
diff --git a/docs/assets/img/example-diagram-02.png b/docs/assets/img/example-diagram-02.png
new file mode 100644
index 000000000..90c30e6a1
--- /dev/null
+++ b/docs/assets/img/example-diagram-02.png
diff --git a/docs/assets/img/example-diagram-03.png b/docs/assets/img/example-diagram-03.png
new file mode 100644
index 000000000..00401e0b1
--- /dev/null
+++ b/docs/assets/img/example-diagram-03.png
diff --git a/docs/index.html b/docs/index.html
index 1c8809645..7531807fd 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -110,13 +110,13 @@
     <h1>About Bootstrap <small>Brief history, browser support, and more</small></h1>
   </div>
   <div class="row">
-    <div class="span6 columns">
+    <div class="span-one-third">
       <h3>History</h3>
       <p>In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented and development quickly accelerated during Twitter’s first Hackweek.</p>
       <p>With the help and feedback of many engineers at Twitter, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns.</p>
       <p>Read more on <a href="https://dev.twitter.com/blog/bootstrap-twitter">dev.twitter.com &rsaquo;</a></p>
     </div>
-    <div class="span5 columns">
+    <div class="span-one-third">
       <h3>Browser support</h3>
       <p>Bootstrap is tested and supported in major modern browsers like Chrome, Safari, Internet Explorer, and Firefox.</p>
       <img src="assets/img/browsers.png" width="258px" height="48px" alt="Tested and supported in Chrome, Safari, Internet Explorer, and Firefox">
@@ -128,7 +128,7 @@
         <li>Opera 11</li>
       </ul>
     </div>
-    <div class="span5 columns">
+    <div class="span-one-third">
       <h3>What's included</h3>
       <p>Bootstrap comes complete with compiled CSS, uncompiled, and example templates.</p>
       <ul>
@@ -139,6 +139,29 @@
       </ul>
     </div>
   </div><!-- /row -->
+
+  <div class="row">
+    <div class="span12">
+      <h3>Quick-start examples</h3>
+      <p>Need some quick templates? Check out these basic examples we've put together:</p>
+
+      <div class="row">
+        <div class="span4">
+          <img src="assets/img/example-diagram-01.png" class="diagram" alt="Simple three-column layout with hero unit">
+        </div>
+        <div class="span4">
+          <img src="assets/img/example-diagram-02.png" class="diagram" alt="Fluid layout with static sidebar">
+        </div>
+        <div class="span4">
+          <img src="assets/img/example-diagram-03.png" class="diagram" alt="Simple hanging container for apps">
+        </div>
+      </div>
+    </div>
+    <div class="span4">
+      <h3>Theming Bootstrap</h3>
+      <p>Starting with v1.3.0, Bootstrap comes equipped with a customizable Less file, Theme.less. It's designed to replace default values in the library and provide a one-stop-shop for adding-on.</p>
+    </div>
+  </div><!-- /row -->
 </section>