change template diagrams to be .media-grid

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a4bd11b3e02aceedbea10973bd64c7c0d43b13f5..f45c77745da4637f5a62cb65f84446a77339c498 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -203,7 +203,6 @@ section > .row {
 
 /* Render mini layout previews
 -------------------------------------------------- */
-.diagram,
 .mini-layout {
   border: 1px solid #ddd;
   -webkit-border-radius: 6px;
@@ -213,10 +212,6 @@ section > .row {
      -moz-box-shadow: 0 1px 2px rgba(0,0,0,.075);
           box-shadow: 0 1px 2px rgba(0,0,0,.075);
 }
-.diagram {
-  height: 140px;
-  padding: 4px;
-}
 .mini-layout {
   height: 340px;
   margin-bottom: 20px;

diff --git a/docs/index.html b/docs/index.html
index 02335fd7581830b3c7a5d0726e97f7d85673b880..560343ed6dd902329235c4a6e8dffd3ff1e33304 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -151,18 +151,17 @@
     <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">
-          <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" class="diagram" alt="Simple three-column layout with hero unit"></a>
-        </div>
-        <div class="span4">
-          <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" class="diagram" alt="Fluid layout with static sidebar"></a>
-        </div>
-        <div class="span4">
-          <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" class="diagram" alt="Simple hanging container for apps"></a>
-        </div>
-      </div>
+      <ul class="media-grid">
+        <li>
+          <a href="../examples/hero.html"><img src="assets/img/example-diagram-01.png" alt="Simple three-column layout with hero unit"></a>
+        </li>
+        <li>
+          <a href="../examples/fluid.html"><img src="assets/img/example-diagram-02.png" alt="Fluid layout with static sidebar"></a>
+        </li>
+        <li>
+          <a href="../examples/container-app.html"><img src="assets/img/example-diagram-03.png" alt="Simple hanging container for apps"></a>
+        </li>
+      </ul>
     </div>
     <div class="span4">
       <h3>Theming Bootstrap</h3>