From dc2deb9a1b1995bbabee91bfd579d9b466fe78f2 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Thu, 26 Jan 2012 21:48:46 -0800 Subject: moving structure around + more work on builder... --- less/variables.less | 90 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 90 insertions(+) create mode 100644 less/variables.less (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less new file mode 100644 index 000000000..5ed896cc0 --- /dev/null +++ b/less/variables.less @@ -0,0 +1,90 @@ +// Variables.less +// Variables to customize the look and feel of Bootstrap +// ----------------------------------------------------- + + + +// GLOBAL VALUES +// -------------------------------------------------- + +// Links +@linkColor: #08c; +@linkColorHover: darken(@linkColor, 15%); + +// Grays +@black: #000; +@grayDarker: #222; +@grayDark: #333; +@gray: #555; +@grayLight: #999; +@grayLighter: #eee; +@white: #fff; + +// Accent colors +@blue: #049cdb; +@blueDark: #0064cd; +@green: #46a546; +@red: #9d261d; +@yellow: #ffc40d; +@orange: #f89406; +@pink: #c3325f; +@purple: #7a43b6; + +// Grid system +// Modify the grid styles in mixins.less +@gridColumns: 12; +@gridColumnWidth: 60px; +@gridGutterWidth: 20px; +@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +// Fluid width sidebar +@fluidSidebarWidth: 220px; + +// Typography +@baseFontSize: 13px; +@baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; +@baseLineHeight: 18px; + +// Buttons +@primaryButtonBackground: @linkColor; + + + +// COMPONENT VARIABLES +// -------------------------------------------------- + +// Z-index master list +// Used for a bird's eye view of components dependent on the z-axis +// Try to avoid customizing these :) +@zindexDropdown: 1000; +@zindexPopover: 1010; +@zindexTooltip: 1020; +@zindexFixedNavbar: 1030; +@zindexModalBackdrop: 1040; +@zindexModal: 1050; + +// Input placeholder text color +@placeholderText: @grayLight; + +// Navbar +@navbarHeight: 40px; +@navbarBackground: @grayDarker; +@navbarBackgroundHighlight: @grayDark; + +// Form states and alerts +@warningText: #c09853; +@warningBackground: #fcf8e3; +@warningBorder: #f3edd2; + +@errorText: #b94a48; +@errorBackground: #f2dede; +@errorBorder: #e9c7c7; + +@successText: #468847; +@successBackground: #dff0d8; +@successBorder: #cfe8c4; + +@infoText: #3a87ad; +@infoBackground: #d9edf7; +@infoBorder: #bfe1f2; + + -- cgit v1.2.3 From e8647c1b118d2c726a8987e9a41aad82da972b57 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 13:20:02 -0800 Subject: huuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuge update to doces and stuff --- less/variables.less | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less index 5ed896cc0..4265d7ed3 100644 --- a/less/variables.less +++ b/less/variables.less @@ -70,21 +70,25 @@ @navbarBackground: @grayDarker; @navbarBackgroundHighlight: @grayDark; +@navbarText: @grayLight; +@navbarLinkColor: @grayLight; +@navbarLinkColorHover: @white; + // Form states and alerts @warningText: #c09853; @warningBackground: #fcf8e3; -@warningBorder: #f3edd2; +@warningBorder: darken(spin(@warningBackground, -10), 3%); @errorText: #b94a48; @errorBackground: #f2dede; -@errorBorder: #e9c7c7; +@errorBorder: darken(spin(@errorBackground, -10), 3%); @successText: #468847; @successBackground: #dff0d8; -@successBorder: #cfe8c4; +@successBorder: darken(spin(@successBackground, -10), 5%); @infoText: #3a87ad; @infoBackground: #d9edf7; -@infoBorder: #bfe1f2; +@infoBorder: darken(spin(@infoBackground, -10), 7%); -- cgit v1.2.3 From 48529ad01fa2a60bfc9179743dcb5379e8ff944f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 13:06:57 -0800 Subject: last minute addition of a simple fluid grid for our fluid examples; it needs work, so we're not documenting it now --- less/variables.less | 9 --------- 1 file changed, 9 deletions(-) (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less index 4265d7ed3..c1e21978c 100644 --- a/less/variables.less +++ b/less/variables.less @@ -30,15 +30,6 @@ @pink: #c3325f; @purple: #7a43b6; -// Grid system -// Modify the grid styles in mixins.less -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -// Fluid width sidebar -@fluidSidebarWidth: 220px; - // Typography @baseFontSize: 13px; @baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; -- cgit v1.2.3 From fda77e69eb825f6b098a303fedcc96d257b4b050 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 16:58:51 -0800 Subject: move vars and mixins for default grid back to appropriate files --- less/variables.less | 11 +++++++++++ 1 file changed, 11 insertions(+) (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less index c1e21978c..f09a88cdb 100644 --- a/less/variables.less +++ b/less/variables.less @@ -40,6 +40,17 @@ +// GRID SYSTEM VARIABLES +// -------------------------------------------------- + +@gridColumns: 12; +@gridColumnWidth: 60px; +@gridGutterWidth: 20px; +@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); +@gridTotalWidth: @gridRowWidth; + + + // COMPONENT VARIABLES // -------------------------------------------------- -- cgit v1.2.3 From ae7f94eeff733584cbdc80a2d13a85f136a7744e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 00:39:44 -0800 Subject: overhaul grid mixins and variables, standardize fluid grid system and enable it across responsive layouts --- less/variables.less | 25 ++++++++++++++----------- 1 file changed, 14 insertions(+), 11 deletions(-) (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less index f09a88cdb..d9d79f05c 100644 --- a/less/variables.less +++ b/less/variables.less @@ -40,17 +40,6 @@ -// GRID SYSTEM VARIABLES -// -------------------------------------------------- - -@gridColumns: 12; -@gridColumnWidth: 60px; -@gridGutterWidth: 20px; -@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -@gridTotalWidth: @gridRowWidth; - - - // COMPONENT VARIABLES // -------------------------------------------------- @@ -94,3 +83,17 @@ @infoBorder: darken(spin(@infoBackground, -10), 7%); + +// GRID +// -------------------------------------------------- + +// Default 940px grid +@gridColumns: 12; +@gridColumnWidth: 60px; +@gridGutterWidth: 20px; +@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + +// Fluid grid +@fluidGridColumnWidth: 6.382978723%; +@fluidGridGutterWidth: 2.127659574%; + -- cgit v1.2.3 From e94e0f1cf94e8232933a05cfe61efdb49dd64249 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 09:41:31 -0800 Subject: implement @textColor for body text --- less/variables.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/variables.less') diff --git a/less/variables.less b/less/variables.less index d9d79f05c..f01c232e4 100644 --- a/less/variables.less +++ b/less/variables.less @@ -34,6 +34,7 @@ @baseFontSize: 13px; @baseFontFamily: "Helvetica Neue", Helvetica, Arial, sans-serif; @baseLineHeight: 18px; +@textColor: @grayDark; // Buttons @primaryButtonBackground: @linkColor; @@ -96,4 +97,3 @@ // Fluid grid @fluidGridColumnWidth: 6.382978723%; @fluidGridGutterWidth: 2.127659574%; - -- cgit v1.2.3