Merge pull request #126 from joetheday/jumbotron

Simplified Jumbotron.

src/doc/components.hbs

@@ -35,9 +35,6 @@
                     <li role="presentation">
                         <a href="#jumbotron">Jumbotron</a>
                     </li>
-                    <li rolw="presentation">
-                        <a href="alerts.html">Alerts</a>
-                    </li>
                 </ul>
             </div>
         </div>
@@ -62,7 +59,7 @@
     {{> list-items }}
     <hr />
     {{> pagination }}
-    <hr />
-    {{> jumbotron }}
-    <hr />
 </div>
+<!-- Since Jumbotron is outside the grid... -->
+{{> jumbotron-doc }}
+

src/doc/partials/jumbotron-centered.hbs

@@ -1,58 +1,15 @@
-<h4>Jumbotron centered on dark image</h4>
-</div><!-- close container -->
-    <div class="jumbotron theme-dark">
-        <div class="jumbotron-background">
-            <img src="http://lorempixel.com/1920/420/sports/2"
-                srcset="http://lorempixel.com/539/235/sports/2 539w,
-                http://lorempixel.com/767/55/sports/2 767w,
-                http://lorempixel.com/1083/70/sports/2 1083w,
-                http://lorempixel.com/1399/325/sports/2 1399w"
-            ><!--end srcset -->
-        </div>
-        <div class="container-wrap">
-            <div class="container">
-                <div class="row">
-                    <div class="jumbotron-content-wrap">
-                        <div class="jumbotron-content centered">
-                            <h1>Stay fit &amp; healthy</h1>
-                            <p>Keep active, healthy lives are happy lives</p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-<div class="container"><!-- open container -->
-    <div class="row">
-        <div class="col-xs-24">
-            {{#markdown}}
-```xml
-</div><!-- close container -->
-    <div class="jumbotron theme-dark">
-        <div class="jumbotron-background">
-            <!-- set largest picture as default source for unsuported browsers -->
-            <img src="http://lorempixel.com/1920/420/sports/2"
-                srcset="http://lorempixel.com/539/235/sports/2 539w,
-                http://lorempixel.com/767/55/sports/2 767w,
-                http://lorempixel.com/1083/70/sports/2 1083w,
-                http://lorempixel.com/1399/325/sports/2 1399w"
-            ><!--end srcset -->
-        </div>
-        <div class="container-wrap">
-            <div class="container">
-                <div class="row">
-                    <div class="jumbotron-content-wrap">
-                        <div class="jumbotron-content centered">
-                            <h1></h1>
-                            <p></p>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
-    </div>
-<div class="container"><!-- open container -->
-```
-            {{/markdown}}
-        </div>
-    </div>
+<div class="jumbotron theme-dark">
+    <div class="container">
+        <div class="col-md-24 text-center">
+            <h3>This is a centered Heading 3</h3>
+            <div class="type-sh3">
+                And this is it's Subheading 3
+            </div>
+            <div class="row">
+                <div class="col-md-12 col-md-offset-6">
+                    <div class="type-p3">You can create any Hero configuration with the combination of default settings and standard text/spacer classes. Take a look at the marukup to see it in action.</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

src/doc/partials/jumbotron-doc.hbs

@@ -0,0 +1,51 @@
+<div class="container">
+    <section class="section" id="jumbotron">
+        <header class="section-header row">
+            <h1 class="section-title col-xs-24">
+                <a href="#jumbotron">Jumbotron</a>
+            </h1>
+        </header>
+        <div class="row">
+            <div class="col-md-18">
+                <p>Also known as <i>Hero</i>, Jumbotron is a lightweight container for different types of content meant to be emphasized at the top of a page. Heros and Jumbotrons jump outside the grid to allow full-bleed, edge to edge display.</p>
+                <p>Jumbotron has basic defaults designed to be flexibile for different types of content. Use defaults with combinations of text and spacer classes to achieve specific designs (see centered example below).</p>
+            </div>
+    </section>
+</div>
+
+<!-- Since Jumbotron is outside the grid... -->
+{{> jumbotron }}
+
+<div class="container m-v-xs">
+    <div class="row">
+        <div class="col-xs-24">
+            {{#markdown}}
+```xml
+{{> jumbotron }}
+```
+            {{/markdown}}
+        </div>
+    </div>
+</div>
+
+<!-- Since Jumbotron is outside the grid... -->
+{{> jumbotron-centered }}
+
+<div class="container m-t-xs">
+    <div class="row">
+        <div class="col-xs-24">
+            {{#markdown}}
+```xml
+{{> jumbotron-centered }}
+```
+            {{/markdown}}
+        </div>
+        <div class="col-md-24">
+            <div class="guidance guidance-usage m-t-xs">
+                {{#markdown}}
+{{> jumbotron-guidance.md}}
+                {{/markdown}}
+            </div>
+        </div>
+    </div>
+</div>

src/doc/partials/jumbotron-guidance.md.hbs

@@ -0,0 +1,4 @@
+* Do not put `.jumbotron` inside `.container` or `.container-fluid`. Instead, close the container before adding Jumbotron to the page, then follow it by opening a new container afterward if necessary.
+* You can use the `.jumbotron` and `.hero` classes interchangably. Microsoft sites call this component _Hero_ which is why the class is offered here.
+* Add theme classes `.theme-default`, `.theme-light`, `.theme-dark`, and `.theme-alt` at the `.jumbotron` level.
+* Each theme class has default background-colors because Bootsrap explicitly sets background color for `.jumbotron`.