-
Bootstrap is a super awesome pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development, that we used to build Baseline.
+
Preboot is a super awesome pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development, that we used to build Bootstrap.
What's included
-
Here are some of the highlights of what's included in Twitter Baseline as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.
+
Here are some of the highlights of what's included in Twitter Bootstrap as part of Bootstrap. Head over to the Bootstrap website or Github project page to download and learn more.
Color variables
Variables in LESS are perfect for maintaining and updating your CSS headache free. When you want to change a color value or a frequently used value, update it in one spot and you're set.
// Links
-@link-color: #0069d6;
-@link-hover-color: darken(@link-color, 10);
+@linkColor: #8b59c2;
+@linkColorHover: darken(@linkColor, 10);
// Grays
-@white: #fff;
-@gray-lighter: #ccc;
-@gray-light: #777;
-@gray: #555;
-@gray-dark: #333;
@black: #000;
+@grayDark: lighten(@black, 25%);
+@gray: lighten(@black, 50%);
+@grayLight: lighten(@black, 70%);
+@grayLighter: lighten(@black, 90%);
+@white: #fff;
// Accent Colors
@blue: #08b5fb;
-@blue-dark: #0069d6;
@green: #46a546;
@red: #9d261d;
@yellow: #ffc40d;
@@ -144,51 +132,69 @@
Mixins up the wazoo
-
Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They're great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap in Baseline.
+
Mixins are basically includes or partials for CSS, allowing you to combine a block of code into one. They're great for vendor prefixed properties like box-shadow, cross-browser gradients, font stacks, and more. Below is a sample of the mixins that are included with Bootstrap.
+
Font stacks
-// Font Stacks
-.font(@weight: normal, @size: 14px, @lineheight: 20px) {
- font-size: @size;
- font-weight: @weight;
- line-height: @lineheight;
-}
-.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineheight;
-}
-
-// Drop shadows
-.box-shadow(@shadow: 0 1px 3px rgba(0,0,0,.25)) {
- -webkit-box-shadow: @shadow;
- -moz-box-shadow: @shadow;
- box-shadow: @shadow;
-}
-
-// Gradients
-#gradient {
- .horizontal(@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-repeat: no-repeat;
- background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
- background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
- background-image: -moz-linear-gradient(right center, @startColor, @endColor);
- background-image: -o-linear-gradient(left, @startColor, @endColor);
- background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
- filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor));
- -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor);
+#font {
+ .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
}
- .vertical(@startColor: #555, @endColor: #333) {
+ .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ font-family: "Georgia", Times New Roman, Times, sans-serif;
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
+ font-family: "Monaco", Courier New, monospace;
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+}
+
+
Gradients
+
+#gradient {
+ .horizontal (@startColor: #555, @endColor: #333) {
background-color: @endColor;
- background-repeat: no-repeat;
- background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
- background-image: -webkit-linear-gradient(@startColor, @endColor);
- background-image: -moz-linear-gradient(@startColor, @endColor);
- background-image: -o-linear-gradient(top, @startColor, @endColor);
- background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
- filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor));
- -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor);
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); /* IE6 & IE7 */
+ -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */
+ background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+ }
+ .vertical (@startColor: #555, @endColor: #333) {
+ background-color: @endColor;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */
+ background-image: -moz-linear-gradient(@startColor, @endColor); /* FF 3.6+ */
+ background-image: -ms-linear-gradient(@startColor, @endColor); /* IE10 */
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */
+ background-image: -webkit-linear-gradient(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
+ background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); /* IE6 & IE7 */
+ -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
+ background-image: linear-gradient(@startColor, @endColor); /* the standard */
+ }
+ .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
+ ...
+ }
+ .vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 0.5, @endColor: #c3325f) {
+ ...
}
}
@@ -196,19 +202,29 @@
Operations and grid system
Get fancy and perform some match to generate flexible and powerful mixins like the one below.
-// Roll your own grid system
-@grid_columns: 16;
-@grid_column_width: 40px;
-@grid_gutter_width: 20px;
-.columns(@column_span: 1) {
+// Griditude
+@gridColumns: 16;
+@gridColumnWidth: 40px;
+@gridGutterWidth: 20px;
+
+// Grid System
+.container {
+ width: @siteWidth;
+ margin: 0 auto;
+ .clearfix();
+}
+.columns(@columnSpan: 1) {
display: inline;
float: left;
- width: (@grid_column_width * @column_span) + (@grid_gutter_width * (@column_span - 1));
- margin-left: @grid_gutter_width;
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+ margin-left: @gridGutterWidth;
&:first-child {
margin-left: 0;
}
}
+.offset(@columnOffset: 1) {
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
+}
@@ -224,7 +240,7 @@
Default grid
-
The default grid system provided as part of Baseline is a 940px wide 16-column grid. It's a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.
+
The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It's a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.
Example grid markup
@@ -1168,7 +1184,7 @@
diff --git a/lib/baseline.less b/lib/baseline.less
deleted file mode 100644
index cfcfe9ed99..0000000000
--- a/lib/baseline.less
+++ /dev/null
@@ -1,17 +0,0 @@
-/*
- Master Stylesheet
- This file is only for importing all required stylesheets for LESS to include and then compile.
-*/
-
-// CSS Reset
-@import "reset.less";
-
-// Core
-@import "bootstrap.less";
-@import "scaffolding.less";
-
-// Styled patterns and elements
-@import "type.less";
-@import "forms.less";
-@import "tables.less";
-@import "patterns.less";
\ No newline at end of file
diff --git a/lib/bootstrap.less b/lib/bootstrap.less
index bd9dbcf469..ddf5582d55 100644
--- a/lib/bootstrap.less
+++ b/lib/bootstrap.less
@@ -1,211 +1,17 @@
/*
- Bootstrap v1.1
- Variables and mixins to bootstrap any new web development project. Modified from original version for Twitter.
+ Master Stylesheet
+ This file is only for importing all required stylesheets for LESS to include and then compile.
*/
+// CSS Reset
+@import "reset.less";
-/* Variables
--------------------------------------------------- */
+// Core
+@import "preboot.less";
+@import "scaffolding.less";
-// Links
-@link-color: #0069d6;
-@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: #08b5fb;
-@blue-dark: #0069d6;
-@green: #46a546;
-@red: #9d261d;
-@yellow: #ffc40d;
-@orange: #f89406;
-@pink: #c3325f;
-@purple: #7a43b6;
-
-// Baseline grid
-@baseline: 20px;
-
-// Griditude
-@grid_columns: 16;
-@grid_column_width: 40px;
-@grid_gutter_width: 20px;
-@site_width: (@grid_columns * @grid_column_width) + (@grid_gutter_width * (@grid_columns - 1));
-
-
-/* Mixins
--------------------------------------------------- */
-
-// Clearfix for clearing floats like a boss
-.clearfix {
- zoom: 1;
- &:after {
- display: block;
- visibility: hidden;
- height: 0;
- clear: both;
- content: ".";
- }
-}
-
-// Floats
-.right {
- float: right;
-}
-.left {
- float: left;
-}
-
-// Input placeholder text
-.placeholder(@color: @gray-light) {
- :-moz-placeholder {
- color: @color;
- }
- ::-webkit-input-placeholder {
- color: @color;
- }
-}
-
-// Font Stacks
-.font(@weight: normal, @size: 14px, @lineheight: 20px) {
- font-size: @size;
- font-weight: @weight;
- line-height: @lineheight;
-}
-.sans-serif(@weight: normal, @size: 14px, @lineheight: 20px) {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineheight;
-}
-.serif(@weight: normal, @size: 14px, @lineheight: 20px) {
- font-family: "Georgia", Times New Roman, Times, sans-serif;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineheight;
-}
-.monospace(@weight: normal, @size: 12px, @lineheight: 20px) {
- font-family: "Monaco", Courier New, monospace;
- font-size: @size;
- font-weight: @weight;
- line-height: @lineheight;
-}
-
-// Grid System
-.container {
- width: @site_width;
- margin: 0 auto;
-}
-.columns(@column_span: 1) {
- display: inline;
- float: left;
- width: (@grid_column_width * @column_span) + (@grid_gutter_width * (@column_span - 1));
- margin-left: @grid_gutter_width;
- &:first-child {
- margin-left: 0;
- }
-}
-.offset(@column_offset: 1) {
- margin-left: (@grid_column_width * @column_offset) + (@grid_gutter_width * (@column_offset - 1)) !important;
-}
-
-// 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;
-}
-
-// 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: #f9f9f9, @padding: 4px 14px, @text_color: #555, @text_shadow: 0 1px 0 rgba(255,255,255,.75), @font_size: 13px, @border_color: rgba(0,0,0,.1), @rounded: 4px) {
- display: inline-block;
- #gradient > .vertical-three-colors(@color, @color, 0.25, darken(@color, 10%));
- padding: @padding;
- text-shadow: @text_shadow;
- color: @text_color;
- line-height: @baseline;
- border: 1px solid @border_color;
- border-bottom-color: fadein(@border_color, 15%);
- .border-radius(@rounded);
- @shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(0,0,0,.1);
- .box-shadow(@shadow);
- cursor: pointer;
- &:hover {
- background-position: 0 -15px;
- color: darken(@text_color, 10%);
- 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;
- }
-}
-
-// Gradients
-#gradient {
- .horizontal(@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-repeat: no-repeat;
- background-image: -webkit-gradient(linear, left top, right top, from(@startColor), to(@endColor));
- background-image: -webkit-linear-gradient(right center, @startColor, @endColor);
- background-image: -moz-linear-gradient(right center, @startColor, @endColor);
- background-image: -o-linear-gradient(left, @startColor, @endColor);
- background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor));
- filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=1)",@startColor,@endColor));
- -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=1))",@startColor,@endColor);
- }
- .vertical(@startColor: #555, @endColor: #333) {
- background-color: @endColor;
- background-repeat: no-repeat;
- background-image: -webkit-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
- background-image: -webkit-linear-gradient(@startColor, @endColor);
- background-image: -moz-linear-gradient(@startColor, @endColor);
- background-image: -o-linear-gradient(top, @startColor, @endColor);
- background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor));
- filter: e(%("progid:DXImageTransform.Microsoft.Gradient(StartColorStr='%d', EndColorStr='%d', GradientType=0)",@startColor,@endColor));
- -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorStr='%d', EndColorStr='%d', GradientType=0))",@startColor,@endColor);
- }
- .vertical-three-colors(@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: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
- background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
- }
-}
+// Styled patterns and elements
+@import "type.less";
+@import "forms.less";
+@import "tables.less";
+@import "patterns.less";
\ No newline at end of file
diff --git a/lib/forms.less b/lib/forms.less
index 59dae9241b..3718b2f733 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -18,7 +18,7 @@ form {
margin-left: 150px;
font-size: 20px;
line-height: 1;
- color: @gray-dark;
+ color: @grayDark;
}
}
// Parent element that clears floats and wraps labels and fields together
@@ -27,7 +27,7 @@ form {
}
// Set font for forms
label, input, select, textarea {
- .sans-serif(normal,13px,normal);
+ #font > .sans-serif(normal,13px,normal);
}
// Float labels left
label {
@@ -177,7 +177,7 @@ div.actions {
.help-block {
font-size: 12px;
line-height: @baseline;
- color: @gray-light;
+ color: @grayLight;
}
.help-inline {
padding-left: 5px;
@@ -196,7 +196,7 @@ div.actions {
margin-bottom: 0;
font-size: 12px;
line-height: @baseline;
- color: @gray-light;
+ color: @grayLight;
}
ol {
margin-bottom: 10px;
@@ -234,7 +234,7 @@ div.input-append {
width: auto;
min-width: 16px;
padding: 5px 4px 5px 5px;
- color: @gray-light;
+ color: @grayLight;
font-weight: normal;
line-height: 18px;
height: 18px;
diff --git a/lib/patterns.less b/lib/patterns.less
index ddad5271d4..e02fbd0b49 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -36,7 +36,7 @@ div.topbar {
a.logo {
margin-left: -10px;
margin-right: 10px;
- color: @gray-light;
+ color: @grayLight;
font-size: 20px;
font-weight: 200;
img {
@@ -77,7 +77,7 @@ div.topbar {
.box-shadow(@shadow);
// Links get text shadow
a {
- color: @gray-light;
+ color: @grayLight;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
.transition(all linear .1s);
}
@@ -113,9 +113,9 @@ div.topbar {
opacity: 1;
position: relative;
input {
- background-color: @gray-light;
+ background-color: @grayLight;
background-color: rgba(255,255,255,.3);
- .sans-serif(13px, normal, 1);
+ #font > .sans-serif(13px, normal, 1);
width: 220px;
padding: 4px 9px;
color: #fff;
@@ -127,10 +127,10 @@ div.topbar {
.transition(none);
// Placeholder text gets special styles; can't be bundled together though for some reason
&:-moz-placeholder {
- color: @gray-lighter;
+ color: @grayLighter;
}
&::-webkit-input-placeholder {
- color: @gray-lighter;
+ color: @grayLighter;
}
&:hover {
background-color: #444;
@@ -141,7 +141,7 @@ div.topbar {
&.focused {
outline: none;
background-color: #fff;
- color: @gray-dark;
+ color: @grayDark;
text-shadow: 0 1px 0 #fff;
border: 0;
padding: 5px 10px;
@@ -315,7 +315,7 @@ div.page-header {
// One-liner alert bars
div.alert-message {
#gradient > .vertical(transparent, rgba(0,0,0,0.15));
- background-color: @gray-lighter;
+ background-color: @grayLighter;
margin-bottom: @baseline;
padding: 10px 15px 9px;
.border-radius(6px);
@@ -457,14 +457,14 @@ ul.pills {
line-height: 30px;
.border-radius(15px);
&:hover {
- background: @link-hover-color;
+ background: @linkColorHover;
color: #fff;
text-decoration: none;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
}
&.active a {
- background: @link-color;
+ background: @linkColor;
color: #fff;
text-shadow: 0 1px 1px rgba(0,0,0,.25);
}
@@ -501,7 +501,7 @@ div.pagination {
&.disabled a,
&.disabled a:hover {
background-color: none;
- color: @gray-light;
+ color: @grayLight;
}
&.next a,
&:last-child a {
diff --git a/lib/preboot.less b/lib/preboot.less
new file mode 100644
index 0000000000..70ac9265cb
--- /dev/null
+++ b/lib/preboot.less
@@ -0,0 +1,255 @@
+/*
+ Preboot
+ Variables and mixins to pre-ignite any new web development project
+*/
+
+
+/* Variables
+-------------------------------------------------- */
+
+// Links
+@linkColor: #08b5fb;
+@linkColorHover: darken(@linkColor, 10);
+
+// Grays
+@black: #000;
+@grayDark: lighten(@black, 25%);
+@gray: lighten(@black, 50%);
+@grayLight: lighten(@black, 70%);
+@grayLighter: lighten(@black, 90%);
+@white: #fff;
+
+// Accent Colors
+@blue: #08b5fb;
+@green: #46a546;
+@red: #9d261d;
+@yellow: #ffc40d;
+@orange: #f89406;
+@pink: #c3325f;
+@purple: #7a43b6;
+
+// Baseline grid
+@baseline: 20px;
+
+// Griditude
+@gridColumns: 16;
+@gridColumnWidth: 40px;
+@gridGutterWidth: 20px;
+@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+
+/* Color Scheme
+-------------------------------------------------- */
+
+@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
+.clearfix {
+ zoom: 1;
+ &:after {
+ display: block;
+ visibility: hidden;
+ height: 0;
+ clear: both;
+ content: ".";
+ }
+}
+
+// Center-align a block level element
+.center-block {
+ display: block;
+ margin: 0 auto;
+}
+
+// Sizing shortcuts
+.size(@height: 5px, @width: 5px) {
+ height: @height;
+ width: @width;
+}
+.square(@size: 5px) {
+ .size(@size, @size);
+}
+
+// Input placeholder text
+.placeholder(@color: @grayLight) {
+ :-moz-placeholder {
+ color: @color;
+ }
+ ::-webkit-input-placeholder {
+ color: @color;
+ }
+}
+
+// Font Stacks
+#font {
+ .shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ .sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ .serif(@weight: normal, @size: 14px, @lineHeight: 20px) {
+ font-family: "Georgia", Times New Roman, Times, sans-serif;
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+ .monospace(@weight: normal, @size: 12px, @lineHeight: 20px) {
+ font-family: "Monaco", Courier New, monospace;
+ font-size: @size;
+ font-weight: @weight;
+ line-height: @lineHeight;
+ }
+}
+
+// Grid System
+.container {
+ width: @siteWidth;
+ margin: 0 auto;
+ .clearfix();
+}
+.columns(@columnSpan: 1) {
+ display: inline;
+ float: left;
+ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
+ margin-left: @gridGutterWidth;
+ &:first-child {
+ margin-left: 0;
+ }
+}
+.offset(@columnOffset: 1) {
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) !important;
+}
+
+// Border Radius
+.border-radius(@radius: 5px) {
+ -webkit-border-radius: @radius;
+ -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;
+}
+
+// CSS3 Content Columns
+.content-columns(@columnCount, @columnGap: 20px) {
+ -webkit-column-count: @columnCount;
+ -webkit-column-gap: @columnGap;
+ -moz-column-count: @columnCount;
+ -moz-column-gap: @columnGap;
+ column-count: @columnCount;
+ column-gap: @columnGap;
+}
+
+// Buttons
+.button(@color: #f5f5f5, @textColor: #333, @textShadow: 0 1px 1px rgba(255,255,255,.75), @fontSize: 13px, @padding: 9px 15px 10px, @borderRadius: 6px) {
+ display: inline-block;
+ #gradient > .vertical(@color,darken(saturate(@color,10),10));
+ padding: @padding;
+ text-shadow: @textShadow;
+ color: @textColor;
+ font-size: @fontSize;
+ line-height: 20px;
+ .border-radius(@borderRadius);
+ @shadow: inset 0 1px 0 rgba(255,255,255,.2), inset 0 -1px 0 rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.25);
+ .box-shadow(@shadow);
+ &:hover {
+ background-position: 0 -15px;
+ color: @textColor;
+ 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;
+ }
+}
+
+// Gradients
+#gradient {
+ .horizontal (@startColor: #555, @endColor: #333) {
+ background-color: @endColor;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror
+ background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+
+ background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10
+ background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+
+ background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+
+ background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); /* IE6 & IE7 */
+ -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor); /* IE8+ */
+ background-image: linear-gradient(left, @startColor, @endColor); // Le standard
+ }
+ .vertical (@startColor: #555, @endColor: #333) {
+ background-color: @endColor;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); /* Konqueror */
+ background-image: -moz-linear-gradient(@startColor, @endColor); /* FF 3.6+ */
+ background-image: -ms-linear-gradient(@startColor, @endColor); /* IE10 */
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); /* Safari 4+, Chrome 2+ */
+ background-image: -webkit-linear-gradient(@startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
+ background-image: -o-linear-gradient(@startColor, @endColor); /* Opera 11.10 */
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); /* IE6 & IE7 */
+ -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor); /* IE8+ */
+ background-image: linear-gradient(@startColor, @endColor); /* the standard */
+ }
+ .directional (@startColor: #555, @endColor: #333, @deg: 45deg) {
+ background-color: @endColor;
+ background-repeat: repeat-x;
+ background-image: -moz-linear-gradient(@deg, @startColor, @endColor); /* FF 3.6+ */
+ background-image: -ms-linear-gradient(@deg, @startColor, @endColor); /* IE10 */
+ background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); /* Safari 5.1+, Chrome 10+ */
+ background-image: -o-linear-gradient(@deg, @startColor, @endColor); /* Opera 11.10 */
+ background-image: linear-gradient(@deg, @startColor, @endColor); /* the standard */
+ }
+ .vertical-three-colors(@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: -webkit-linear-gradient(@startColor, color-stop(@colorStop, @midColor), @endColor);
+ background-image: -moz-linear-gradient(@startColor, color-stop(@midColor, @colorStop), @endColor);
+ }
+}
+
+// Opacity
+.opacity(@opacity: 100) {
+ filter: e(%("alpha(opacity=%d)", @opacity));
+ -khtml-opacity: @opacity / 100;
+ -moz-opacity: @opacity / 100;
+ opacity: @opacity / 100;
+}
\ No newline at end of file
diff --git a/lib/scaffolding.less b/lib/scaffolding.less
index fc920ab3a4..eb787fe59a 100644
--- a/lib/scaffolding.less
+++ b/lib/scaffolding.less
@@ -35,10 +35,9 @@ html, body {
}
body {
margin: 0;
- .sans-serif(normal,14px,20px);
+ #font > .sans-serif(normal,14px,20px);
color: @gray;
text-rendering: optimizeLegibility;
- .box-shadow(inset 0 1px 0 #fff);
}
// Container (centered, fixed-width layouts)
@@ -68,11 +67,11 @@ div.container-fluid {
// Links
a {
- color: @link-color;
+ color: @linkColor;
text-decoration: none;
line-height: inherit;
&:hover {
- color: @link-hover-color;
+ color: @linkColorHover;
text-decoration: underline;
}
}
@@ -81,7 +80,7 @@ a {
.btn {
.button();
&.primary {
- #gradient > .vertical(@blue, @blue-dark);
+ #gradient > .vertical(@blue, darken(@blue, 15));
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
&:hover {
diff --git a/lib/tables.less b/lib/tables.less
index 4f9098ce5f..d0b68db9cb 100644
--- a/lib/tables.less
+++ b/lib/tables.less
@@ -13,7 +13,6 @@ table {
text-align: left;
border-collapse: separate;
th, td {
- // #translucent > .background(@green, .15);
padding: 10px 10px 9px;
line-height: @baseline;
vertical-align: middle;
@@ -51,8 +50,8 @@ table.zebra-striped {
background-position: right -23px;
background-repeat: no-repeat;
background-color: rgba(141,192,219,.25);
- .border-radius(3px 3px 0 0);
text-shadow: 0 1px 1px rgba(255,255,255,.75);
+ .border-radius(3px 3px 0 0);
}
th.header:hover { // Style the ascending (reverse alphabetical) column header
background-image: url(assets/img/tablesorter-indicators.png);
diff --git a/lib/type.less b/lib/type.less
index cc1f0826a1..9be433adeb 100644
--- a/lib/type.less
+++ b/lib/type.less
@@ -8,11 +8,11 @@
-------------------------------------------------- */
p {
- .font(normal,14px,@baseline);
+ #font > .shorthand(normal,14px,@baseline);
margin-bottom: @baseline;
small {
font-size: 12px;
- color: @gray-light;
+ color: @grayLight;
}
}
@@ -22,9 +22,9 @@ p {
h1, h2, h3, h4, h5, h6 {
font-weight: 500;
- color: @gray-dark;
+ color: @grayDark;
small {
- color: @gray-light;
+ color: @grayLight;
}
}
h1 {
@@ -62,7 +62,7 @@ h5 {
}
h6 {
font-size: 13px;
- color: @gray-light;
+ color: @grayLight;
text-transform: uppercase;
}
@@ -167,7 +167,7 @@ em {
line-height: inherit;
}
.muted {
- color: @gray-lighter;
+ color: @grayLighter;
}
// Blockquotes
@@ -176,13 +176,13 @@ blockquote {
border-left: 5px solid #eee;
padding-left: 15px;
p {
- .font(300,14px,@baseline);
+ #font > .shorthand(300,14px,@baseline);
margin-bottom: 0;
}
cite {
display: block;
- .font(300,12px,@baseline);
- color: @gray-light;
+ #font > .shorthand(300,12px,@baseline);
+ color: @grayLight;
&:before {
content: '\2014 \00A0';
}
@@ -236,7 +236,7 @@ pre ol {
border-left-color: lighten(@orange, 35%);
font-size: 11px;
line-height: @baseline;
- color: @gray-light;
+ color: @grayLight;
text-shadow: 0 1px 1px rgba(255,255,255,.5);
word-wrap: break-word;
&:hover {
baseline
+