remove qualifying tags in .span selectors for built in grid so that w…

…e can use .span-n classes in form styles
lulit · Sep 12, 2011 · 53812bc · 53812bc
1 parent f3f60b2
commit 53812bc
Show file tree

Hide file tree

Showing 5 changed files with 269 additions and 137 deletions.
diff --git 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: Sun Sep 11 18:08:25 PDT 2011
+ * Date: Sun Sep 11 18:43:05 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).
@@ -374,129 +374,129 @@ a:hover {
 .row:after {
   clear: both;
 }
-.row [class*="span"] {
+[class*="span"] {
   display: inline;
   float: left;
   margin-left: 20px;
 }
-.row .span1 {
+.span1 {
   width: 40px;
 }
-.row .span2 {
+.span2 {
   width: 100px;
 }
-.row .span3 {
+.span3 {
   width: 160px;
 }
-.row .span4 {
+.span4 {
   width: 220px;
 }
-.row .span5 {
+.span5 {
   width: 280px;
 }
-.row .span6 {
+.span6 {
   width: 340px;
 }
-.row .span7 {
+.span7 {
   width: 400px;
 }
-.row .span8 {
+.span8 {
   width: 460px;
 }
-.row .span9 {
+.span9 {
   width: 520px;
 }
-.row .span10 {
+.span10 {
   width: 580px;
 }
-.row .span11 {
+.span11 {
   width: 640px;
 }
-.row .span12 {
+.span12 {
   width: 700px;
 }
-.row .span13 {
+.span13 {
   width: 760px;
 }
-.row .span14 {
+.span14 {
   width: 820px;
 }
-.row .span15 {
+.span15 {
   width: 880px;
 }
-.row .span16 {
+.span16 {
   width: 940px;
 }
-.row .span17 {
+.span17 {
   width: 1000px;
 }
-.row .span18 {
+.span18 {
   width: 1060px;
 }
-.row .span19 {
+.span19 {
   width: 1120px;
 }
-.row .span20 {
+.span20 {
   width: 1180px;
 }
-.row .span21 {
+.span21 {
   width: 1240px;
 }
-.row .span22 {
+.span22 {
   width: 1300px;
 }
-.row .span23 {
+.span23 {
   width: 1360px;
 }
-.row .span24 {
+.span24 {
   width: 1420px;
 }
-.row .offset1 {
+.offset1 {
   margin-left: 80px;
 }
-.row .offset2 {
+.offset2 {
   margin-left: 140px;
 }
-.row .offset3 {
+.offset3 {
   margin-left: 200px;
 }
-.row .offset4 {
+.offset4 {
   margin-left: 260px;
 }
-.row .offset5 {
+.offset5 {
   margin-left: 320px;
 }
-.row .offset6 {
+.offset6 {
   margin-left: 380px;
 }
-.row .offset7 {
+.offset7 {
   margin-left: 440px;
 }
-.row .offset8 {
+.offset8 {
   margin-left: 500px;
 }
-.row .offset9 {
+.offset9 {
   margin-left: 560px;
 }
-.row .offset10 {
+.offset10 {
   margin-left: 620px;
 }
-.row .offset11 {
+.offset11 {
   margin-left: 680px;
 }
-.row .offset12 {
+.offset12 {
   margin-left: 740px;
 }
-.row .span-one-third {
+.span-one-third {
   width: 300px;
 }
-.row .span-two-thirds {
+.span-two-thirds {
   width: 620px;
 }
-.row .offset-one-third {
+.offset-one-third {
   margin-left: 340px;
 }
-.row .offset-two-thirds {
+.offset-two-thirds {
   margin-left: 660px;
 }
 /* Typography.less
@@ -883,6 +883,70 @@ select.xxlarge {
 textarea.xxlarge {
   overflow-y: auto;
 }
+input.span1, textarea.span1, select.span1 {
+  width: 30px;
+  margin-left: 0;
+}
+input.span2, textarea.span2, select.span2 {
+  width: 90px;
+  margin-left: 0;
+}
+input.span3, textarea.span3, select.span3 {
+  width: 150px;
+  margin-left: 0;
+}
+input.span4, textarea.span4, select.span4 {
+  width: 210px;
+  margin-left: 0;
+}
+input.span5, textarea.span5, select.span5 {
+  width: 270px;
+  margin-left: 0;
+}
+input.span6, textarea.span6, select.span6 {
+  width: 330px;
+  margin-left: 0;
+}
+input.span7, textarea.span7, select.span7 {
+  width: 390px;
+  margin-left: 0;
+}
+input.span8, textarea.span8, select.span8 {
+  width: 450px;
+  margin-left: 0;
+}
+input.span9, textarea.span9, select.span9 {
+  width: 510px;
+  margin-left: 0;
+}
+input.span10, textarea.span10, select.span10 {
+  width: 570px;
+  margin-left: 0;
+}
+input.span11, textarea.span11, select.span11 {
+  width: 630px;
+  margin-left: 0;
+}
+input.span12, textarea.span12, select.span12 {
+  width: 690px;
+  margin-left: 0;
+}
+input.span13, textarea.span13, select.span13 {
+  width: 750px;
+  margin-left: 0;
+}
+input.span14, textarea.span14, select.span14 {
+  width: 810px;
+  margin-left: 0;
+}
+input.span15, textarea.span15, select.span15 {
+  width: 870px;
+  margin-left: 0;
+}
+input.span16, textarea.span16, select.span16 {
+  width: 930px;
+  margin-left: 0;
+}
 input[disabled],
 select[disabled],
 textarea[disabled],

diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css
diff --git a/docs/index.html b/docs/index.html
@@ -1186,11 +1186,34 @@ <h2>Stacked forms</h2>
     </div>
   </div><!-- /row -->
 
+  <div class="row">
+    <div class="span4">
+      <h2>Form field sizes</h2>
+      <p>Customize any form <code>input</code>, <code>select</code>, or <code>textarea</code> width by adding just a few classes to your markup.</p>
+      <p>As of v1.3.0, we have added the grid-based sizing classes for form elements. <strong>Please use the these over the existing <code>.mini</code>, <code>.small</code>, etc classes.</strong></p>
+    </div>
+    <div class="span12">
+      <form action="">
+        <div class="clearfix"><input class="span2" id="" name="" type="text" placeholder=".span2" /></div>
+        <div class="clearfix"><input class="span3" id="" name="" type="text" placeholder=".span3" /></div>
+        <div class="clearfix"><input class="span4" id="" name="" type="text" placeholder=".span4" /></div>
+        <div class="clearfix"><input class="span5" id="" name="" type="text" placeholder=".span5" /></div>
+        <div class="clearfix"><input class="span6" id="" name="" type="text" placeholder=".span6" /></div>
+        <div class="clearfix"><input class="span7" id="" name="" type="text" placeholder=".span7" /></div>
+        <div class="clearfix"><input class="span8" id="" name="" type="text" placeholder=".span8" /></div>
+        <div class="clearfix"><input class="span9" id="" name="" type="text" placeholder=".span9" /></div>
+        <div class="clearfix"><input class="span10" id="" name="" type="text" placeholder=".span10" /></div>
+        <div class="clearfix"><input class="span11" id="" name="" type="text" placeholder=".span11" /></div>
+        <div class="clearfix"><input class="span12" id="" name="" type="text" placeholder=".span12" /></div>
+      </form>
+    </div>
+  </div>
+
   <div class="row">
     <div class="span4">
       <h2>Buttons</h2>
       <p>As a convention, buttons are used for actions while links are used for objects. For instance, "Download" could be a button and "recent activity" could be a link.</p>
-      <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class. Plus, rolling your own styles is easy peasy.</p>
+      <p>All buttons default to a light gray style, but a number of functional classes can be applied for different color styles. These classes include a blue <code>.primary</code> class, a light-blue <code>.info</code> class, a green <code>.success</code> class, and a red <code>.danger</code> class.</p>
     </div>
     <div class="span12">
       <h3>Example buttons</h3>