adding media grid styles

diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css
index 89482468824770fc620481a83e955e5eba874510..8983090f6b66974c92f68151be85752242d00f05 100644 (file)
--- a/bootstrap-1.3.0.css
+++ b/bootstrap-1.3.0.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Sat Sep 10 21:06:02 PDT 2011
+ * Date: Sat Sep 10 22:27:15 PDT 2011
  */
 /* Reset.less
  * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here      that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc).
@@ -2235,3 +2235,30 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
 .label.notice {
   background-color: #62cffc;
 }
+.media-grid {
+  margin-left: -20px;
+}
+.media-grid li {
+  display: inline;
+}
+.media-grid .thumbnail {
+  float: left;
+  padding: 4px;
+  margin: 0 0 20px 20px;
+  border: 1px solid #ddd;
+  -webkit-border-radius: 4px;
+  -moz-border-radius: 4px;
+  border-radius: 4px;
+  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+.media-grid .thumbnail:hover {
+  border-color: #0069d6;
+  -webkit-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
+  -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
+  box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
+}
+.media-grid img {
+  display: block;
+}

diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css
index 01b5fc78a2505ca227d3e253cb6d7c2dabc49f04..9d10e4b231f10bd73f141d2a500762566bf2086a 100644 (file)
--- a/bootstrap-1.3.0.min.css
+++ b/bootstrap-1.3.0.min.css
@@ -305,3 +305,6 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .label.warning{background-color:#f89406;}
 .label.success{background-color:#46a546;}
 .label.notice{background-color:#62cffc;}
+.media-grid{margin-left:-20px;}.media-grid li{display:inline;}
+.media-grid .thumbnail{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid .thumbnail:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);}
+.media-grid img{display:block;}

diff --git a/docs/index.html b/docs/index.html
index 5fe22294589da450e25427ea03866aa338907bd1..4764edfb52c5bab1ab13e49c72d1b3c71cfa2e5a 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -42,11 +42,12 @@
         <div class="container">
           <h3><a href="#">Bootstrap</a></h3>
           <ul class="nav">
-            <li class="active"><a href="#masthead">Overview</a></li>
+            <li class="active"><a href="#overview">Overview</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#grid-system">Grid</a></li>
             <li><a href="#layouts">Layouts</a></li>
-            <li><a href="#typography">Typography</a></li>
+            <li><a href="#typography">Type</a></li>
+            <li><a href="#media">Media</a></li>
             <li><a href="#tables">Tables</a></li>
             <li><a href="#forms">Forms</a></li>
             <li><a href="#navigation">Navigation</a></li>
@@ -61,7 +62,7 @@
 
     <!-- Masthead (blueprinty thing)
     ================================================== -->
-    <header class="jumbotron masthead">
+    <header class="jumbotron masthead" id="overview">
       <div class="inner">
         <div class="container">
           <h1>Bootstrap, from Twitter</h1>
@@ -698,6 +699,52 @@
 
 
 
+<!-- Media
+================================================== -->
+<section id="media">
+  <div class="page-header">
+    <h1>Media <small>Displaying images and videos</small></h1>
+  </div>
+  <!-- Table structure -->
+  <div class="row">
+    <div class="span4">
+      <h2>Media grid</h2>
+      <p>Display thumbnails of varying sizes on pages with a low HTML footprint and minimal styles.</p>
+    </div>
+    <div class="span12">
+      <ul class="media-grid">
+        <li>
+          <a class="thumbnail" href="#">
+            <img src="http://placehold.it/210x150" alt="">
+          </a>
+        </li>
+        <li>
+          <a class="thumbnail" href="#">
+            <img src="http://placehold.it/210x150" alt="">
+          </a>
+        </li>
+        <li>
+          <a class="thumbnail" href="#">
+            <img src="http://placehold.it/210x150" alt="">
+          </a>
+        </li>
+        <li>
+          <a class="thumbnail" href="#">
+            <img src="http://placehold.it/210x150" alt="">
+          </a>
+        </li>
+        <li>
+          <a class="thumbnail" href="#">
+            <img src="http://placehold.it/210x150" alt="">
+          </a>
+        </li>
+      </ul>
+    </div>
+  </div><!-- /row -->
+</section>
+
+
+
 <!-- Tables
 ================================================== -->
 <section id="tables">

diff --git a/lib/patterns.less b/lib/patterns.less
index 9d2a387f6bab32604ec2c1df921601e248879691..6a21b8f629ce5d9825f86d37b2f27d9a8064a2f3 100644 (file)
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -928,4 +928,30 @@ input[type=submit].btn {
   &.warning   { background-color: @orange; }
   &.success   { background-color: @green; }
   &.notice    { background-color: lighten(@blue, 25%); }
-}
\ No newline at end of file
+}
+
+
+// MEDIA GRIDS
+// -----------
+
+.media-grid {
+  margin-left: -20px;
+  li {
+    display: inline;
+  }
+  .thumbnail {
+    float: left;
+    padding: 4px;
+    margin: 0 0 20px 20px;
+    border: 1px solid #ddd;
+    .border-radius(4px);
+    .box-shadow(0 1px 1px rgba(0,0,0,.075));
+    &:hover {
+      border-color: @linkColor;
+      .box-shadow(0 1px 4px rgba(0,105,214,.25));
+    }
+  }
+  img {
+    display: block;
+  }
+}