From 00b7dff3595d340be61894a0674800f8ed02b4ab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 10 Sep 2011 21:05:23 -0700 Subject: overhaul docs CSS since it was scalable, converted docs mastheads and footers to classes and HTML5 elements, add masthead to js docs page but make it slate so it looks cool and stands out --- lib/forms.less | 47 ++++++++++--------- lib/scaffolding.less | 128 +++++++++++++++++++++++++-------------------------- lib/type.less | 2 +- 3 files changed, 90 insertions(+), 87 deletions(-) (limited to 'lib') diff --git a/lib/forms.less b/lib/forms.less index 2ac43177e..2333718e0 100644 --- a/lib/forms.less +++ b/lib/forms.less @@ -343,31 +343,34 @@ textarea[readonly] { display: block; padding: 0; width: 100%; - label { - display: block; - float: none; - width: auto; - padding: 0; - line-height: @baseline; - text-align: left; - white-space: normal; - strong { - color: @gray; - } - small { - font-size: @basefont - 2; - font-weight: normal; - } - } - ul.inputs-list { - margin-left: 25px; - margin-bottom: 10px; - padding-top: 0; + } + label { + display: block; + float: none; + width: auto; + padding: 0; + line-height: @baseline; + text-align: left; + white-space: normal; + strong { + color: @gray; } - &:first-child { - padding-top: 5px; + small { + font-size: @basefont - 2; + font-weight: normal; } } + .inputs-list { + margin-left: 25px; + margin-bottom: 10px; + padding-top: 0; + } + &:first-child { + padding-top: 6px; + } + li + li { + padding-top: 2px; + } input[type=radio], input[type=checkbox] { margin-bottom: 0; diff --git a/lib/scaffolding.less b/lib/scaffolding.less index fb50cb221..263087b06 100644 --- a/lib/scaffolding.less +++ b/lib/scaffolding.less @@ -4,69 +4,6 @@ * ------------------------------------------------------------------------------------------- */ -// GRID SYSTEM -// ----------- - -.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) - // Credit to @dhg for the idea - [class*="span"] { - .gridColumn(); - } - - // 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); } - .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); } - .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); } - - // 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; } -} - - // STRUCTURAL LAYOUT // ----------------- @@ -76,7 +13,7 @@ html, body { body { margin: 0; #font > .sans-serif(normal,@basefont,@baseline); - color: @gray; + color: @grayDark; } // Container (centered, fixed-width layouts) @@ -134,3 +71,66 @@ a { .pull-left { float: left; } + + +// GRID SYSTEM +// ----------- + +.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) + // Credit to @dhg for the idea + [class*="span"] { + .gridColumn(); + } + + // 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); } + .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); } + .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); } + + // 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; } +} \ No newline at end of file diff --git a/lib/type.less b/lib/type.less index 55ff80937..077ae9d8f 100644 --- a/lib/type.less +++ b/lib/type.less @@ -113,7 +113,7 @@ dl { // Horizontal rules hr { - margin: 0 0 19px; + margin: 20px 0 19px; border: 0; border-bottom: 1px solid #eee; } -- cgit v1.2.3