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/responsive.less | 268 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 268 insertions(+) create mode 100644 less/responsive.less (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less new file mode 100644 index 000000000..2999eef4d --- /dev/null +++ b/less/responsive.less @@ -0,0 +1,268 @@ +// Responsive.less +// For phone and tablet devices +// ------------------------------------------------------------- + + +// REPEAT VARIABLES & MIXINS +// ------------------------- +// Required since we compile the responsive stuff separately + +@import "variables.less"; // Modify this for custom colors, font-sizes, etc +@import "mixins.less"; + + +// RESPONSIVE CLASSES +// ------------------ + +// Hide from screenreaders and browsers +// Credit: HTML5BP +.hidden { + display: none; + visibility: hidden; +} + + +// UP TO LANDSCAPE PHONE +// --------------------- + +@media (max-width: 480px) { + + // Make the nav work for small devices + .navbar { + .nav { + position: absolute; + top: 0; + left: 0; + width: 180px; + padding-top: 40px; + list-style: none; + } + .nav, + .nav > li:last-child a { + .border-radius(0 0 4px 0); + } + .nav > li { + float: none; + display: none; + } + .nav > li > a { + float: none; + background-color: #222; + } + .nav > .active { + display: block; + position: absolute; + top: 0; + left: 0; + } + .nav > .active > a { + background-color: transparent; + } + .nav > .active > a:hover { + background-color: #333; + } + .nav > .active > a:after { + display: inline-block; + width: 0; + height: 0; + margin-top: 8px; + margin-left: 6px; + text-indent: -99999px; + vertical-align: top; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 4px solid @white; + .opacity(100); + content: "↓"; + } + .nav:hover > li { + display: block; + } + .nav:hover > li > a:hover { + background-color: #333; + } + } + + // 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; + } + + // Modals + .modal { + position: absolute; + top: 20px; + left: 20px; + right: 20px; + width: auto; + margin: 0; + &.fade.in { top: auto; } + } + .modal-header .close { + padding: 10px; + } + +} + + +// LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET +// -------------------------------------------------- + +@media (max-width: 768px) { + + // Unfix the navbar + .navbar-fixed { + position: absolute; + } + .navbar-fixed .nav { + float: none; + } + + // Remove width from containers + .container { + width: auto; + padding: 0 20px; + } + // Undo negative margin on rows + .row { + margin-left: 0; + } + // Make all columns even + .row > [class*="span"] { + float: none; + display: block; + width: auto; + margin: 0; + } + +} + + +// PORTRAIT TABLET TO DEFAULT DESKTOP +// ---------------------------------- + +@media (min-width: 768px) and (max-width: 940px) { + + // Reset grid variables + @gridColumns: 16; + @gridColumnWidth: 44px; + @gridGutterWidth: 20px; + @siteWidth: 748px; + + // Bring grid mixins to recalculate widths + .columns(@columns: 1) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + } + .offset(@columns: 1) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); + } + + // 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 & UP +// ------------------ +/* +@media (min-width: 1210px) { + + // Reset grid variables + @gridColumns: 12; + @gridColumnWidth: 70px; + @gridGutterWidth: 30px; + @siteWidth: 1170px; + + // Bring grid mixins to recalculate widths + .columns(@columns: 1) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + } + .offset(@columns: 1) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); + } + + .container { + width: @siteWidth; + } + .row { + margin-left: @gridGutterWidth * -1; + } + [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 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/responsive.less | 2 ++ 1 file changed, 2 insertions(+) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 2999eef4d..917fdc3e2 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -175,6 +175,8 @@ // 16cols at 30px wide with 16px gutters .container { width: @siteWidth; + padding-left: 10px; + padding-right: 10px; } // Default columns -- cgit v1.2.3 From f6dc566963c63d5113e72f0098ad9da2c414f33f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 27 Jan 2012 16:26:55 -0800 Subject: overhaul navbar behavior in responsive css --- less/responsive.less | 173 ++++++++++++++++++++++++++++++++------------------- 1 file changed, 108 insertions(+), 65 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 917fdc3e2..8bfe705b4 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -15,7 +15,7 @@ // ------------------ // Hide from screenreaders and browsers -// Credit: HTML5BP +// Credit: HTML5 Boilerplate .hidden { display: none; visibility: hidden; @@ -27,62 +27,6 @@ @media (max-width: 480px) { - // Make the nav work for small devices - .navbar { - .nav { - position: absolute; - top: 0; - left: 0; - width: 180px; - padding-top: 40px; - list-style: none; - } - .nav, - .nav > li:last-child a { - .border-radius(0 0 4px 0); - } - .nav > li { - float: none; - display: none; - } - .nav > li > a { - float: none; - background-color: #222; - } - .nav > .active { - display: block; - position: absolute; - top: 0; - left: 0; - } - .nav > .active > a { - background-color: transparent; - } - .nav > .active > a:hover { - background-color: #333; - } - .nav > .active > a:after { - display: inline-block; - width: 0; - height: 0; - margin-top: 8px; - margin-left: 6px; - text-indent: -99999px; - vertical-align: top; - border-left: 4px solid transparent; - border-right: 4px solid transparent; - border-top: 4px solid @white; - .opacity(100); - content: "↓"; - } - .nav:hover > li { - display: block; - } - .nav:hover > li > a:hover { - background-color: #333; - } - } - // Remove the horizontal form styles .form-horizontal .control-group > label { float: none; @@ -124,15 +68,9 @@ // -------------------------------------------------- @media (max-width: 768px) { - - // Unfix the navbar - .navbar-fixed { - position: absolute; - } - .navbar-fixed .nav { - float: none; - } + // GRID & CONTAINERS + // ----------------- // Remove width from containers .container { width: auto; @@ -209,6 +147,111 @@ } + +// TABLETS AND BELOW +// ----------------- +@media (max-width: 940px) { + + // UNFIX THE TOPBAR + // ---------------- + // Remove any padding from the body + body { + padding-top: 0; + } + // Unfix the navbar + .navbar-fixed-top { + position: static; + margin-bottom: @baseLineHeight * 2; + } + .navbar-inner { + padding: 10px; + background-image: none; + } + .navbar .container { + padding: 0; + } + // Account for brand name + .navbar .brand { + float: none; + display: block; + padding-left: 15px; + padding-right: 15px; + margin: 0; + } + // Block-level the nav + .navbar .nav { + float: none; + margin: (@baseLineHeight / 2) 0; + } + .navbar .nav > li { + float: none; + } + .navbar .nav > li > a { + margin-bottom: 2px; + } + .navbar .nav > .vertical-divider { + display: none; + } + // Nav and dropdown links in navbar + .navbar .nav > li > a, + .navbar .dropdown-menu a { + padding: 6px 15px; + font-weight: bold; + color: @navbarLinkColor; + .border-radius(3px); + } + .navbar .dropdown-menu li + li a { + margin-bottom: 2px; + } + .navbar .nav > li > a:hover, + .navbar .dropdown-menu a:hover { + background-color: @navbarBackground; + } + // Dropdowns in the navbar + .navbar .dropdown-menu { + position: static; + display: block; + float: none; + max-width: none; + margin: 0 15px; + padding: 0; + background-color: transparent; + border: none; + .border-radius(0); + .box-shadow(none); + } + .navbar .dropdown-menu:before, + .navbar .dropdown-menu:after { + display: none; + } + .navbar .dropdown-menu .divider { + display: none; + } + // Forms in navbar + .navbar-form, + .navbar-search { + float: none; + padding: (@baseLineHeight / 2) 15px; + margin: (@baseLineHeight / 2) 0; + border-top: 1px solid @navbarBackground; + border-bottom: 1px solid @navbarBackground; + @shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.1); + .box-shadow(@shadow); + } + // Pull right (secondary) nav content + .navbar .nav.pull-right { + float: none; + margin-left: 0; + } + // Static navbar + .navbar-static .navbar-inner { + padding-left: 10px; + padding-right: 10px; + } + +} + + // LARGE DESKTOP & UP // ------------------ /* -- cgit v1.2.3 From 342a99f1d01edfa20d744781cbecffcd4239fa39 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 00:29:38 -0800 Subject: block level page-header h1 small for readability on 480px and under --- less/responsive.less | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 8bfe705b4..6ba31b5c9 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -27,6 +27,12 @@ @media (max-width: 480px) { + // Block level the page header small tag for readability + .page-header h1 small { + display: block; + line-height: @baseLineHeight; + } + // Remove the horizontal form styles .form-horizontal .control-group > label { float: none; -- cgit v1.2.3 From 967030cb532c642f076d1e1fc4e5a1e2cee18561 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 00:39:22 -0800 Subject: modal refinements in docs and general responsiveness --- less/responsive.less | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 6ba31b5c9..fe5e0a7eb 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -56,15 +56,16 @@ // Modals .modal { position: absolute; - top: 20px; - left: 20px; - right: 20px; + top: 10px; + left: 10px; + right: 10px; width: auto; margin: 0; &.fade.in { top: auto; } } .modal-header .close { padding: 10px; + margin: -10px; } } -- cgit v1.2.3 From f1851ab1338938bf6315e223789e345f20cfb4b1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 00:43:25 -0800 Subject: change text on js docs page to improve rendering on iphone, update responsive for carousel considerations --- less/responsive.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index fe5e0a7eb..24b58d2ab 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -68,6 +68,11 @@ margin: -10px; } + // Carousel + .carousel-caption { + position: static; + } + } -- cgit v1.2.3 From 70c6a6cd855a617b086682ef919e02cf67d4e86e Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 12:58:26 -0800 Subject: fix border and border radius on radios/checkboxes for iOS, fix forms docs alignment on small devices --- less/responsive.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 24b58d2ab..4ce4aff72 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -50,7 +50,8 @@ } // Move over buttons in .form-actions to align with .controls .form-horizontal .form-actions { - padding-left: 0; + padding-left: 10px; + padding-right: 10px; } // Modals -- cgit v1.2.3 From 296d06a285d91200b4063f3bdde65c094495ee24 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 13:07:01 -0800 Subject: add checkbox/radio border for ios in responsive --- less/responsive.less | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 4ce4aff72..2d49f2095 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -33,6 +33,12 @@ line-height: @baseLineHeight; } + // Update checkboxes for iOS + input[type="checkbox"], + input[type="radio"] { + border: 1px solid #ccc; + } + // Remove the horizontal form styles .form-horizontal .control-group > label { float: none; -- cgit v1.2.3 From 9db4f2a344ebf452b88ac4af0261192f3a8e9eb6 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 14:30:45 -0800 Subject: change .span* inputs to use content-sizing: border-box; to make them behave as block level elements --- less/responsive.less | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 2d49f2095..ef2df5f1d 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -33,6 +33,26 @@ line-height: @baseLineHeight; } + // Make span* classes full width + input[class*="span"], + select[class*="span"], + textarea[class*="span"], + .uneditable-input { + display: block; + width: 100%; + height: 28px; /* Make inputs at least the height of their button counterpart */ + /* Makes inputs behave like true block-level elements */ + -webkit-box-sizing: border-box; /* Older Webkit */ + -moz-box-sizing: border-box; /* Older FF */ + -ms-box-sizing: border-box; /* IE8 */ + box-sizing: border-box; /* CSS3 spec*/ + } + // But don't let it screw up prepend/append inputs + .input-prepend input[class*="span"], + .input-append input[class*="span"] { + width: auto; + } + // Update checkboxes for iOS input[type="checkbox"], input[type="radio"] { -- cgit v1.2.3 From 23e076c1bb73c4950d473cb36218937b2607bc13 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 15:09:23 -0800 Subject: add in a navbar button for toggling the nav items --- less/responsive.less | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index ef2df5f1d..cc3b2882f 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -127,6 +127,11 @@ margin: 0; } + // Navbar button + .btn-navbar { + display: block; + } + } -- cgit v1.2.3 From b8a683d7f250a11d349a3e5de0d75ace9d67df0c Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sat, 28 Jan 2012 15:42:07 -0800 Subject: turn off brand hover for now + get nav toggling in mobile --- less/responsive.less | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index cc3b2882f..6c3102c14 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -126,12 +126,6 @@ width: auto; margin: 0; } - - // Navbar button - .btn-navbar { - display: block; - } - } @@ -292,6 +286,15 @@ padding-left: 10px; padding-right: 10px; } + // Navbar button + .btn-navbar { + display: block; + } + + .nav-collapse { + overflow: hidden; + height: 0; + } } -- cgit v1.2.3 From 4fa931e403ec3ae2f8f7f690c6c4040365f68ba9 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:11:31 -0800 Subject: fix the navbar click and a few jank responsive problems --- less/responsive.less | 25 +++++++++++++------------ 1 file changed, 13 insertions(+), 12 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 6c3102c14..0955710b6 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -202,7 +202,7 @@ margin-bottom: @baseLineHeight * 2; } .navbar-inner { - padding: 10px; + padding: 5px; background-image: none; } .navbar .container { @@ -210,16 +210,18 @@ } // Account for brand name .navbar .brand { - float: none; - display: block; - padding-left: 15px; - padding-right: 15px; - margin: 0; + padding-left: 10px; + padding-right: 10px; + margin: 0 0 0 -5px; + } + // Nav collapse clears brand + .navbar .nav-collapse { + clear: left; } // Block-level the nav .navbar .nav { float: none; - margin: (@baseLineHeight / 2) 0; + margin: 0 0 (@baseLineHeight / 2); } .navbar .nav > li { float: none; @@ -248,8 +250,10 @@ // Dropdowns in the navbar .navbar .dropdown-menu { position: static; - display: block; + top: auto; + left: auto; float: none; + display: block; max-width: none; margin: 0 15px; padding: 0; @@ -301,7 +305,7 @@ // LARGE DESKTOP & UP // ------------------ -/* + @media (min-width: 1210px) { // Reset grid variables @@ -317,7 +321,6 @@ .offset(@columns: 1) { margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } - .container { width: @siteWidth; } @@ -354,7 +357,5 @@ .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } - .offset12 { .offset(12); } } -*/ \ No newline at end of file -- cgit v1.2.3 From e532228721734492d6f2741f729525cc1bb3c77c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 18:25:05 -0800 Subject: more responsive tweaks for tablet --- less/responsive.less | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 0955710b6..fba5b3656 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -135,10 +135,10 @@ @media (min-width: 768px) and (max-width: 940px) { // Reset grid variables - @gridColumns: 16; - @gridColumnWidth: 44px; + @gridColumns: 12; + @gridColumnWidth: 42px; @gridGutterWidth: 20px; - @siteWidth: 748px; + @siteWidth: 724px; // Bring grid mixins to recalculate widths .columns(@columns: 1) { @@ -148,11 +148,11 @@ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); } - // 16cols at 30px wide with 16px gutters + // 12cols at 44px wide with 20px gutters .container { width: @siteWidth; - padding-left: 10px; - padding-right: 10px; + padding-left: 20px; + padding-right: 20px; } // Default columns @@ -181,7 +181,6 @@ .offset9 { .offset(9); } .offset10 { .offset(10); } .offset11 { .offset(11); } - .offset12 { .offset(12); } } @@ -295,6 +294,7 @@ display: block; } + // Hide everything in the navbar save .brand and toggle button */ .nav-collapse { overflow: hidden; height: 0; -- cgit v1.2.3 From f1e520badd51d01ebcd33758966ef868e5cdd1c2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 20:34:07 -0800 Subject: clarify and tweak media queries --- less/responsive.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index fba5b3656..732099079 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -306,7 +306,7 @@ // LARGE DESKTOP & UP // ------------------ -@media (min-width: 1210px) { +@media (min-width: 1200px) { // Reset grid variables @gridColumns: 12; -- cgit v1.2.3 From 62f4a1571a3801c867b80c228464cc9c695f1d13 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 28 Jan 2012 22:48:25 -0800 Subject: revamped the thumbnails examples to make them work and look better at higher resolution --- less/responsive.less | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 732099079..db2675e3d 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -358,4 +358,12 @@ .offset10 { .offset(10); } .offset11 { .offset(11); } + // Thumbnails + .thumbnails { + margin-left: @gridGutterWidth * -1; + } + .thumbnails > li { + margin-left: @gridGutterWidth; + } + } -- 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/responsive.less | 93 +++++++++++++++++++++++++++++++++++++++++++++++----- 1 file changed, 85 insertions(+), 8 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index db2675e3d..107fa7dd7 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -115,6 +115,10 @@ width: auto; padding: 0 20px; } + // Fluid rows + .row-fluid { + width: 100%; + } // Undo negative margin on rows .row { margin-left: 0; @@ -182,6 +186,42 @@ .offset10 { .offset(10); } .offset11 { .offset(11); } + // FLUID GRID + // ---------- + .row-fluid { + @gridColumnWidth: 5.801104972%; + @gridGutterWidth: 2.762430939%; + @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + @gridTotalWidth: @gridRowWidth; + + width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth); + margin-left: 0 - @gridGutterWidth; + + // Redeclare the mixins + .gridColumn() { + float: left; + margin-left: @gridGutterWidth; + } + [class*="span"] { + .gridColumn(); + } + .fluidColumns(@columns: 1) { + width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth)); + } + // Redeclare the columns + .span1 { .fluidColumns(1); } + .span2 { .fluidColumns(2); } + .span3 { .fluidColumns(3); } + .span4 { .fluidColumns(4); } + .span5 { .fluidColumns(5); } + .span6 { .fluidColumns(6); } + .span7 { .fluidColumns(7); } + .span8 { .fluidColumns(8); } + .span9 { .fluidColumns(9); } + .span10 { .fluidColumns(10); } + .span11 { .fluidColumns(11); } + .span12 { .fluidColumns(12); } + } } @@ -198,7 +238,7 @@ // Unfix the navbar .navbar-fixed-top { position: static; - margin-bottom: @baseLineHeight * 2; + margin-bottom: @baseLineHeight; } .navbar-inner { padding: 5px; @@ -314,6 +354,14 @@ @gridGutterWidth: 30px; @siteWidth: 1170px; + // Thumbnails + .thumbnails { + margin-left: @gridGutterWidth * -1; + } + .thumbnails > li { + margin-left: @gridGutterWidth; + } + // Bring grid mixins to recalculate widths .columns(@columns: 1) { width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); @@ -358,12 +406,41 @@ .offset10 { .offset(10); } .offset11 { .offset(11); } - // Thumbnails - .thumbnails { - margin-left: @gridGutterWidth * -1; - } - .thumbnails > li { - margin-left: @gridGutterWidth; - } + // FLUID GRID + // ---------- + .row-fluid { + @gridColumnWidth: 5.982%; + @gridGutterWidth: 2.56%; + @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); + @gridTotalWidth: @gridRowWidth; + + width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth); + margin-left: 0 - @gridGutterWidth; + + // Redeclare the mixins + .gridColumn() { + float: left; + margin-left: @gridGutterWidth; + } + [class*="span"] { + .gridColumn(); + } + .fluidColumns(@columns: 1) { + width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth)); + } + // Redeclare the columns + .span1 { .fluidColumns(1); } + .span2 { .fluidColumns(2); } + .span3 { .fluidColumns(3); } + .span4 { .fluidColumns(4); } + .span5 { .fluidColumns(5); } + .span6 { .fluidColumns(6); } + .span7 { .fluidColumns(7); } + .span8 { .fluidColumns(8); } + .span9 { .fluidColumns(9); } + .span10 { .fluidColumns(10); } + .span11 { .fluidColumns(11); } + .span12 { .fluidColumns(12); } + } } -- cgit v1.2.3 From 9e7f5025b494927e9ffc88119b0b9426f7487a62 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 14:07:14 -0800 Subject: update collapsible nav in navbar --- less/responsive.less | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 107fa7dd7..7ae28b825 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -240,7 +240,7 @@ position: static; margin-bottom: @baseLineHeight; } - .navbar-inner { + .navbar-fixed-top .navbar-inner { padding: 5px; background-image: none; } @@ -335,10 +335,13 @@ } // Hide everything in the navbar save .brand and toggle button */ - .nav-collapse { + .nav-collapse.collapse { overflow: hidden; height: 0; } + .nav-collapse.collapse.in { + height: auto; + } } -- cgit v1.2.3 From 702d3b6dfe7a150deb090f70d7d9c2a2964a3eb2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 29 Jan 2012 16:35:55 -0800 Subject: fix broken navbar collapse --- less/responsive.less | 21 ++++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 7ae28b825..a1d4cf2c8 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -22,6 +22,7 @@ } + // UP TO LANDSCAPE PHONE // --------------------- @@ -103,11 +104,11 @@ } + // LANDSCAPE PHONE TO SMALL DESKTOP & PORTRAIT TABLET // -------------------------------------------------- @media (max-width: 768px) { - // GRID & CONTAINERS // ----------------- // Remove width from containers @@ -133,6 +134,7 @@ } + // PORTRAIT TABLET TO DEFAULT DESKTOP // ---------------------------------- @@ -225,6 +227,7 @@ } + // TABLETS AND BELOW // ----------------- @media (max-width: 940px) { @@ -335,17 +338,25 @@ } // Hide everything in the navbar save .brand and toggle button */ - .nav-collapse.collapse { + .nav-collapse { overflow: hidden; height: 0; } - .nav-collapse.collapse.in { - height: auto; - } +} + + + +// DEFAULT DESKTOP +// --------------- +@media (min-width: 940px) { + .nav-collapse.collapse { + height: auto !important; + } } + // LARGE DESKTOP & UP // ------------------ -- cgit v1.2.3 From fae04c8ac1da675338c1cfaf3922223980667281 Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Sun, 29 Jan 2012 19:04:26 -0800 Subject: add license for responsive and rebuild --- less/responsive.less | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index a1d4cf2c8..7f0892809 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -1,3 +1,13 @@ +/*! + * Bootstrap Responsive v2.0.0 + * + * Copyright 2012 Twitter, Inc + * Licensed under the Apache License v2.0 + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Designed and built with all the love in the world @twitter by @mdo and @fat. + */ + // Responsive.less // For phone and tablet devices // ------------------------------------------------------------- @@ -203,7 +213,7 @@ .gridColumn() { float: left; margin-left: @gridGutterWidth; - } + } [class*="span"] { .gridColumn(); } @@ -436,7 +446,7 @@ .gridColumn() { float: left; margin-left: @gridGutterWidth; - } + } [class*="span"] { .gridColumn(); } -- 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/responsive.less | 190 ++++++--------------------------------------------- 1 file changed, 19 insertions(+), 171 deletions(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index a1d4cf2c8..72fa21384 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -125,7 +125,8 @@ margin-left: 0; } // Make all columns even - .row > [class*="span"] { + .row > [class*="span"], + .row-fluid > [class*="span"] { float: none; display: block; width: auto; @@ -140,90 +141,15 @@ @media (min-width: 768px) and (max-width: 940px) { - // Reset grid variables - @gridColumns: 12; - @gridColumnWidth: 42px; - @gridGutterWidth: 20px; - @siteWidth: 724px; + // Fixed grid + #gridSystem > .generate(12, 42px, 20px); - // Bring grid mixins to recalculate widths - .columns(@columns: 1) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - .offset(@columns: 1) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); - } + // Fluid grid + #fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%); + + // Input grid + #inputGridSystem > .generate(12, 42px, 20px); - // 12cols at 44px wide with 20px gutters - .container { - width: @siteWidth; - padding-left: 20px; - padding-right: 20px; - } - - // 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); } - - // FLUID GRID - // ---------- - .row-fluid { - @gridColumnWidth: 5.801104972%; - @gridGutterWidth: 2.762430939%; - @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - @gridTotalWidth: @gridRowWidth; - - width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth); - margin-left: 0 - @gridGutterWidth; - - // Redeclare the mixins - .gridColumn() { - float: left; - margin-left: @gridGutterWidth; - } - [class*="span"] { - .gridColumn(); - } - .fluidColumns(@columns: 1) { - width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth)); - } - // Redeclare the columns - .span1 { .fluidColumns(1); } - .span2 { .fluidColumns(2); } - .span3 { .fluidColumns(3); } - .span4 { .fluidColumns(4); } - .span5 { .fluidColumns(5); } - .span6 { .fluidColumns(6); } - .span7 { .fluidColumns(7); } - .span8 { .fluidColumns(8); } - .span9 { .fluidColumns(9); } - .span10 { .fluidColumns(10); } - .span11 { .fluidColumns(11); } - .span12 { .fluidColumns(12); } - } } @@ -362,99 +288,21 @@ @media (min-width: 1200px) { - // Reset grid variables - @gridColumns: 12; - @gridColumnWidth: 70px; - @gridGutterWidth: 30px; - @siteWidth: 1170px; + // Fixed grid + #gridSystem > .generate(12, 70px, 30px); + + // Fluid grid + #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%); + + // Input grid + #inputGridSystem > .generate(12, 70px, 30px); // Thumbnails .thumbnails { - margin-left: @gridGutterWidth * -1; + margin-left: -30px; } .thumbnails > li { - margin-left: @gridGutterWidth; + margin-left: 30px; } - // Bring grid mixins to recalculate widths - .columns(@columns: 1) { - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); - } - .offset(@columns: 1) { - margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); - } - .container { - width: @siteWidth; - } - .row { - margin-left: @gridGutterWidth * -1; - } - [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); } - - - // FLUID GRID - // ---------- - .row-fluid { - @gridColumnWidth: 5.982%; - @gridGutterWidth: 2.56%; - @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1)); - @gridTotalWidth: @gridRowWidth; - - width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth); - margin-left: 0 - @gridGutterWidth; - - // Redeclare the mixins - .gridColumn() { - float: left; - margin-left: @gridGutterWidth; - } - [class*="span"] { - .gridColumn(); - } - .fluidColumns(@columns: 1) { - width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth)); - } - // Redeclare the columns - .span1 { .fluidColumns(1); } - .span2 { .fluidColumns(2); } - .span3 { .fluidColumns(3); } - .span4 { .fluidColumns(4); } - .span5 { .fluidColumns(5); } - .span6 { .fluidColumns(6); } - .span7 { .fluidColumns(7); } - .span8 { .fluidColumns(8); } - .span9 { .fluidColumns(9); } - .span10 { .fluidColumns(10); } - .span11 { .fluidColumns(11); } - .span12 { .fluidColumns(12); } - } } -- cgit v1.2.3 From 8f448610a944efd134170f44e305ec6710bcff1a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 01:09:34 -0800 Subject: rename vertical-divider to divider-vertical, add more space around the divider --- less/responsive.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 2ec57b478..4a9fc6fb8 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -207,7 +207,7 @@ .navbar .nav > li > a { margin-bottom: 2px; } - .navbar .nav > .vertical-divider { + .navbar .nav > .divider-vertical { display: none; } // Nav and dropdown links in navbar -- cgit v1.2.3 From 2d40b07afc62ce9d899a290ab33222fd18287190 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 08:15:28 -0800 Subject: adding warning (orange) button, fix responsive navbar problem --- less/responsive.less | 1 + 1 file changed, 1 insertion(+) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 4a9fc6fb8..e9920251e 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -184,6 +184,7 @@ background-image: none; } .navbar .container { + width: auto; padding: 0; } // Account for brand name -- cgit v1.2.3 From 155047c3e6cfe589f1f244cdeb4e37244ab206ca Mon Sep 17 00:00:00 2001 From: Jacob Thornton Date: Mon, 30 Jan 2012 13:59:05 -0800 Subject: speed up topbar animation for responsive --- less/responsive.less | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index e9920251e..295625438 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -278,6 +278,7 @@ .nav-collapse { overflow: hidden; height: 0; + -webkit-transform: translate3d(0, 0, 0); // activate the GPU } } @@ -304,7 +305,7 @@ // Fluid grid #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%); - + // Input grid #inputGridSystem > .generate(12, 70px, 30px); -- cgit v1.2.3 From 1cff29c33f97fc40de1f8d582d7b1a3f4c7783c5 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 30 Jan 2012 23:02:24 -0800 Subject: restore a few commented out responsive items --- less/responsive.less | 1 - 1 file changed, 1 deletion(-) (limited to 'less/responsive.less') diff --git a/less/responsive.less b/less/responsive.less index 295625438..0f45c0985 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -181,7 +181,6 @@ } .navbar-fixed-top .navbar-inner { padding: 5px; - background-image: none; } .navbar .container { width: auto; -- cgit v1.2.3