adding responsive stuff to docs to stub that out, updated type to make ul and ol...

diff --git a/bootstrap.css b/bootstrap.css
index f3ff894d1a057e44d4fae9ebae130cf36342126a..0f6d58ae061d978bee0dc0a2662f99a6738efe88 100644 (file)
--- a/bootstrap.css
+++ b/bootstrap.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: Mon Oct 17 14:16:58 PDT 2011
+ * Date: Mon Oct 17 23:44:56 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).
@@ -416,7 +416,7 @@ h6 {
   text-transform: uppercase;
 }
 ul, ol {
-  margin: 0 0 18px 25px;
+  margin: 0 0 9px 25px;
 }
 ul ul,
 ul ol,

diff --git a/bootstrap.min.css b/bootstrap.min.css
index 86b68e44a72536fe9686f4fd214dd14c113b2d9d..31912f29333dc16d6431e8b4137bc6523afdf36d 100644 (file)
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -70,7 +70,7 @@ h3{line-height:27px;font-size:18px;}h3 small{font-size:14px;}
 h4{font-size:16px;line-height:36px;}h4 small{font-size:12px;}
 h5{font-size:14px;line-height:18px;}
 h6{font-size:13px;line-height:18px;color:#bfbfbf;text-transform:uppercase;}
-ul,ol{margin:0 0 18px 25px;}
+ul,ol{margin:0 0 9px 25px;}
 ul ul,ul ol,ol ol,ol ul{margin-bottom:0;}
 ul{list-style:disc;}
 ol{list-style:decimal;}

diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index bbf71ab77874a91ce7eca253b7c96c489615ec5d..2d0b87fe210821bd7c2fb2e35408ea846d9b361c 100644 (file)
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -309,7 +309,7 @@ pre.prettyprint {
 
 /* Make tables spaced out a bit more */
 h2 + table {
-  margin-top: 10px;
+  margin-top: 5px;
 }
 
 /* Responsive Docs
@@ -347,3 +347,18 @@ h2 + table {
   }
 }
 
+
+
+.supported-devices {
+  margin-bottom: 9px;
+  color: #777;
+}
+.supported-devices strong {
+  display: block;
+  font-size: 14px;
+  line-height: 18px;
+}
+.supported-devices small {
+  font-size: 12px;
+}
+

diff --git a/docs/assets/img/responsive-illustrations.png b/docs/assets/img/responsive-illustrations.png
new file mode 100644 (file)
index 0000000..c980da7
Binary files /dev/null and b/docs/assets/img/responsive-illustrations.png differ

diff --git a/docs/index.html b/docs/index.html
index 7fe5ce1ca79c1bd56f52f998dacdbd13b17118c2..aafea7662198a57420a81c9e9a7f7bb24352b907 100644 (file)
--- a/docs/index.html
+++ b/docs/index.html
@@ -399,6 +399,86 @@
 
 
 
+
+<!-- Responsive design
+================================================== -->
+<section id="responsive">
+  <div class="page-header">
+    <h1>Responsive design <small>Media queries for various devices and resolutions</small></h1>
+  </div>
+  <!-- Supported devices -->
+  <div class="row">
+    <div class="span4">
+      <img src="assets/img/responsive-illustrations.png" alt="Responsive devices">
+    </div>
+    <div class="span8">
+      <h2>Supported devices</h2>
+      <table class="supported-devices">
+        <tbody>
+          <tr>
+            <td>
+              <strong>Under 480px</strong>
+              <small>Smartphones</small>
+            </td>
+            <td>
+              <strong>480px to 768px</strong>
+              <small>Portrait tablet</small>
+            </td>
+            <td>
+              <strong>768px to 940px</strong>
+              <small>Landscape tablet</small>
+            </td>
+            <td>
+              <strong>940px and up</strong>
+              <small>Default</small>
+            </td>
+            <td>
+              <strong>1170px and up</strong>
+              <small>Large screens</small>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      <p>With these media queries, Bootstrap provides developers with the core tools necessary to develop responsively on the web for the world's most common devices and resolutions.</p>
+    </div>
+  </div>
+
+  <br>
+
+  <!-- Media query code -->
+  <h2>Using the media queries</h2>
+  <div class="row">
+    <div class="span4">
+      <p>Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:</p>
+      <ol>
+        <li>Use the compiled responsive version, bootstrap.reponsive.css</li>
+        <li>Add @import "responsive.less" and recompile Bootstrap</li>
+        <li>Compile responsive.less as a separate file and include that</li>
+      </ol>
+      <p><strong>Why not just include it?</strong> Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.</p>
+    </div>
+    <div class="span8">
+<pre class="prettyprint linenums">
+  // Landscape phones and down
+  @media (max-width: 480px) { ... }
+
+  // Landscape phone to portrait tablet
+  @media (min-width: 480px) and (max-width: 768px) { ... }
+
+  // Portrait tablet to landscape and desktop
+  @media (min-width: 768px) and (max-width: 940px) { ... }
+
+  // Large desktop
+  @media (min-width: 1210px) { .. }
+</pre>
+    </div>
+  </div>
+
+</section>
+
+
+
+
 <!-- Typography
 ================================================== -->
 <section id="typography">

diff --git a/lib/type.less b/lib/type.less
index 4978dd78698e8aa8295116ff348d59aae81d2247..a490bf5fa14640c0467322a9daedd38159b9e228 100644 (file)
--- a/lib/type.less
+++ b/lib/type.less
@@ -74,7 +74,7 @@ h6 {
 
 // Unordered and Ordered lists
 ul, ol {
-  margin: 0 0 @baseLineHeight 25px;
+  margin: 0 0 @baseLineHeight / 2 25px;
 }
 ul ul,
 ul ol,