revamp the mixins file to organize things a bit more, make placeholder text use a new variable instead of relying solely on @grayLight

3 files changed, 73 insertions, 30 deletions

diff --git a/lib/mixins.less b/lib/mixins.less
index 67e0c27de..bcc67954a 100644
--- a/lib/mixins.less
+++ b/lib/mixins.less
@@ -3,7 +3,12 @@
 // -----------------------------------------------------------------
 
 
-// Clearfix for clearing floats like a boss h5bp.com/q
+// UTILITY MIXINS
+// --------------------------------------------------
+
+// Clearfix
+// -------------------------
+// For clearing floats like a boss h5bp.com/q
 .clearfix() {
   zoom: 1;
   &:before,
@@ -19,6 +24,7 @@
 }
 
 // Center-align a block level element
+// -------------------------
 .center-block() {
   display: block;
   margin-left: auto;
@@ -26,12 +32,14 @@
 }
 
 // IE7 inline-block
+// -------------------------
 .ie7-inline-block() {
   *display: inline; /* IE7 inline-block hack */
   *zoom: 1;
 }
 
 // Sizing shortcuts
+// -------------------------
 .size(@height: 5px, @width: 5px) {
   width: @width;
   height: @height;
@@ -40,8 +48,9 @@
   .size(@size, @size);
 }
 
-// Input placeholder text
-.placeholder(@color: @grayLight) {
+// Placeholder text
+// -------------------------
+.placeholder(@color: @placeHolderText) {
   :-moz-placeholder {
     color: @color;
   }
@@ -50,7 +59,11 @@
   }
 }
 
-// Font Stacks
+
+
+// FONTS
+// --------------------------------------------------
+
 #font {
   #family {
     .serif() {
@@ -82,20 +95,28 @@
   }
 }
 
-// Grid System
+
+
+// GRID SYSTEM
+// --------------------------------------------------
+
+// Site container
+// -------------------------
 .fixed-container() {
   width: @siteWidth;
   margin-left: auto;
   margin-right: auto;
   .clearfix();
 }
+
+// Columns and offseting
+// -------------------------
 .columns(@columns: 1) {
   width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
 }
 .offset(@columns: 1) {
   margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
 }
-
 // Necessary grid styles for every column to make them appear next to each other horizontally
 .gridColumn() {
   float: left;
@@ -107,6 +128,11 @@
   .columns(@columnSpan);
 }
 
+
+
+// CSS3 PROPERTIES
+// --------------------------------------------------
+
 // Border Radius
 .border-radius(@radius: 5px) {
   -webkit-border-radius: @radius;
@@ -170,15 +196,6 @@
           transform: translate(@x, @y);
 }
 
-// User select
-// For selecting text on the page
-.user-select(@select) {
-  -webkit-user-select: @select;
-     -moz-user-select: @select;
-       -o-user-select: @select;
-          user-select: @select;
-}
-
 // Background clipping
 // Heads up: FF 3.6 and under need padding instead of padding-box
 .background-clip(@clip) {
@@ -187,6 +204,15 @@
           background-clip: @clip;
 }
 
+// Background sizing
+.background-size(@size){
+  -webkit-background-size: @size;
+     -moz-background-size: @size;
+       -o-background-size: @size;
+          background-size: @size;
+}
+
+
 // Box sizing
 .box-sizing(@boxmodel) {
   -webkit-box-sizing: @boxmodel;
@@ -194,6 +220,15 @@
           box-sizing: @boxmodel;
 }
 
+// User select
+// For selecting text on the page
+.user-select(@select) {
+  -webkit-user-select: @select;
+     -moz-user-select: @select;
+       -o-user-select: @select;
+          user-select: @select;
+}
+
 // Resize anything
 .resizable(@direction: both) {
   resize: @direction; // Options: horizontal, vertical, both
@@ -210,6 +245,18 @@
           column-gap: @columnGap;
 }
 
+// Opacity
+.opacity(@opacity: 100) {
+  filter: e(%("alpha(opacity=%d)", @opacity));
+    -moz-opacity: @opacity / 100;
+         opacity: @opacity / 100;
+}
+
+
+
+// BACKGROUNDS
+// --------------------------------------------------
+
 // Add an alphatransparency value to any background or border color (via Elyse Holladay)
 #translucent {
   .background(@color: @white, @alpha: 1) {
@@ -301,14 +348,13 @@
   filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)"));
 }
 
-// Opacity
-.opacity(@opacity: 100) {
-  filter: e(%("alpha(opacity=%d)", @opacity));
-    -moz-opacity: @opacity / 100;
-         opacity: @opacity / 100;
-}
 
-// Popover arrows
+
+// COMPONENT MIXINS
+// --------------------------------------------------
+
+// POPOVER ARROWS
+// -------------------------
 // For tipsies and popovers
 #popoverArrow {
   .top(@arrowWidth: 5px) {
@@ -344,10 +390,3 @@
     border-right: @arrowWidth solid @black;
   }
 }
-
-.background-size(@width, @height){
-  -webkit-background-size: @width @height;
-     -moz-background-size: @width @height;
-       -o-background-size: @width @height;
-          background-size: @width @height;
-}
diff --git a/lib/progress-bars.less b/lib/progress-bars.less
index fd9d3f427..e8557a99e 100644
--- a/lib/progress-bars.less
+++ b/lib/progress-bars.less
@@ -55,7 +55,7 @@
 // Striped bars
 .progress.striped .bar {
   #gradient > .striped(#62c462);
-  .background-size(40px, 40px);
+  .background-size(40px 40px);
 }
 
 // Call animation for the active one
diff --git a/lib/variables.less b/lib/variables.less
index 3f32c36f4..3709d598d 100644
--- a/lib/variables.less
+++ b/lib/variables.less
@@ -68,3 +68,7 @@
 
 // Visuals
 @primaryButtonColor:    @blue;
+
+
+
+@placeHolderText:       @grayLight;