From 206334ba70c22dc91ec9381f9693ed6356358994 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
Date: Mon, 12 Sep 2011 20:07:26 -0700
Subject: [PATCH] remove theme.less and split preboot.less to mixins.less and
variables.less to isolate customization from function
---
bootstrap-1.3.0.css | 174 +++++++++++++-----------------
bootstrap-1.3.0.min.css | 11 +-
lib/bootstrap.less | 8 +-
lib/{preboot.less => mixins.less} | 91 +---------------
lib/patterns.less | 29 +++++
lib/scaffolding.less | 1 +
lib/theme.less | 59 ----------
lib/variables.less | 60 +++++++++++
8 files changed, 176 insertions(+), 257 deletions(-)
rename lib/{preboot.less => mixins.less} (77%)
delete mode 100644 lib/theme.less
create mode 100644 lib/variables.less
diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css
index 8e637e8b07..159c594b1e 100644
--- 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: Mon Sep 12 19:40:29 PDT 2011
+ * Date: Mon Sep 12 20:05:37 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).
@@ -167,108 +167,12 @@ textarea {
overflow: auto;
vertical-align: top;
}
-/* Preboot.less
- * Variables and mixins to pre-ignite any new web development project
- * ------------------------------------------------------------------ */
-.clearfix {
- zoom: 1;
-}
-.clearfix:before, .clearfix:after {
- display: table;
- content: "";
- zoom: 1;
- *display: inline;
-}
-.clearfix:after {
- clear: both;
-}
-.center-block {
- display: block;
- margin-left: auto;
- margin-right: auto;
-}
-.btn.danger,
-.alert-message.danger,
-.btn.danger:hover,
-.alert-message.danger:hover,
-.btn.error,
-.alert-message.error,
-.btn.error:hover,
-.alert-message.error:hover,
-.btn.success,
-.alert-message.success,
-.btn.success:hover,
-.alert-message.success:hover,
-.btn.info,
-.alert-message.info,
-.btn.info:hover,
-.alert-message.info:hover {
- color: #ffffff;
-}
-.btn.danger,
-.alert-message.danger,
-.btn.error,
-.alert-message.error {
- background-color: #c43c35;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
- background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
- background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
- background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
- background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
- background-image: linear-gradient(top, #ee5f5b, #c43c35);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
- border-color: #c43c35 #c43c35 #882a25;
- border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-}
-.btn.success, .alert-message.success {
- background-color: #57a957;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
- background-image: -moz-linear-gradient(top, #62c462, #57a957);
- background-image: -ms-linear-gradient(top, #62c462, #57a957);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
- background-image: -webkit-linear-gradient(top, #62c462, #57a957);
- background-image: -o-linear-gradient(top, #62c462, #57a957);
- background-image: linear-gradient(top, #62c462, #57a957);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
- border-color: #57a957 #57a957 #3d773d;
- border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-}
-.btn.info, .alert-message.info {
- background-color: #339bb9;
- background-repeat: repeat-x;
- background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
- background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
- background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
- background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
- background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
- background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
- background-image: linear-gradient(top, #5bc0de, #339bb9);
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
- text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
- border-color: #339bb9 #339bb9 #22697d;
- border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
-}
-/* Theme.less
- * Customizable set of settings and tweaks for Bootstrap development
+/* Variables.less
+ * Variables to customize the look and feel of Bootstrap
+ * ----------------------------------------------------- */
+/* Variables.less
+ * Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */
-/*
- 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.
-*/
/*
* Scaffolding
* Basic and global styles for generating a grid system, structural layout, and page templates
@@ -1772,6 +1676,72 @@ footer {
.page-header h1 {
margin-bottom: 8px;
}
+.btn.danger,
+.alert-message.danger,
+.btn.danger:hover,
+.alert-message.danger:hover,
+.btn.error,
+.alert-message.error,
+.btn.error:hover,
+.alert-message.error:hover,
+.btn.success,
+.alert-message.success,
+.btn.success:hover,
+.alert-message.success:hover,
+.btn.info,
+.alert-message.info,
+.btn.info:hover,
+.alert-message.info:hover {
+ color: #ffffff;
+}
+.btn.danger,
+.alert-message.danger,
+.btn.error,
+.alert-message.error {
+ background-color: #c43c35;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));
+ background-image: -moz-linear-gradient(top, #ee5f5b, #c43c35);
+ background-image: -ms-linear-gradient(top, #ee5f5b, #c43c35);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));
+ background-image: -webkit-linear-gradient(top, #ee5f5b, #c43c35);
+ background-image: -o-linear-gradient(top, #ee5f5b, #c43c35);
+ background-image: linear-gradient(top, #ee5f5b, #c43c35);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #c43c35 #c43c35 #882a25;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+.btn.success, .alert-message.success {
+ background-color: #57a957;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));
+ background-image: -moz-linear-gradient(top, #62c462, #57a957);
+ background-image: -ms-linear-gradient(top, #62c462, #57a957);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));
+ background-image: -webkit-linear-gradient(top, #62c462, #57a957);
+ background-image: -o-linear-gradient(top, #62c462, #57a957);
+ background-image: linear-gradient(top, #62c462, #57a957);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #57a957 #57a957 #3d773d;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+.btn.info, .alert-message.info {
+ background-color: #339bb9;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));
+ background-image: -moz-linear-gradient(top, #5bc0de, #339bb9);
+ background-image: -ms-linear-gradient(top, #5bc0de, #339bb9);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));
+ background-image: -webkit-linear-gradient(top, #5bc0de, #339bb9);
+ background-image: -o-linear-gradient(top, #5bc0de, #339bb9);
+ background-image: linear-gradient(top, #5bc0de, #339bb9);
+ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border-color: #339bb9 #339bb9 #22697d;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
.btn {
cursor: pointer;
display: inline-block;
diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css
index 18aa78b7c4..0f828e534e 100644
--- a/bootstrap-1.3.0.min.css
+++ b/bootstrap-1.3.0.min.css
@@ -19,13 +19,6 @@ button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:poin
input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
textarea{overflow:auto;vertical-align:top;}
-.clearfix{zoom:1;}.clearfix:before,.clearfix:after{display:table;content:"";zoom:1;*display:inline;}
-.clearfix:after{clear:both;}
-.center-block{display:block;margin-left:auto;margin-right:auto;}
-.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
-.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
-.btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
html,body{background-color:#fff;}
body{margin:0;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;font-weight:normal;line-height:18px;color:#404040;}
.container{width:940px;margin-left:auto;margin-right:auto;zoom:1;}.container:before,.container:after{display:table;content:"";zoom:1;*display:inline;}
@@ -262,6 +255,10 @@ a.menu:after,.dropdown-toggle:after{width:0;height:0;display:inline-block;conten
.hero-unit p{font-size:18px;font-weight:200;line-height:27px;}
footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;}
.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;}
+.btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;}
+.btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.success,.alert-message.success{background-color:#57a957;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
+.btn.info,.alert-message.info{background-color:#339bb9;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#5bc0de), to(#339bb9));background-image:-moz-linear-gradient(top, #5bc0de, #339bb9);background-image:-ms-linear-gradient(top, #5bc0de, #339bb9);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #5bc0de), color-stop(100%, #339bb9));background-image:-webkit-linear-gradient(top, #5bc0de, #339bb9);background-image:-o-linear-gradient(top, #5bc0de, #339bb9);background-image:linear-gradient(top, #5bc0de, #339bb9);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#339bb9', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#339bb9 #339bb9 #22697d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
.btn{cursor:pointer;display:inline-block;background-color:#e6e6e6;background-repeat:no-repeat;background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6));background-image:-webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6);background-image:-ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:-o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);background-image:linear-gradient(#ffffff, #ffffff 25%, #e6e6e6);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0);padding:5px 14px 6px;text-shadow:0 1px 1px rgba(255, 255, 255, 0.75);color:#333;font-size:13px;line-height:normal;border:1px solid #ccc;border-bottom-color:#bbb;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-moz-box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);box-shadow:inset 0 1px 0 rgba(255, 255, 255, 0.2),0 1px 2px rgba(0, 0, 0, 0.05);-webkit-transition:0.1s linear all;-moz-transition:0.1s linear all;-ms-transition:0.1s linear all;-o-transition:0.1s linear all;transition:0.1s linear all;}.btn:hover{background-position:0 -15px;color:#333;text-decoration:none;}
.btn:focus{outline:1px dotted #666;}
.btn.primary{color:#fff;background-color:#0064cd;background-repeat:repeat-x;background-image:-khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));background-image:-moz-linear-gradient(top, #049cdb, #0064cd);background-image:-ms-linear-gradient(top, #049cdb, #0064cd);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));background-image:-webkit-linear-gradient(top, #049cdb, #0064cd);background-image:-o-linear-gradient(top, #049cdb, #0064cd);background-image:linear-gradient(top, #049cdb, #0064cd);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#0064cd #0064cd #003f81;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);}
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index 364dafa5df..2f9ee80b8d 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
similarity index 77%
rename from lib/preboot.less
rename to lib/mixins.less
index 2e2c21a5d6..ca7893dafe 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 ee4a8a13d5..3e5e0114aa 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 2dc67c6532..f3cd103f2b 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 c61da444c1..0000000000
--- 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 0000000000..34000d0669
--- /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
--
GitLab