few tweaks to responsive stuff, updated docs for grid system (still needs copy editing)

1 files changed, 67 insertions, 92 deletions

diff --git a/bootstrap.css b/bootstrap.css
index 32ffc6120..89d55199e 100644
--- 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: Sun Oct 16 19:08:43 PDT 2011
+ * Date: Sun Oct 16 23:04:03 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).
@@ -260,6 +260,7 @@ a:hover {
   display: block;
 }
 .row {
+  margin-left: -20px;
   zoom: 1;
 }
 .row:before, .row:after {
@@ -276,9 +277,6 @@ a:hover {
   float: left;
   margin-left: 20px;
 }
-.row > [class*="span"]:first-child {
-  margin-left: 0;
-}
 .span1 {
   width: 60px;
 }
@@ -316,37 +314,37 @@ a:hover {
   width: 940px;
 }
 .offset1 {
-  margin-left: 80px;
+  margin-left: 100px;
 }
 .offset2 {
-  margin-left: 160px;
+  margin-left: 180px;
 }
 .offset3 {
-  margin-left: 240px;
+  margin-left: 260px;
 }
 .offset4 {
-  margin-left: 320px;
+  margin-left: 340px;
 }
 .offset5 {
-  margin-left: 400px;
+  margin-left: 420px;
 }
 .offset6 {
-  margin-left: 480px;
+  margin-left: 500px;
 }
 .offset7 {
-  margin-left: 560px;
+  margin-left: 580px;
 }
 .offset8 {
-  margin-left: 640px;
+  margin-left: 660px;
 }
 .offset9 {
-  margin-left: 720px;
+  margin-left: 740px;
 }
 .offset10 {
-  margin-left: 800px;
+  margin-left: 820px;
 }
 .offset11 {
-  margin-left: 880px;
+  margin-left: 900px;
 }
 /* Typography.less
  * Headings, body text, lists, code, and more for a versatile and durable typography system
@@ -1550,14 +1548,14 @@ footer {
   border-top: 1px solid #eee;
 }
 .page-header {
-  margin-bottom: 17px;
-  border-bottom: 1px solid #ddd;
+  margin-bottom: 27px;
+  border-bottom: 1px solid #eee;
   -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
   box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
 }
 .page-header h1 {
-  margin-bottom: 8px;
+  margin-bottom: 13.5px;
 }
 .btn.danger,
 .alert-message.danger,
@@ -2379,83 +2377,60 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
     margin-left: 768px;
   }
 }
+/*
+// LARGE DESKTOP & UP
+// ------------------
+
 @media (min-width: 1210px) {
-  .container {
-    width: 1170px;
-  }
-  [class*="span"] {
-    margin-left: 30px;
-  }
-  .span1 {
-    width: 70px;
-  }
-  .span2 {
-    width: 170px;
-  }
-  .span3 {
-    width: 270px;
-  }
-  .span4 {
-    width: 370px;
-  }
-  .span5 {
-    width: 470px;
-  }
-  .span6 {
-    width: 570px;
-  }
-  .span7 {
-    width: 670px;
-  }
-  .span8 {
-    width: 770px;
-  }
-  .span9 {
-    width: 870px;
-  }
-  .span10 {
-    width: 970px;
-  }
-  .span11 {
-    width: 1070px;
-  }
-  .span12 {
-    width: 1170px;
-  }
-  .offset1 {
-    margin-left: 100px;
-  }
-  .offset2 {
-    margin-left: 200px;
-  }
-  .offset3 {
-    margin-left: 300px;
-  }
-  .offset4 {
-    margin-left: 400px;
-  }
-  .offset5 {
-    margin-left: 500px;
-  }
-  .offset6 {
-    margin-left: 600px;
-  }
-  .offset7 {
-    margin-left: 700px;
-  }
-  .offset8 {
-    margin-left: 800px;
-  }
-  .offset9 {
-    margin-left: 900px;
+
+  // Reset grid variables
+  @gridColumns:       12;
+  @gridColumnWidth:   70px;
+  @gridGutterWidth:   30px;
+  @siteWidth:         1170px;
+
+  // Bring grid mixins to recalculate widths
+  .columns(@columnSpan: 1) {
+    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
   }
-  .offset10 {
-    margin-left: 1000px;
+  .offset(@columnOffset: 1) {
+    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
   }
-  .offset11 {
-    margin-left: 1100px;
+
+  .container {
+    width: @siteWidth;
   }
-  .offset12 {
-    margin-left: 1200px;
+  [class*="span"] {
+    margin-left: @gridGutterWidth;
   }
+
+  // Default columns
+  .span1     { .columns(1); }
+  .span2     { .columns(2); }
+  .span3     { .columns(3); }
+  .span4     { .columns(4); }
+  .span5     { .columns(5); }
+  .span6     { .columns(6); }
+  .span7     { .columns(7); }
+  .span8     { .columns(8); }
+  .span9     { .columns(9); }
+  .span10    { .columns(10); }
+  .span11    { .columns(11); }
+  .span12    { .columns(12); }
+
+  // Offset column options
+  .offset1   { .offset(1); }
+  .offset2   { .offset(2); }
+  .offset3   { .offset(3); }
+  .offset4   { .offset(4); }
+  .offset5   { .offset(5); }
+  .offset6   { .offset(6); }
+  .offset7   { .offset(7); }
+  .offset8   { .offset(8); }
+  .offset9   { .offset(9); }
+  .offset10  { .offset(10); }
+  .offset11  { .offset(11); }
+  .offset12  { .offset(12); }
+
 }
+*/
\ No newline at end of file