From f61fe3c4746ec09ff64756797fe6314be5f53b30 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2011 21:13:26 -0700 Subject: refactor fluid layout to be more specific to not interfere with modal content while adding right sidebar option --- lib/patterns.less | 85 ++++++++++++++++++++++++++-------------------------- lib/scaffolding.less | 26 ++++++++++------ 2 files changed, 59 insertions(+), 52 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 1b27b7184..8ceffaa99 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -54,54 +54,53 @@ } // Search Form - form { - float: left; - margin: 5px 0 0 0; + .form-search { position: relative; - .opacity(100); + margin-top: 5px; + margin-bottom: 0; + input { + background-color: #444; + background-color: rgba(255,255,255,.3); + #font > .sans-serif(13px, normal, 1); + padding: 4px 9px; + color: @white; + color: rgba(255,255,255,.75); + border: 1px solid #111; + .border-radius(4px); + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + .box-shadow(@shadow); + .transition(none); + + // Placeholder text gets special styles; can't be bundled together though for some reason + &:-moz-placeholder { + color: @grayLighter; + } + &::-webkit-input-placeholder { + color: @grayLighter; + } + // Hover states + &:hover { + background-color: @grayLight; + background-color: rgba(255,255,255,.5); + color: @white; + } + // Focus states (we use .focused since IE8 and down doesn't support :focus) + &:focus, + &.focused { + outline: 0; + background-color: @white; + color: @grayDark; + text-shadow: 0 1px 0 @white; + border: 0; + padding: 5px 10px; + .box-shadow(0 0 3px rgba(0,0,0,.15)); + } + } } // Todo: remove from v2.0 when ready, added for legacy - form.pull-right { + .pull-right { float: right; } - input { - background-color: #444; - background-color: rgba(255,255,255,.3); - #font > .sans-serif(13px, normal, 1); - padding: 4px 9px; - color: @white; - color: rgba(255,255,255,.75); - border: 1px solid #111; - .border-radius(4px); - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); - .box-shadow(@shadow); - .transition(none); - - // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } - // Hover states - &:hover { - background-color: @grayLight; - background-color: rgba(255,255,255,.5); - color: @white; - } - // Focus states (we use .focused since IE8 and down doesn't support :focus) - &:focus, - &.focused { - outline: 0; - background-color: @white; - color: @grayDark; - text-shadow: 0 1px 0 @white; - border: 0; - padding: 5px 10px; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - } - } } // gradient is applied to it's own element because overflow visible is not honored by ie when filter is present diff --git a/lib/scaffolding.less b/lib/scaffolding.less index b6852535c..00a8ee3b3 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -24,20 +24,28 @@ body { } // Fluid layouts (left aligned, with sidebar, min- & max-width content) -.container-fluid { +.fluid-container { position: relative; min-width: 940px; padding-left: 20px; padding-right: 20px; .clearfix(); - > .sidebar { - float: left; - width: 220px; - } - // TODO in v2: rename this and .popover .content to be more specific - > .content { - margin-left: 240px; - } +} +// Sidebars (left and right options) +.fluid-sidebar-left, +.fluid-sidebar-right { + width: 220px; +} +.fluid-sidebar-left { float: left; } +.fluid-sidebar-right { float: right; } +// The main content area +.fluid-content { + margin-left: 240px; +} +// Reverse layout for sidebar on right +.fluid-container.reverse .fluid-content { + margin-left: 0; + margin-right: 240px; } -- cgit v1.2.3 From dd1efdf0d5ec2469978a65c845cc5dfd16b74899 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 9 Oct 2011 21:25:28 -0700 Subject: update input prepend and append to use baseline variable --- lib/forms.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 4bdddc3a2..4b2bb8016 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -323,11 +323,11 @@ textarea[readonly] { display: block; width: auto; min-width: 16px; - height: 18px; + height: @baseLineHeight; padding: 4px 4px 4px 5px; margin-right: -1px; font-weight: normal; - line-height: 18px; + line-height: @baseLineHeight; color: @grayLight; text-align: center; text-shadow: 0 1px 0 @white; -- cgit v1.2.3 From 8ba005d38dd7a79ea3e90efb6efc7ac9ebcadc26 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 11 Oct 2011 09:44:51 -0700 Subject: new navbar introduced to replace topbar --- lib/patterns.less | 154 ++++++++++++++++++++++++++++++------------------------ 1 file changed, 86 insertions(+), 68 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index 8ceffaa99..a82e2856d 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -3,34 +3,41 @@ * ---------------------------------------------------------------------------- */ -// TOPBAR -// ------ +// NAVBAR (FIXED AND STATIC) +// ------------------------- -// Topbar for Branding and Nav -.topbar { - height: 40px; - position: fixed; - top: 0; - left: 0; - right: 0; - z-index: 10000; - overflow: visible; +// Navbar variables +@navBarHeight: 40px; +@navBarBgStart: #333; +@navBarBgEnd: #222; - // Links get text shadow +// Common styles +.navbar { + height: @navBarHeight; + overflow: visible; +} +// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present +.navbar-inner { + background-color: @navBarBgEnd; + #gradient > .vertical(@navBarBgStart, @navBarBgEnd); + @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); + .box-shadow(@shadow); +} +// Text and links +.navbar { + // Links get text-shadow a { color: @grayLight; text-shadow: 0 -1px 0 rgba(0,0,0,.25); } - // Hover and active states .brand a:hover, ul .active > a { - background-color: #333; + background-color: @navBarBgStart; background-color: rgba(255,255,255,.05); color: @white; text-decoration: none; } - // Website or project name .brand { float: left; @@ -42,7 +49,6 @@ font-weight: 200; line-height: 1; } - // Plain text in topbar p { margin: 0; @@ -52,70 +58,82 @@ color: @white; } } +} - // Search Form - .form-search { - position: relative; - margin-top: 5px; - margin-bottom: 0; - input { - background-color: #444; - background-color: rgba(255,255,255,.3); - #font > .sans-serif(13px, normal, 1); - padding: 4px 9px; - color: @white; - color: rgba(255,255,255,.75); - border: 1px solid #111; - .border-radius(4px); - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); - .box-shadow(@shadow); - .transition(none); +// Navbar search +.navbar-search { + position: relative; + margin-top: 5px; + margin-bottom: 0; + float: left; + input { + background-color: #444; + background-color: rgba(255,255,255,.3); + #font > .sans-serif(13px, normal, 1); + padding: 4px 9px; + color: @white; + color: rgba(255,255,255,.75); + border: 1px solid #111; + .border-radius(4px); + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + .box-shadow(@shadow); + .transition(none); - // Placeholder text gets special styles; can't be bundled together though for some reason - &:-moz-placeholder { - color: @grayLighter; - } - &::-webkit-input-placeholder { - color: @grayLighter; - } - // Hover states - &:hover { - background-color: @grayLight; - background-color: rgba(255,255,255,.5); - color: @white; - } - // Focus states (we use .focused since IE8 and down doesn't support :focus) - &:focus, - &.focused { - outline: 0; - background-color: @white; - color: @grayDark; - text-shadow: 0 1px 0 @white; - border: 0; - padding: 5px 10px; - .box-shadow(0 0 3px rgba(0,0,0,.15)); - } + // Placeholder text gets special styles; can't be bundled together though for some reason + &:-moz-placeholder { + color: @grayLighter; + } + &::-webkit-input-placeholder { + color: @grayLighter; + } + // Hover states + &:hover { + background-color: @grayLight; + background-color: rgba(255,255,255,.5); + color: @white; + } + // Focus states (we use .focused since IE8 and down doesn't support :focus) + &:focus, + &.focused { + outline: 0; + background-color: @white; + color: @grayDark; + text-shadow: 0 1px 0 @white; + border: 0; + padding: 5px 10px; + .box-shadow(0 0 3px rgba(0,0,0,.15)); } - } - // Todo: remove from v2.0 when ready, added for legacy - .pull-right { - float: right; } } -// gradient is applied to it's own element because overflow visible is not honored by ie when filter is present -.topbar-inner { - background-color: #222; - #gradient > .vertical(#333, #222); - @shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 -1px 0 rgba(0,0,0,.1); - .box-shadow(@shadow); + +// Static navbar +.navbar-static { + margin-bottom: @baseLineHeight; +} +.navbar-static .navbar-inner { + margin-left: -20px; + margin-right: -20px; + padding-left: 20px; + padding-right: 20px; + .border-radius(4px); +} + +// Fixed navbar +.navbar-fixed { + position: fixed; + top: 0; + left: 0; + right: 0; + z-index: 10000; } + // NAVIGATION // ---------- -// Topbar Nav +// Nav for navbar and topbar // ul.nav for all topbar based navigation to avoid inheritance issues and over-specificity .nav { display: block; -- cgit v1.2.3 From b6443905411dcdcec54d7eaad2f998a582271728 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 11 Oct 2011 09:52:50 -0700 Subject: update navbar search form --- lib/patterns.less | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index a82e2856d..f2a0b7f0e 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -63,10 +63,10 @@ // Navbar search .navbar-search { position: relative; - margin-top: 5px; + margin-top: 6px; margin-bottom: 0; float: left; - input { + .search-query { background-color: #444; background-color: rgba(255,255,255,.3); #font > .sans-serif(13px, normal, 1); @@ -74,8 +74,7 @@ color: @white; color: rgba(255,255,255,.75); border: 1px solid #111; - .border-radius(4px); - @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.25); + @shadow: inset 0 1px 2px rgba(0,0,0,.1), 0 1px 0px rgba(255,255,255,.15); .box-shadow(@shadow); .transition(none); -- cgit v1.2.3 From fa8b1dc12dcfe993f1e4185f95ebe0981fbeb0f0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 11 Oct 2011 19:31:25 -0700 Subject: remove color scheme variables, remove font-face mixin --- lib/mixins.less | 17 +++-------------- lib/variables.less | 16 ---------------- 2 files changed, 3 insertions(+), 30 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 9c27346c2..22a30a1c8 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -71,20 +71,6 @@ } } -// Font face generator -.font-face(@fontFamily, @fileName, @style, @weight) { - @font-face { - font-family: @fontFamily; - font-style: @style; - font-weight: @weight; - src: url('@{fileName}.eot'); - src: url('@{fileName}.eot?#iefix') format('embedded-opentype'), - url('@{fileName}.woff') format('woff'), - url('@{fileName}.ttf') format('truetype'), - url('@{fileName}.svg#@{fontFamily}') format('svg'); - } -} - // Grid System .fixed-container() { width: @siteWidth; @@ -115,6 +101,9 @@ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; + -webkit-background-clip: padding-box; + -moz-background-clip: padding; + background-clip: padding-box; } .border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) { -webkit-border-top-left-radius: @topLeft; diff --git a/lib/variables.less b/lib/variables.less index 864dbe8c0..f85e0ec85 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -45,22 +45,6 @@ @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); - - // THEME VARIABLES // --------------- -- cgit v1.2.3 From f4fc56b1b3827254dd771536dcb2b711919f3867 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 12 Oct 2011 08:31:16 -0700 Subject: first pass at moving over the new tabs stuff to 2.0 --- lib/patterns.less | 106 ++++++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 87 insertions(+), 19 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index f2a0b7f0e..af898a561 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -318,14 +318,14 @@ } } -// Basic Tabs +// Tabs .tabs { - float: left; - width: 100%; - border-bottom: 1px solid #ddd; + border-color: #ddd; + border-style: solid; + border-width: 0 0 1px; > li { position: relative; // For the dropdowns mostly - top: 1px; + margin-bottom: -1px; > a { padding: 0 15px; margin-right: 2px; @@ -338,61 +338,129 @@ border-color: #eee #eee #ddd; } } - &.active > a { - color: @gray; - background-color: @white; - border: 1px solid #ddd; + } + // Active state, and it's :hover to override normal :hover + .active > a, + .active > a:hover { + color: @gray; + background-color: @white; + border: 1px solid #ddd; + border-bottom-color: transparent; + cursor: default; + } +} + +.tabbable { + margin-bottom: @baseLineHeight; + + // Tabs on top + .tabs { + margin-bottom: 0; + border-bottom: 0; + } + .tab-content { + padding: 19px; + border: 1px solid #ddd; + } + + // Tabs on bottom + &.tabs-bottom .tabs > li { + margin-top: -1px; + margin-bottom: 0; + } + &.tabs-bottom .tabs > li > a { + .border-radius(0 0 4px 4px); + &:hover { border-bottom-color: transparent; + border-top-color: #ddd; } } + &.tabs-bottom .tabs > .active > a, + &.tabs-bottom .tabs > .active > a:hover { + border-color: transparent #ddd #ddd #ddd; + } + + // Tabs on left + &.tabs-left .tabs { + float: left; + } + &.tabs-left .tabs > li { + float: none; + } + + // Tabs on right + &.tabs-right .tabs { + float: right; + } + &.tabs-right .tabs > li { + float: none; + } +} + + +// Dropdowns in tabs +.tabs { + // first one for backwards compatibility + .menu-dropdown, .dropdown-menu { top: 35px; border-width: 1px; .border-radius(0 6px 6px 6px); } + // first one for backwards compatibility + a.menu:after, .dropdown-toggle:after { border-top-color: #999; margin-top: 15px; margin-left: 5px; } + // first one for backwards compatibility + li.open.menu .menu, .open.dropdown .dropdown-toggle { border-color: #999; } + // first one for backwards compatibility + li.open a.menu:after, .dropdown.open .dropdown-toggle:after { border-top-color: #555; } } -.tab-content { - clear: both; -} -// Basic pill nav +// Pills .pills { a { margin: 5px 3px 5px 0; padding: 0 15px; - text-shadow: 0 1px 1px @white; line-height: 30px; + text-shadow: 0 1px 1px @white; .border-radius(15px); &:hover { - background: @linkColorHover; color: @white; text-decoration: none; text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColorHover; } } .active a { - background: @linkColor; color: @white; text-shadow: 0 1px 1px rgba(0,0,0,.25); + background-color: @linkColor; } } -.tab-content > *, -.pill-content > * { - display: none; +// Stacked pills +.pills-vertical > li { + float: none; } +// Tabbable areas +.tab-content, +.pill-content { +} +.tab-content > .tab-pane, +.pill-content > .pill-pane { + display: none; +} .tab-content > .active, .pill-content > .active { display: block; -- cgit v1.2.3 From fbe22f05800a3ce4ae3a880914d8e03cb1e01d1b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 15 Oct 2011 17:21:39 -0700 Subject: updated index of docs to use html5 self closing tags, add responsive shell to bootstrap file --- lib/bootstrap.less | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/bootstrap.less b/lib/bootstrap.less index 62f2ce916..9665306fd 100644 --- a/lib/bootstrap.less +++ b/lib/bootstrap.less @@ -23,4 +23,7 @@ @import "type.less"; @import "forms.less"; @import "tables.less"; -@import "patterns.less"; \ No newline at end of file +@import "patterns.less"; + +// Responsive +@import "responsive.less"; \ No newline at end of file -- cgit v1.2.3 From 9e9109469e5c86c4232cc744639b286bcd9ef0ba Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 03:00:58 -0700 Subject: biiiiiig update coming for responsiveness --- lib/mixins.less | 3 --- lib/scaffolding.less | 27 ++++----------------------- lib/variables.less | 4 ++-- 3 files changed, 6 insertions(+), 28 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 22a30a1c8..16ea91ba4 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -101,9 +101,6 @@ -webkit-border-radius: @radius; -moz-border-radius: @radius; border-radius: @radius; - -webkit-background-clip: padding-box; - -moz-background-clip: padding; - background-clip: padding-box; } .border-radius-custom(@topLeft, @topRight, @bottomRight, @bottomLeft) { -webkit-border-top-left-radius: @topLeft; diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 00a8ee3b3..01fcd9e77 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -84,10 +84,8 @@ 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(); - margin-left: -1 * @gridGutterWidth; } // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7) @@ -95,6 +93,10 @@ a { [class*="span"] { .gridColumn(); } +// Kill the margin on the first column +.row > [class*="span"]:first-child { + margin-left: 0; +} // Default columns .span1 { .columns(1); } @@ -109,20 +111,6 @@ a { .span10 { .columns(10); } .span11 { .columns(11); } .span12 { .columns(12); } -.span13 { .columns(13); } -.span14 { .columns(14); } -.span15 { .columns(15); } -.span16 { .columns(16); } - -// For optional 24-column grid -.span17 { .columns(17); } -.span18 { .columns(18); } -.span19 { .columns(19); } -.span20 { .columns(20); } -.span21 { .columns(21); } -.span22 { .columns(22); } -.span23 { .columns(23); } -.span24 { .columns(24); } // Offset column options .offset1 { .offset(1); } @@ -136,10 +124,3 @@ a { .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } -.offset12 { .offset(12); } - -// Unique column sizes for 16-column grid -.span-one-third { width: 300px; } -.span-two-thirds { width: 620px; } -.offset-one-third { margin-left: 340px; } -.offset-two-thirds { margin-left: 660px; } diff --git a/lib/variables.less b/lib/variables.less index f85e0ec85..24eb8b45a 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -38,8 +38,8 @@ // ---- // Modify the grid styles in mixins.less -@gridColumns: 16; -@gridColumnWidth: 40px; +@gridColumns: 12; +@gridColumnWidth: 60px; @gridGutterWidth: 20px; @extraSpace: (@gridGutterWidth * 2); // For our grid calculations @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -- cgit v1.2.3 From be926a04bc7d1fec228b9cbd4c6d0bb0c75c30cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 03:08:14 -0700 Subject: fix uber size in responsive; remove @extraspace variable by changing grid to use :first-child over negative margin --- lib/mixins.less | 2 +- lib/variables.less | 1 - 2 files changed, 1 insertion(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 16ea91ba4..47857f1fa 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -82,7 +82,7 @@ width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { diff --git a/lib/variables.less b/lib/variables.less index 24eb8b45a..92d09de70 100644 --- a/lib/variables.less +++ b/lib/variables.less @@ -41,7 +41,6 @@ @gridColumns: 12; @gridColumnWidth: 60px; @gridGutterWidth: 20px; -@extraSpace: (@gridGutterWidth * 2); // For our grid calculations @siteWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); -- cgit v1.2.3 From 3a4760637f3acca9cbd8af2819d163848852a23a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 03:15:17 -0700 Subject: tweak navbar styles for static version to not cause problems on responsive layouts --- lib/patterns.less | 2 -- 1 file changed, 2 deletions(-) (limited to 'lib') diff --git a/lib/patterns.less b/lib/patterns.less index af898a561..950ac2feb 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -111,8 +111,6 @@ margin-bottom: @baseLineHeight; } .navbar-static .navbar-inner { - margin-left: -20px; - margin-right: -20px; padding-left: 20px; padding-right: 20px; .border-radius(4px); -- cgit v1.2.3 From d1d38079589f2cda2b28cc9f5a3da86cbfabbf25 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 03:15:36 -0700 Subject: add responsive.less file --- lib/responsive.less | 147 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 147 insertions(+) create mode 100644 lib/responsive.less (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less new file mode 100644 index 000000000..ee974d3e1 --- /dev/null +++ b/lib/responsive.less @@ -0,0 +1,147 @@ +/* Responsive.less + * For phone and tablet devices + * ------------------------------------------------------------- */ + + +@media (max-width: 480px) { + // Remove width from containers + .container { + width: auto; + padding: 0 10px; + } + // Make all columns even + [class*="span"] { + float: none; + display: block; + width: auto; + } +} + + +@media (min-width: 480px) and (max-width: 768px) { + // Remove width from containers + .container { + width: auto; + padding: 0 10px; + } + // Make all columns even + [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } +} + + +// TABLET TO MEDIUM DESKTOP +// ------------------------ + +@media (min-width: 768px) and (max-width: 940px) { + + // Reset grid variables + @gridColumns: 16; + @gridColumnWidth: 28px; + @gridGutterWidth: 20px; + @siteWidth: 748px; + @extraSpace: (@gridGutterWidth * 2); + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; + } + + // 16cols at 30px wide with 16px gutters + .container { + width: @siteWidth; + } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + +} + + +// LARGE DESKTOP +// ------------- + +@media (min-width: 1170px) { + + // Reset grid variables + @gridColumns: 12; + @gridColumnWidth: 70px; + @gridGutterWidth: 30px; + @siteWidth: 1170px; + + // Bring grid mixins to recalculate widths + .columns(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; + } + + .container { + width: @siteWidth; + } + [class*="span"] { + margin-left: @gridGutterWidth; + } + + // Default columns + .span1 { .columns(1); } + .span2 { .columns(2); } + .span3 { .columns(3); } + .span4 { .columns(4); } + .span5 { .columns(5); } + .span6 { .columns(6); } + .span7 { .columns(7); } + .span8 { .columns(8); } + .span9 { .columns(9); } + .span10 { .columns(10); } + .span11 { .columns(11); } + .span12 { .columns(12); } + + // Offset column options + .offset1 { .offset(1); } + .offset2 { .offset(2); } + .offset3 { .offset(3); } + .offset4 { .offset(4); } + .offset5 { .offset(5); } + .offset6 { .offset(6); } + .offset7 { .offset(7); } + .offset8 { .offset(8); } + .offset9 { .offset(9); } + .offset10 { .offset(10); } + .offset11 { .offset(11); } + .offset12 { .offset(12); } + +} \ No newline at end of file -- cgit v1.2.3 From 6f44a90edbfc897082dd69630983391bf6e57ba7 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 11:35:24 -0700 Subject: tweak line-height of h2 and h3 to not be gihugeous, updated responsive to improve tablet grid and phone styles --- lib/responsive.less | 46 +++++++++++++++++++++++++++++++++++++++------- lib/type.less | 4 ++-- 2 files changed, 41 insertions(+), 9 deletions(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index ee974d3e1..5c8e0539e 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -3,6 +3,9 @@ * ------------------------------------------------------------- */ +// UP TO LANDSCAPE PHONE +// --------------------- + @media (max-width: 480px) { // Remove width from containers .container { @@ -14,10 +17,40 @@ float: none; display: block; width: auto; + margin: 0; + } + // Resize modals + .modal { + width: auto; + margin: 0; } + + // Remove the horizontal form styles + .form-horizontal .control-group > label { + float: none; + width: auto; + padding-top: 0; + text-align: left; + } + // Move over all input controls and content + .form-horizontal .controls { + margin-left: 0; + } + // Move the options list down to align with labels + .form-horizontal .control-list { + padding-top: 0; // has to be padding because margin collaspes + } + // Move over buttons in .form-actions to align with .controls + .form-horizontal .form-actions { + padding-left: 0; + } + } +// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET +// -------------------------------------------------- + @media (min-width: 480px) and (max-width: 768px) { // Remove width from containers .container { @@ -34,24 +67,23 @@ } -// TABLET TO MEDIUM DESKTOP -// ------------------------ +// PORTRAIT TABLET TO DEFAULT DESKTOP +// ---------------------------------- @media (min-width: 768px) and (max-width: 940px) { // Reset grid variables @gridColumns: 16; - @gridColumnWidth: 28px; + @gridColumnWidth: 44px; @gridGutterWidth: 20px; @siteWidth: 748px; - @extraSpace: (@gridGutterWidth * 2); // Bring grid mixins to recalculate widths .columns(@columnSpan: 1) { width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); } .offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace; + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; } // 16cols at 30px wide with 16px gutters @@ -90,8 +122,8 @@ } -// LARGE DESKTOP -// ------------- +// LARGE DESKTOP & UP +// ------------------ @media (min-width: 1170px) { diff --git a/lib/type.less b/lib/type.less index 4232a24df..7cf9e6ccd 100644 --- a/lib/type.less +++ b/lib/type.less @@ -38,13 +38,13 @@ h1 { } h2 { font-size: 24px; - line-height: @baseLineHeight * 2; + line-height: @baseLineHeight * 1.5; small { font-size: 14px; } } h3 { - line-height: @baseLineHeight * 2; + line-height: @baseLineHeight * 1.5; font-size: 18px; small { font-size: 14px; -- cgit v1.2.3 From 756e7c8739266ec8594d545e7eec2a50ea06ce08 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 12:11:48 -0700 Subject: more tweaks to responsive --- lib/responsive.less | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index 5c8e0539e..afd30f279 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -121,7 +121,7 @@ } - +/* // LARGE DESKTOP & UP // ------------------ @@ -176,4 +176,5 @@ .offset11 { .offset(11); } .offset12 { .offset(12); } -} \ No newline at end of file +} +*/ \ No newline at end of file -- cgit v1.2.3 From 2a82b38cff142ec86a6e1dc4f9366205260d262d Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 18:01:05 -0700 Subject: tweak the h2s again for better spacing, adjust docs, remove white bg if possible on file input, few other tweaks --- lib/forms.less | 8 ++------ lib/type.less | 4 ++-- 2 files changed, 4 insertions(+), 8 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 4b2bb8016..6edf29e53 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -37,12 +37,6 @@ label { color: @grayDark; } -// Checkboxs and radio buttons -input[type=checkbox], -input[type=radio] { - cursor: pointer; -} - // Inputs, Textareas, Selects input, textarea, @@ -69,11 +63,13 @@ input[type=radio] { *margin-top: 0; /* IE6-7 */ line-height: normal; border: none; + cursor: pointer; } // Reset the file input to browser defaults input[type=file] { background-color: @white; + background-color: initial; padding: initial; border: initial; line-height: initial; diff --git a/lib/type.less b/lib/type.less index 7cf9e6ccd..c746a58af 100644 --- a/lib/type.less +++ b/lib/type.less @@ -38,7 +38,7 @@ h1 { } h2 { font-size: 24px; - line-height: @baseLineHeight * 1.5; + line-height: @baseLineHeight * 2; small { font-size: 14px; } @@ -90,7 +90,7 @@ ol { } li { line-height: @baseLineHeight; - color: @gray; + color: @grayDark; } ul.unstyled { list-style: none; -- cgit v1.2.3 From c62a0239bd30a12e9f0d8c1e45f5818460e9df90 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 19:12:33 -0700 Subject: update to responsive to fix new masthead --- lib/responsive.less | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'lib') diff --git a/lib/responsive.less b/lib/responsive.less index afd30f279..900df4c75 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -121,11 +121,10 @@ } -/* // LARGE DESKTOP & UP // ------------------ -@media (min-width: 1170px) { +@media (min-width: 1210px) { // Reset grid variables @gridColumns: 12; @@ -177,4 +176,3 @@ .offset12 { .offset(12); } } -*/ \ No newline at end of file -- cgit v1.2.3 From e7d2218b2043742f21c368d074d97a4bde275730 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 23:04:31 -0700 Subject: few tweaks to responsive stuff, updated docs for grid system (still needs copy editing) --- lib/mixins.less | 9 +++++---- lib/patterns.less | 6 +++--- lib/responsive.less | 2 ++ lib/scaffolding.less | 5 +---- 4 files changed, 11 insertions(+), 11 deletions(-) (limited to 'lib') diff --git a/lib/mixins.less b/lib/mixins.less index 47857f1fa..5b05654d5 100644 --- a/lib/mixins.less +++ b/lib/mixins.less @@ -78,12 +78,13 @@ margin-right: auto; .clearfix(); } -.columns(@columnSpan: 1) { - width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); +.columns(@columns: 1) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); } -.offset(@columnOffset: 1) { - margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; +.offset(@columns: 1) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } + // Necessary grid styles for every column to make them appear next to each other horizontally .gridColumn() { display: inline; diff --git a/lib/patterns.less b/lib/patterns.less index 950ac2feb..f1badc46d 100644 --- a/lib/patterns.less +++ b/lib/patterns.less @@ -520,11 +520,11 @@ footer { // ------------ .page-header { - margin-bottom: @baseLineHeight - 1; - border-bottom: 1px solid #ddd; + margin-bottom: @baseLineHeight * 1.5; + border-bottom: 1px solid #eee; .box-shadow(0 1px 0 rgba(255,255,255,.5)); h1 { - margin-bottom: (@baseLineHeight / 2) - 1px; + margin-bottom: @baseLineHeight * .75; } } diff --git a/lib/responsive.less b/lib/responsive.less index 900df4c75..a1a33164f 100644 --- a/lib/responsive.less +++ b/lib/responsive.less @@ -121,6 +121,7 @@ } +/* // LARGE DESKTOP & UP // ------------------ @@ -176,3 +177,4 @@ .offset12 { .offset(12); } } +*/ \ No newline at end of file diff --git a/lib/scaffolding.less b/lib/scaffolding.less index 01fcd9e77..f15f6853c 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -85,6 +85,7 @@ a { // ----------- // To customize the grid system, bring up the variables.less file and change the column count, size, and gutter there .row { + margin-left: -@gridGutterWidth; .clearfix(); } @@ -93,10 +94,6 @@ a { [class*="span"] { .gridColumn(); } -// Kill the margin on the first column -.row > [class*="span"]:first-child { - margin-left: 0; -} // Default columns .span1 { .columns(1); } -- cgit v1.2.3 From f48baceeda7dc18e1fdf78f89c55b3de40a3357e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 12:45:09 -0700 Subject: remove bottom margin from h1 --- lib/type.less | 1 - 1 file changed, 1 deletion(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index c746a58af..28d893fb9 100644 --- a/lib/type.less +++ b/lib/type.less @@ -29,7 +29,6 @@ h1, h2, h3, h4, h5, h6 { } } h1 { - margin-bottom: @baseLineHeight; font-size: 30px; line-height: @baseLineHeight * 2; small { -- cgit v1.2.3 From 27cbe7f63a13fad987dc2547ef5b6f526ceb268c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 14:17:29 -0700 Subject: add abbr styles, overhaul type docs section to remove lots of verbose text and put emphasis on tables and more scannable content --- lib/type.less | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 28d893fb9..4978dd786 100644 --- a/lib/type.less +++ b/lib/type.less @@ -24,6 +24,7 @@ p { h1, h2, h3, h4, h5, h6 { font-weight: bold; color: @grayDark; + text-rendering: optimizelegibility; small { color: @grayLight; } @@ -39,7 +40,7 @@ h2 { font-size: 24px; line-height: @baseLineHeight * 2; small { - font-size: 14px; + font-size: 18px; } } h3 { @@ -134,6 +135,14 @@ em { color: @grayLight; } +// Abbreviations and acronyms +abbr { + font-size: 90%; + text-transform: uppercase; + border-bottom: 1px dotted #ddd; + cursor: help; +} + // Blockquotes blockquote { margin-bottom: @baseLineHeight; -- cgit v1.2.3 From 369b9720c6090985c678076eebb59c080c0ed27c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Oct 2011 23:45:35 -0700 Subject: adding responsive stuff to docs to stub that out, updated type to make ul and ol margins match p tags --- lib/type.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'lib') diff --git a/lib/type.less b/lib/type.less index 4978dd786..a490bf5fa 100644 --- a/lib/type.less +++ b/lib/type.less @@ -74,7 +74,7 @@ h6 { // Unordered and Ordered lists ul, ol { - margin: 0 0 @baseLineHeight 25px; + margin: 0 0 @baseLineHeight / 2 25px; } ul ul, ul ol, -- cgit v1.2.3