updated docs pages (still wip), adding misc css classes, added form styles...

updated docs pages (still wip), adding misc css classes, added form styles from 1.4, added github buttons to homepage

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 31 21:46:38 PDT 2011
+ * Date: Mon Nov  7 21:14:04 PST 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).
@@ -763,33 +763,59 @@ textarea[readonly] {
   border-color: #ddd;
   cursor: not-allowed;
 }
-.has-error {
-  background: #f8dcda;
-  padding: 9px 0;
-  margin: -10px 0 10px;
-  -webkit-border-radius: 4px;
-  -moz-border-radius: 4px;
-  border-radius: 4px;
+form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline {
+  color: #b94a48;
 }
-.has-error > label, .has-error span.help-inline, .has-error span.help-block {
-  color: #9d261d;
+form .clearfix.error input, form .clearfix.error textarea {
+  color: #b94a48;
+  border-color: #ee5f5b;
+}
+form .clearfix.error input:focus, form .clearfix.error textarea:focus {
+  border-color: #e9322d;
+  -webkit-box-shadow: 0 0 6px #f8b9b7;
+  -moz-box-shadow: 0 0 6px #f8b9b7;
+  box-shadow: 0 0 6px #f8b9b7;
+}
+form .clearfix.error .input-prepend .add-on, form .clearfix.error .input-append .add-on {
+  color: #b94a48;
+  background-color: #fce6e6;
+  border-color: #b94a48;
+}
+form .clearfix.warning > label, form .clearfix.warning .help-block, form .clearfix.warning .help-inline {
+  color: #c09853;
+}
+form .clearfix.warning input, form .clearfix.warning textarea {
+  color: #c09853;
+  border-color: #ccae64;
+}
+form .clearfix.warning input:focus, form .clearfix.warning textarea:focus {
+  border-color: #be9a3f;
+  -webkit-box-shadow: 0 0 6px #e5d6b1;
+  -moz-box-shadow: 0 0 6px #e5d6b1;
+  box-shadow: 0 0 6px #e5d6b1;
 }
-.has-error input, .has-error textarea, .has-error select {
-  border-color: #c87872;
-  -webkit-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
-  -moz-box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
-  box-shadow: 0 0 3px rgba(171, 41, 32, 0.25);
+form .clearfix.warning .input-prepend .add-on, form .clearfix.warning .input-append .add-on {
+  color: #c09853;
+  background-color: #d2b877;
+  border-color: #c09853;
 }
-.has-error input:focus, .has-error textarea:focus, .has-error select:focus {
-  border-color: #b9554d;
-  -webkit-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
-  -moz-box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
-  box-shadow: 0 0 6px rgba(171, 41, 32, 0.5);
+form .clearfix.success > label, form .clearfix.success .help-block, form .clearfix.success .help-inline {
+  color: #468847;
 }
-.has-error .input-prepend span.add-on, .has-error .input-append span.add-on {
-  background: #f4c8c5;
-  border-color: #c87872;
-  color: #b9554d;
+form .clearfix.success input, form .clearfix.success textarea {
+  color: #468847;
+  border-color: #57a957;
+}
+form .clearfix.success input:focus, form .clearfix.success textarea:focus {
+  border-color: #458845;
+  -webkit-box-shadow: 0 0 6px #9acc9a;
+  -moz-box-shadow: 0 0 6px #9acc9a;
+  box-shadow: 0 0 6px #9acc9a;
+}
+form .clearfix.success .input-prepend .add-on, form .clearfix.success .input-append .add-on {
+  color: #468847;
+  background-color: #bcddbc;
+  border-color: #468847;
 }
 .form-actions {
   padding: 17px 20px 18px;
@@ -2377,6 +2403,12 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner {
   -moz-box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
   box-shadow: 0 1px 4px rgba(0, 105, 214, 0.25);
 }
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
 /* Responsive.less
  * For phone and tablet devices
  * ------------------------------------------------------------- */

bootstrap.min.css

@@ -127,9 +127,15 @@ input.span14,textarea.span14,select.span14{display:inline-block;float:none;width
 input.span15,textarea.span15,select.span15{display:inline-block;float:none;width:1450px;margin-left:0;}
 input.span16,textarea.span16,select.span16{display:inline-block;float:none;width:1550px;margin-left:0;}
 input[disabled],select[disabled],textarea[disabled],input[readonly],select[readonly],textarea[readonly]{background-color:#f5f5f5;border-color:#ddd;cursor:not-allowed;}
-.has-error{background:#f8dcda;padding:9px 0;margin:-10px 0 10px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}.has-error>label,.has-error span.help-inline,.has-error span.help-block{color:#9d261d;}
-.has-error input,.has-error textarea,.has-error select{border-color:#c87872;-webkit-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);-moz-box-shadow:0 0 3px rgba(171, 41, 32, 0.25);box-shadow:0 0 3px rgba(171, 41, 32, 0.25);}.has-error input:focus,.has-error textarea:focus,.has-error select:focus{border-color:#b9554d;-webkit-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);-moz-box-shadow:0 0 6px rgba(171, 41, 32, 0.5);box-shadow:0 0 6px rgba(171, 41, 32, 0.5);}
-.has-error .input-prepend span.add-on,.has-error .input-append span.add-on{background:#f4c8c5;border-color:#c87872;color:#b9554d;}
+form .clearfix.error>label,form .clearfix.error .help-block,form .clearfix.error .help-inline{color:#b94a48;}
+form .clearfix.error input,form .clearfix.error textarea{color:#b94a48;border-color:#ee5f5b;}form .clearfix.error input:focus,form .clearfix.error textarea:focus{border-color:#e9322d;-webkit-box-shadow:0 0 6px #f8b9b7;-moz-box-shadow:0 0 6px #f8b9b7;box-shadow:0 0 6px #f8b9b7;}
+form .clearfix.error .input-prepend .add-on,form .clearfix.error .input-append .add-on{color:#b94a48;background-color:#fce6e6;border-color:#b94a48;}
+form .clearfix.warning>label,form .clearfix.warning .help-block,form .clearfix.warning .help-inline{color:#c09853;}
+form .clearfix.warning input,form .clearfix.warning textarea{color:#c09853;border-color:#ccae64;}form .clearfix.warning input:focus,form .clearfix.warning textarea:focus{border-color:#be9a3f;-webkit-box-shadow:0 0 6px #e5d6b1;-moz-box-shadow:0 0 6px #e5d6b1;box-shadow:0 0 6px #e5d6b1;}
+form .clearfix.warning .input-prepend .add-on,form .clearfix.warning .input-append .add-on{color:#c09853;background-color:#d2b877;border-color:#c09853;}
+form .clearfix.success>label,form .clearfix.success .help-block,form .clearfix.success .help-inline{color:#468847;}
+form .clearfix.success input,form .clearfix.success textarea{color:#468847;border-color:#57a957;}form .clearfix.success input:focus,form .clearfix.success textarea:focus{border-color:#458845;-webkit-box-shadow:0 0 6px #9acc9a;-moz-box-shadow:0 0 6px #9acc9a;box-shadow:0 0 6px #9acc9a;}
+form .clearfix.success .input-prepend .add-on,form .clearfix.success .input-append .add-on{color:#468847;background-color:#bcddbc;border-color:#468847;}
 .form-actions{padding:17px 20px 18px;margin-top:18px;margin-bottom:18px;background-color:#f5f5f5;border-top:1px solid #ddd;}
 .uneditable-input{background-color:#ffffff;display:block;border-color:#eee;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.025);cursor:not-allowed;}
 :-moz-placeholder{color:#bfbfbf;}
@@ -343,4 +349,6 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0;
 .media-grid li{display:inline;}
 .media-grid a{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 a img{display:block;}
 .media-grid a: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);}
+.pull-right{float:right;}
+.pull-left{float:left;}
 @media (max-width: 480px){.container{width:auto;padding:0 15px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} .row{margin-left:0;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}

docs/assets/css/docs.css

@@ -54,9 +54,10 @@ body > .navbar-fixed .brand:hover {
   float: left;
   padding: 1px 5px 1px 4px;
   font-size: 11px;
-  font-weight: normal;
+  font-weight: bold;
   line-height: 16px;
-  color: #555;
+  color: #666;
+  text-shadow: 0 1px 0 #fff;
   -webkit-border-radius: 3px;
      -moz-border-radius: 3px;
           border-radius: 3px;
@@ -67,7 +68,7 @@ body > .navbar-fixed .brand:hover {
 .github-btn .github-ico {
   float: left;
   margin-right: 4px;
-  opacity: .75;
+  opacity: .65;
 }
 .github-btn .count {
   display: inline-block;

docs/less.html

@@ -48,11 +48,82 @@
       <!-- Masthead
       ================================================== -->
       <header class="jumbotron subhead" id="overview">
-        <h1>Using LESS</h1>
+        <h1>Using LESS with Bootstrap</h1>
         <p class="lead">Be a boss and use Bootstrap's built-in variables, mixins, and more via LESS</p>
       </header>
 
 
+
+      <!-- BUILT WITH LESS
+      ================================================== -->
+      <div class="page-header">
+        <h1>Built with LESS</h1>
+      </div>
+      <div class="row">
+        <div class="span4">
+          <h3>Why LESS?</h3>
+          <p>Bootstrap is made with LESS at it's core, a dynamic stylesheet language created by Alexis Sellier. It makes developing systems-based CSS faster, easier, and more fun.</p>
+        </div>
+        <div class="span4">
+          <h3>What's included?</h3>
+          <p>As an extension of CSS, LESS includes variables, mixins for reusable snippets of code, operations for simple math, nesting, and even color functions.</p>
+        </div>
+        <div class="span4">
+          <h3>Learn more</h3>
+          <img style="float: right; height: 36px;" src="assets/img/less-logo-large.png" alt="LESS CSS">
+          <p>Visit the official website at http://lesscss.org to learn more.</p>
+        </div>
+      </div>
+      <div class="row">
+        <div class="span4">
+          <h3>Variables</h3>
+          <p>Managing colors and pixel values in CSS can be a bit of a pain, usually full of copy and paste. Not with LESS though&mdash;assign colors or pixel values as variables and change them once.</p>
+        </div>
+        <div class="span4">
+          <h3>Mixins</h3>
+          <p>Those three border-radius declarations you need to make in regular ol' CSS? Now they're down to one line with the help of mixins, snippets of code you can reuse anywhere.</p>
+        </div>
+        <div class="span4">
+          <h3>Operations</h3>
+          <p>Make your grid, leading, and more super flexible by doing the math on the fly with operations. Multiple, divide, add, and subtract your way to CSS sanity.</p>
+        </div>
+      </div>
+
+
+
+      <!-- VARIABLES
+      ================================================== -->
+      <div class="page-header" id="variables">
+        <h1>Variables</h1>
+      </div>
+
+
+
+      <!-- MIXINS
+      ================================================== -->
+      <div class="page-header" id="mixins">
+        <h1>Mixins</h1>
+      </div>
+
+
+
+      <!-- OPERATIONS
+      ================================================== -->
+      <div class="page-header" id="operations">
+        <h1>Operations</h1>
+      </div>
+
+
+
+      <!-- COMPILING LESS AND BOOTSTRAP
+      ================================================== -->
+      <div class="page-header" id="compiling">
+        <h1>Compiling LESS and Bootstrap</h1>
+      </div>
+
+
+
+
 <!-- Using Bootstrap w/ Less
 ================================================== -->
 <section id="less">

lib/forms.less

@@ -3,6 +3,7 @@
  * ------------------------------------------------------------- */
 
 
+
 // GENERAL STYLES
 // --------------
 
@@ -84,6 +85,7 @@ input[type=submit] {
   height: auto;
 }
 
+// Set the height of select and file controls to match text inputs
 select,
 input[type=file] {
   height: @baseLineHeight * 1.5; // In IE7, the height of the select element cannot be changed by height, only font-size
@@ -188,42 +190,47 @@ textarea[readonly] {
 
 
 
-// ERROR STATE
-// -----------
-
-// Set color of error text
-@error-text: desaturate(lighten(@red, 25%), 25%);
+// FORM FIELD FEEDBACK STATES
+// --------------------------
 
-// Style the background of control-groups with errors
-.has-error {
-  background: lighten(@red, 55%);
-  padding: (@baseLineHeight / 2) 0;
-  margin: -10px 0 10px;
-  .border-radius(4px);
+// Mixin for form field states
+.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
+  // Set the text color
   > label,
-  span.help-inline,
-  span.help-block {
-    color: @red;
+  .help-block,
+  .help-inline {
+    color: @textColor;
   }
+  // Style inputs accordingly
   input,
-  textarea,
-  select {
-    border-color: @error-text;
-    .box-shadow(0 0 3px rgba(171,41,32,.25));
+  textarea {
+    color: @textColor;
+    border-color: @borderColor;
     &:focus {
-      border-color: darken(@error-text, 10%);
-      .box-shadow(0 0 6px rgba(171,41,32,.5));
+      border-color: darken(@borderColor, 10%);
+      .box-shadow(0 0 6px lighten(@borderColor, 20%);
     }
   }
-  .input-prepend,
-  .input-append {
-    span.add-on {
-      background: lighten(@red, 50%);
-      border-color: @error-text;
-      color: darken(@error-text, 10%);
-    }
+  // Give a small background color for input-prepend/-append
+  .input-prepend .add-on,
+  .input-append .add-on {
+    color: @textColor;
+    background-color: @backgroundColor;
+    border-color: @textColor;
   }
 }
+// Error
+form .clearfix.error {
+  .formFieldState(#b94a48, #ee5f5b, lighten(#ee5f5b, 30%));
+}
+// Warning
+form .clearfix.warning {
+  .formFieldState(#c09853, #ccae64, lighten(#CCAE64, 5%));
+}
+// Success
+form .clearfix.success {
+  .formFieldState(#468847, #57a957, lighten(#57a957, 30%));
+}
 
 
 
@@ -238,7 +245,6 @@ textarea[readonly] {
   border-top: 1px solid #ddd;
 }
 
-
 // For text that needs to appear as an input but should not be an input
 .uneditable-input {
   background-color: @white;
@@ -281,6 +287,7 @@ textarea[readonly] {
 }
 
 
+
 // INLINE FIELDS
 // -------------
 
@@ -301,6 +308,7 @@ textarea[readonly] {
 }
 
 
+
 // INPUT GROUPS
 // ------------
 
@@ -353,7 +361,6 @@ textarea[readonly] {
 
 
 
-
 // SEARCH FORM
 // -----------
 
@@ -366,7 +373,6 @@ textarea[readonly] {
 // HORIZONTAL & VERTICAL FORMS
 // ---------------------------
 
-
 // Common properties
 // -----------------
 
@@ -374,17 +380,11 @@ textarea[readonly] {
 .control-group {
   margin-bottom: @baseLineHeight;
 }
-
 // Bold the labels so they stand out
 .control-group > label {
   font-weight: bold;
 }
 
-// Lists of controls (checkboxes and radios)
-.control-list {
-}
-
-
 // Horizontal-specific styles
 // --------------------------
 

lib/mixins.less

@@ -139,7 +139,7 @@
 
 // Transform for scale and rotate
 // translate, rotate, scale -- need to finalize
-.rotation(@degrees: 5deg) {
+.rotate(@degrees: 5deg) {
   -webkit-transform: rotate(@degrees);
      -moz-transform: rotate(@degrees);
       -ms-transform: rotate(@degrees);

lib/patterns.less

@@ -1151,3 +1151,13 @@ input[type=submit].btn {
     }
   }
 }
+
+
+// MISC
+// ----
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
\ No newline at end of file