Removed .rounded and left .border-radius since one was redundant; reo…

…rganized bootstrap.less; added .clearfix mixin; added .content-columns mixin; added #translucent bundle with nested mixins
nightsailer · Mar 22, 2011 · 52639f5 · 52639f5
1 parent 3a85a95
commit 52639f5
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 67 deletions.
diff --git a/bootstrap.less b/bootstrap.less
@@ -9,9 +9,12 @@
   @link-hover-color: darken(@link-color, 10);
 
   // Grays
+  @white: #fff;
+  @gray-lighter: #ccc;
   @gray-light: #777;
   @gray: #555;
   @gray-dark: #333;
+  @black: #000;
 
   // Accent Colors
   @blue: #00b3ee;
@@ -27,35 +30,18 @@
   Mixins
 	-------------------------------------------------- */
 
-  // Border Radius
-  .rounded(@radius: 5px) {
-    -webkit-border-radius: @radius;
-    -moz-border-radius: @radius;
-    border-radius: @radius;
-  }
-  .border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
-  	-webkit-border-top-left-radius: @topleft;
-  	-webkit-border-top-right-radius: @topright;
-  	-webkit-border-bottom-right-radius: @bottomright;
-  	-webkit-border-bottom-left-radius: @bottomleft;
-  	-moz-border-radius: @topleft @topright @bottomright @bottomleft;
-  	border-radius: @topleft @topright @bottomright @bottomleft;
-  }
-
-  // Drop shadows
-  .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
-    -webkit-box-shadow: @shadow;
-    -moz-box-shadow: @shadow;
-    box-shadow: @shadow;
-  }
-
-  // Transitions
-  .transition(@transition) {
-  	-webkit-transition: @transition;
-  	-moz-transition: @transition;
-  	transition: @transition;
-  }
-
+  // Clearfix for clearing floats like a boss
+	.clearfix {
+    zoom: 1;
+		&:after {
+      display: block;
+      visibility: hidden;
+      height: 0;
+      clear: both;
+      content: ".";
+		}
+	}
+
   // Font Stacks
   .sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -75,27 +61,13 @@
     font-weight: @weight;
     line-height: @lineheight;
   }
-
-  // Gradients
-  .gradient(@startColor: #555, @endColor: #333) {
-    background-color: @endColor;
-    background-repeat: no-repeat;
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
-    background-image: -moz-linear-gradient(@startColor, @endColor);
-  }
-  .three-color-gradient(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
-    background-color: @endColor;
-    background-repeat: no-repeat;
-    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
-    background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
-  }
-
+
   // Grid System
   @grid_columns: 16;
   @grid_column_width: 40px;
   @grid_gutter_width: 20px;
   .container {
-    width: (@grid_columns * @grid_column_width) + ((@grid_columns - 1) * @grid_gutter_width);
+    width: (@grid_column_width * @grid_columns) + (@grid_gutter_width * (@grid_columns - 1));
     overflow: hidden;
   }
   .columns(@column_span: 1) {
@@ -108,6 +80,50 @@
     }
   }
 
+  // Border Radius
+  .border-radius(@radius: 5px) {
+    -moz-border-radius: @radius;
+    border-radius: @radius;
+  }
+
+  // Drop shadows
+  .box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
+    -webkit-box-shadow: @shadow;
+    -moz-box-shadow: @shadow;
+    box-shadow: @shadow;
+  }
+
+  // Transitions
+  .transition(@transition) {
+  	-webkit-transition: @transition;
+  	-moz-transition: @transition;
+  	transition: @transition;
+  }
+
+  // Gradients
+  .gradient(@startColor: #555, @endColor: #333) {
+    background-color: @endColor;
+    background-repeat: no-repeat;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor));
+    background-image: -moz-linear-gradient(@startColor, @endColor);
+  }
+  .three-color-gradient(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
+    background-color: @endColor;
+    background-repeat: no-repeat;
+    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor));
+    background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
+  }
+
+  // CSS3 Content Columns
+  .content-columns(@column_count, @column_gap: 20px) {
+		-webkit-column-count: @count;
+		-webkit-column-gap: @gap;
+		-moz-column-count: @count; 
+		-moz-column-gap: @gap;
+		column-count: @count; 
+		column-gap: @gap;
+	}
+
   // Buttons
   .button(@color: #f5f5f5, @text_color: #333, @text_shadow: 0 1px 1px rgba(255,255,255,.75), @font_size: 13px, @padding: 9px 15px 10px, @rounded: 6px) {
     display: inline-block;
@@ -125,3 +141,14 @@
       text-decoration: none;
     }
   }
+
+  // Add an alphatransparency value to any background or border color (via Elyse Holladay)
+  #translucent {
+    .background(@color: @white, @alpha: 1) {
+      background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+  	}
+  	.border(@color: @white, @alpha: 1) {
+  		border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha);
+  		background-clip: padding-box;
+		}
+  }
diff --git a/index.html b/index.html
@@ -33,7 +33,7 @@ <h2>What's Inside</h2>
       <p>Here's the rundown of what you can find in Bootstrap:</p>
       <h3>Mixins</h3>
       <ul>
-        <li><a href="#rounded">Rounded Corners</a></li>
+        <li><a href="#border-radius">Rounded Corners</a></li>
         <li><a href="#box-shadow">Box Shadows</a></li>
         <li><a href="#gradients">Gradients</a></li>
         <li><a href="#transitions">Transitions</a></li>
@@ -50,29 +50,14 @@ <h3>Variables</h3>
     <section>
       <h2>Mixins</h2>
       <p>Mixins are basically supercharged includes for CSS, allowing you to combine a set of rules into one. They're great for vendor prefixed properties like <code>-webkit-box-shadow</code>, gradients, and more.</p>
-      <h3 id="rounded">Rounding Corners</h3>
-      <p>Round all four corners of an element with <code>.rounded</code></p>
-<pre>.rounded(@radius: 6px) {
+      <h3 id="border-radius">Rounding Corners</h3>
+      <p>Round the corners of an element with <code>.border-radius</code>. You can pass in a single value for all corners like so:</p>
+<pre>.border-radius(@radius: 6px) {
   -moz-border-radius: @radius;
-  -webkit-border-radius: @radius;
   border-radius: @radius;
 }</pre>
-      <p>Or get fancy with your <code>border-radius</code> by giving each corner a unique size.</p>
-<pre>.border-radius(@topleft: 0, @topright: 0, @bottomright: 0, @bottomleft: 0) {
-	-moz-border-radius-topleft: @topleft;
-	-moz-border-radius-topright: @topright;
-	-moz-border-radius-bottomright: @bottomright;
-	-moz-border-radius-bottomleft: @bottomleft;
-  -webkit-border-top-left-radius: @topleft;
-  -webkit-border-top-right-radius: @topright;
-  -webkit-border-bottom-right-radius: @bottomright;
-  -webkit-border-bottom-left-radius: @bottomleft;
-  border-top-left-radius: @topleft;
-  border-top-right-radius: @topright;
-  border-bottom-right-radius: @bottomright;
-  border-bottom-left-radius: @bottomleft;
-}
-</pre>
+      <p>Or get fancy with it and selectively apply rounding to certain corners:</p>
+      <pre>.border-radius(3px,3px,0,0);</pre>
 
       <h3 id="box-shadow">Box (Drop) Shadows</h3>
       <p>Give any element some depth in all the best browsers with a single rule. Be sure to use RGBA colors in your box shadows so they blend as seamlessly as possible with backgrounds.</p>

diff --git a/style.less b/style.less
@@ -160,4 +160,11 @@ div.grid {
   div.span1 { .columns(1); }
   div.span2 { .columns(2); }
   div.span4 { .columns(4); }
-}
+}
+
+
+.test {
+  #translucent > .background(@black,.5);
+  padding: 10px;
+  margin-bottom: 20px;
+}