remove theme.less and split preboot.less to mixins.less and variables.less to isolate customization from function

6 files changed, 100 insertions, 148 deletions

diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index 364dafa5d..2f9ee80b8 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -12,9 +12,11 @@
 // CSS Reset
 @import "reset.less";
 
-// Core
-@import "preboot.less";
-@import "theme.less";
+// Core variables and mixins
+@import "variables.less"; // Modify this for custom colors, font-sizes, etc
+@import "mixins.less";
+
+// Grid system and page structure
 @import "scaffolding.less";
 
 // Styled patterns and elements
diff --git a/lib/preboot.less b/lib/mixins.less
index 2e2c21a5d..ca7893daf 100644
--- a/lib/preboot.less
+++ b/lib/mixins.less
@@ -1,63 +1,10 @@
-/* Preboot.less
- * Variables and mixins to pre-ignite any new web development project
- * ------------------------------------------------------------------ */
+/* Variables.less
+ * Snippets of reusable CSS to develop faster and keep code readable
+ * ----------------------------------------------------------------- */
 
 
-// VARIABLES
-// ---------
-
-// Links
-@linkColor:         #0069d6;
-@linkColorHover:    darken(@linkColor, 15);
-
-// Grays
-@black:             #000;
-@grayDark:          lighten(@black, 25%);
-@gray:              lighten(@black, 50%);
-@grayLight:         lighten(@black, 75%);
-@grayLighter:       lighten(@black, 90%);
-@white:             #fff;
-
-// Accent Colors
-@blue:              #049CDB;
-@blueDark:          #0064CD;
-@green:             #46a546;
-@red:               #9d261d;
-@yellow:            #ffc40d;
-@orange:            #f89406;
-@pink:              #c3325f;
-@purple:            #7a43b6;
-
-// Baseline grid
-@basefont:          13px;
-@baseline:          18px;
-
-// Griditude
-@gridColumns:       16;
-@gridColumnWidth:   40px;
-@gridGutterWidth:   20px;
-@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
-@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-
-// Color Scheme
-// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
-@baseColor:         @blue;                  // Set a base color
-@complement:        spin(@baseColor, 180);  // Determine a complementary color
-@split1:            spin(@baseColor, 158);  // Split complements
-@split2:            spin(@baseColor, -158);
-@triad1:            spin(@baseColor, 135);  // Triads colors
-@triad2:            spin(@baseColor, -135);
-@tetra1:            spin(@baseColor, 90);   // Tetra colors
-@tetra2:            spin(@baseColor, -90);
-@analog1:           spin(@baseColor, 22);   // Analogs colors
-@analog2:           spin(@baseColor, -22);
-
-
-// MIXINS
-// ------
-
 // Clearfix for clearing floats like a boss h5bp.com/q
-.clearfix {
+.clearfix() {
   zoom: 1;
 	&:before,
   &:after {
@@ -72,7 +19,7 @@
 }
 
 // Center-align a block level element
-.center-block {
+.center-block() {
 	display: block;
   margin-left: auto;
   margin-right: auto;
@@ -207,34 +154,6 @@
   border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%);
   border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
 }
-// Shared colors for buttons and alerts
-.btn,
-.alert-message {
-  // Set text color
-  &.danger,
-  &.danger:hover,
-  &.error,
-  &.error:hover,
-  &.success,
-  &.success:hover,
-  &.info,
-  &.info:hover {
-    color: @white
-  }
-  // Danger and error appear as red
-  &.danger,
-  &.error {
-    .gradientBar(#ee5f5b, #c43c35);
-  }
-  // Success appears as green
-  &.success {
-    .gradientBar(#62c462, #57a957);
-  }
-  // Info appears as a neutral blue
-  &.info {
-    .gradientBar(#5bc0de, #339bb9);
-  }
-}
 
 // Gradients
 #gradient {
diff --git a/lib/patterns.less b/lib/patterns.less
index ee4a8a13d..3e5e0114a 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -488,6 +488,35 @@ footer {
 // BUTTON STYLES
 // -------------
 
+// Shared colors for buttons and alerts
+.btn,
+.alert-message {
+  // Set text color
+  &.danger,
+  &.danger:hover,
+  &.error,
+  &.error:hover,
+  &.success,
+  &.success:hover,
+  &.info,
+  &.info:hover {
+    color: @white
+  }
+  // Danger and error appear as red
+  &.danger,
+  &.error {
+    .gradientBar(#ee5f5b, #c43c35);
+  }
+  // Success appears as green
+  &.success {
+    .gradientBar(#62c462, #57a957);
+  }
+  // Info appears as a neutral blue
+  &.info {
+    .gradientBar(#5bc0de, #339bb9);
+  }
+}
+
 // Base .btn styles
 .btn {
   // Button Base
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index 2dc67c653..f3cd103f2 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -75,6 +75,7 @@ a {
 
 // GRID SYSTEM
 // -----------
+// To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there
 
 .row {
   .clearfix();
diff --git a/lib/theme.less b/lib/theme.less
deleted file mode 100644
index c61da444c..000000000
--- a/lib/theme.less
+++ /dev/null
@@ -1,59 +0,0 @@
-/* Theme.less
- * Customizable set of settings and tweaks for Bootstrap development
- * ----------------------------------------------------------------- */
-
-
-/*
-  Why Theme.less?
-  ---------------
-  Theme is a layer that has been added to Bootstrap to simplify the customization process for developers and designers. The goal of Theme is to provide a single point of customization within Bootstrap so you don't have to modify the core files.
-
-  How to use it
-  -------------
-  We repeat the default variables' values here for easy replacement. Simply modify any of these values and recompile Bootstrap for a more customize look and feel.
-
-  Extending it
-  ------------
-  Feel free to create and add new variables and mixins here. The goal is to make this your playground and keep the core files intact.
-*/
-
-
-// Font face, size, weight, and more
-// ---------------------------------
-@baseFontSize:          13px; // base font-size
-@baseLineHeight:        18px; // base line-height of elements (incrementally increases with font-size)
-
-
-// Link color
-// ----------
-@linkColor:             #0069d6;
-// No need to specify a link hover color because we'll automatically do that for you in Preboot
-
-
-
-
-
-// COMING SOON...
-// --------------
-
-@baseFontFace:          "Helvetica";
-
-
-// Primary button color
-// -----------------------------
-@primaryButtonColor:    #333;
-
-
-// Grid system
-// ---------------------------------
-// Griditude
-@gridColumns:       16;
-@gridColumnWidth:   40px;
-@gridGutterWidth:   20px;
-
-
-//
-// TODO:
-//    - add ability to set app/site-wide base font-face (need better variables: @baseFontSize, @baseFontFace, @baseLineHeight, etc)
-//    - add new docs section for Theme.less
-//
\ No newline at end of file
diff --git a/lib/variables.less b/lib/variables.less
new file mode 100644
index 000000000..34000d066
--- /dev/null
+++ b/lib/variables.less
@@ -0,0 +1,60 @@
+/* Variables.less
+ * Variables to customize the look and feel of Bootstrap
+ * ----------------------------------------------------- */
+
+
+// Links
+@linkColor:         #0069d6;
+@linkColorHover:    darken(@linkColor, 15);
+
+// Grays
+@black:             #000;
+@grayDark:          lighten(@black, 25%);
+@gray:              lighten(@black, 50%);
+@grayLight:         lighten(@black, 75%);
+@grayLighter:       lighten(@black, 90%);
+@white:             #fff;
+
+// Accent Colors
+@blue:              #049CDB;
+@blueDark:          #0064CD;
+@green:             #46a546;
+@red:               #9d261d;
+@yellow:            #ffc40d;
+@orange:            #f89406;
+@pink:              #c3325f;
+@purple:            #7a43b6;
+
+// Baseline grid
+@basefont:          13px;
+@baseline:          18px;
+
+// Griditude
+// Modify the grid styles in mixins.less
+@gridColumns:       16;
+@gridColumnWidth:   40px;
+@gridGutterWidth:   20px;
+@extraSpace:        (@gridGutterWidth * 2); // For our grid calculations
+@siteWidth:         (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Color Scheme
+// Use this to roll your own color schemes if you like (unused by Bootstrap by default)
+@baseColor:         @blue;                  // Set a base color
+@complement:        spin(@baseColor, 180);  // Determine a complementary color
+@split1:            spin(@baseColor, 158);  // Split complements
+@split2:            spin(@baseColor, -158);
+@triad1:            spin(@baseColor, 135);  // Triads colors
+@triad2:            spin(@baseColor, -135);
+@tetra1:            spin(@baseColor, 90);   // Tetra colors
+@tetra2:            spin(@baseColor, -90);
+@analog1:           spin(@baseColor, 22);   // Analogs colors
+@analog2:           spin(@baseColor, -22);
+
+
+
+// More variables coming soon:
+// - @basefont to @baseFontSize
+// - @baseline to @baseLineHeight
+// - @baseFontFamily
+// - @primaryButtonColor
+// - anything else? File an issue on GitHub
\ No newline at end of file