From 3f64aaf82b6b3486c1b2e98e19047089fdfc331b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Sep 2011 19:00:44 -0700 Subject: [PATCH 1/3] fix topbar link with button bug --- bootstrap-1.3.0.css | 5 +++-- bootstrap-1.3.0.min.css | 4 ++-- docs/index.html | 7 +++++-- lib/patterns.less | 10 +++++++--- 4 files changed, 17 insertions(+), 9 deletions(-) diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css index 4a4e0dfaab..1a924b7b33 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 13:32:28 PDT 2011 + * Date: Mon Sep 12 19:00:16 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). @@ -1298,7 +1298,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { color: #bfbfbf; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); } -.topbar a:hover, .topbar ul .active > a { +.topbar h3 a:hover, .topbar .brand a:hover, .topbar ul .active > a { background-color: #333; background-color: rgba(255, 255, 255, 0.05); color: #ffffff; @@ -1323,6 +1323,7 @@ table .headerSortUp.purple, table .headerSortDown.purple { } .topbar p a:hover { background-color: transparent; + color: #ffffff; } .topbar form { float: left; diff --git a/bootstrap-1.3.0.min.css b/bootstrap-1.3.0.min.css index 43d1c5684d..18aa78b7c4 100644 --- a/bootstrap-1.3.0.min.css +++ b/bootstrap-1.3.0.min.css @@ -214,10 +214,10 @@ table .headerSortUp.orange,table .headerSortDown.orange{background-color:#fee9cc table .purple{color:#7a43b6;border-bottom-color:#7a43b6;} table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0;} .topbar{height:40px;position:fixed;top:0;left:0;right:0;z-index:10000;overflow:visible;}.topbar a{color:#bfbfbf;text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);} -.topbar a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;} +.topbar h3 a:hover,.topbar .brand a:hover,.topbar ul .active>a{background-color:#333;background-color:rgba(255, 255, 255, 0.05);color:#ffffff;text-decoration:none;} .topbar h3{position:relative;} .topbar h3 a,.topbar .brand{float:left;display:block;padding:8px 20px 12px;margin-left:-20px;color:#ffffff;font-size:20px;font-weight:200;line-height:1;} -.topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;} +.topbar p{margin:0;line-height:40px;}.topbar p a:hover{background-color:transparent;color:#ffffff;} .topbar form{float:left;margin:5px 0 0 0;position:relative;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} .topbar form.pull-right{float:right;} .topbar input{background-color:#444;background-color:rgba(255, 255, 255, 0.3);font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:normal;font-weight:13px;line-height:1;padding:4px 9px;color:#fff;color:rgba(255, 255, 255, 0.75);border:1px solid #111;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-moz-box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);box-shadow:inset 0 1px 2px rgba(0, 0, 0, 0.1),0 1px 0px rgba(255, 255, 255, 0.25);-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none;}.topbar input:-moz-placeholder{color:#e6e6e6;} diff --git a/docs/index.html b/docs/index.html index 08ce0033f3..c8d5d81ef2 100644 --- a/docs/index.html +++ b/docs/index.html @@ -118,9 +118,12 @@

History

-

In the earlier days of Twitter, engineers used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented and development quickly accelerated during Twitter’s first Hackweek.

-

With the help and feedback of many engineers at Twitter, Bootstrap has grown significantly to encompass not only basic styles, but more elegant and durable front-end design patterns.

+

Engineers at Twitter have historically used almost any library they were familiar with to meet front-end requirements. Bootstrap began as an answer to the challenges that presented. With the help of many awesome folks, Bootstrap has grown significantly.

Read more on dev.twitter.com ›

+

+ + +

Browser support

diff --git a/lib/patterns.less b/lib/patterns.less index 82b7790b72..ee4a8a13d5 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -23,7 +23,9 @@ } // Hover and active states - a:hover, + // h3 for backwards compatibility + h3 a:hover, + .brand a:hover, ul .active > a { background-color: #333; background-color: rgba(255,255,255,.05); @@ -54,6 +56,7 @@ line-height: 40px; a:hover { background-color: transparent; + color: @white; } } @@ -729,14 +732,15 @@ input[type=submit].btn { // ------ .modal-backdrop { - background-color:#000; - &.fade { opacity: 0; } + background-color: #000; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 10000; + // Fade for backdrop + &.fade { opacity: 0; } } .modal-backdrop, .modal-backdrop.fade.in { From 2978934bd529e9cd5b1182d1df98b9942066beda Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Sep 2011 19:40:48 -0700 Subject: [PATCH 2/3] remove adaptive, recomment theme.less to avoid comments in compiled --- bootstrap-1.3.0.css | 6 +---- lib/adaptive.less | 57 --------------------------------------------- lib/theme.less | 13 ++++------- 3 files changed, 6 insertions(+), 70 deletions(-) delete mode 100644 lib/adaptive.less diff --git a/bootstrap-1.3.0.css b/bootstrap-1.3.0.css index d416026ac8..8e637e8b07 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:00:52 PDT 2011 + * Date: Mon Sep 12 19:40:29 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). @@ -270,10 +270,6 @@ textarea { 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. */ /* -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 -*//* * Scaffolding * Basic and global styles for generating a grid system, structural layout, and page templates * ------------------------------------------------------------------------------------------- */ diff --git a/lib/adaptive.less b/lib/adaptive.less deleted file mode 100644 index ef3054d3e8..0000000000 --- a/lib/adaptive.less +++ /dev/null @@ -1,57 +0,0 @@ -/* Responsive.less - * Adjusted grid styles to handle some common screen sizes - * ------------------------------------------------------- */ - - -// MOBILE PORTRAIT & LANDSCAPE -// --------------------------- -// For devices narrower than 480px -@media only screen and (max-width: 480px) { - - // Remove fixed width of containers - .container { - width: auto; - padding: 0 10px; - } - - // Undo the floating of columns - .row { - margin-left: 0; - } - .row [class^="span"] { - float: none; - width: 100%; - display: block; - margin-left: 0; - } - - // Stack form elements instead of floating them - fieldset legend { - margin-left: 0; - } - label { - float: none; - width: auto; - text-align: left; - } - div.input { - margin-left: 0; - width: 100%; - } - .input-xxlarge, - input.xxlarge, - textarea.xxlarge, - select.xxlarge { - width: 80%; - } - - // Adjust modal - .modal-backdrop { - padding: 10px; - } - .modal { - width: 100%; - margin: 0; - left: auto; - } -} \ No newline at end of file diff --git a/lib/theme.less b/lib/theme.less index b56111c067..c61da444c1 100644 --- a/lib/theme.less +++ b/lib/theme.less @@ -33,9 +33,6 @@ - - - // COMING SOON... // -------------- @@ -55,8 +52,8 @@ @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 +// +// 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 From 206334ba70c22dc91ec9381f9693ed6356358994 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 12 Sep 2011 20:07:26 -0700 Subject: [PATCH 3/3] 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