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/responsive.less') 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 +++++++++++++++++++++++++++++++++++++++------- 1 file changed, 39 insertions(+), 7 deletions(-) (limited to 'lib/responsive.less') 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) { -- 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/responsive.less') 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 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/responsive.less') 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/responsive.less | 2 ++ 1 file changed, 2 insertions(+) (limited to 'lib/responsive.less') 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 -- cgit v1.2.3