From e7d2218b2043742f21c368d074d97a4bde275730 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 16 Oct 2011 23:04:31 -0700 Subject: [PATCH] few tweaks to responsive stuff, updated docs for grid system (still needs copy editing) --- bootstrap.css | 159 ++++++++++++++++--------------------- bootstrap.min.css | 29 ++++--- docs/assets/css/docs.css | 14 ++-- docs/index.html | 165 ++++++++++++++++++--------------------- lib/mixins.less | 9 ++- lib/patterns.less | 6 +- lib/responsive.less | 2 + lib/scaffolding.less | 5 +- 8 files changed, 177 insertions(+), 212 deletions(-) diff --git a/bootstrap.css b/bootstrap.css index 32ffc61205..89d55199e5 100644 --- a/bootstrap.css +++ b/bootstrap.css @@ -6,7 +6,7 @@ * http://www.apache.org/licenses/LICENSE-2.0 * * Designed and built with all the love in the world @twitter by @mdo and @fat. - * Date: Sun Oct 16 19:08:43 PDT 2011 + * Date: Sun Oct 16 23:04:03 PDT 2011 */ /* Reset.less * Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). @@ -260,6 +260,7 @@ a:hover { display: block; } .row { + margin-left: -20px; zoom: 1; } .row:before, .row:after { @@ -276,9 +277,6 @@ a:hover { float: left; margin-left: 20px; } -.row > [class*="span"]:first-child { - margin-left: 0; -} .span1 { width: 60px; } @@ -316,37 +314,37 @@ a:hover { width: 940px; } .offset1 { - margin-left: 80px; + margin-left: 100px; } .offset2 { - margin-left: 160px; + margin-left: 180px; } .offset3 { - margin-left: 240px; + margin-left: 260px; } .offset4 { - margin-left: 320px; + margin-left: 340px; } .offset5 { - margin-left: 400px; + margin-left: 420px; } .offset6 { - margin-left: 480px; + margin-left: 500px; } .offset7 { - margin-left: 560px; + margin-left: 580px; } .offset8 { - margin-left: 640px; + margin-left: 660px; } .offset9 { - margin-left: 720px; + margin-left: 740px; } .offset10 { - margin-left: 800px; + margin-left: 820px; } .offset11 { - margin-left: 880px; + margin-left: 900px; } /* Typography.less * Headings, body text, lists, code, and more for a versatile and durable typography system @@ -1550,14 +1548,14 @@ footer { border-top: 1px solid #eee; } .page-header { - margin-bottom: 17px; - border-bottom: 1px solid #ddd; + margin-bottom: 27px; + border-bottom: 1px solid #eee; -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); } .page-header h1 { - margin-bottom: 8px; + margin-bottom: 13.5px; } .btn.danger, .alert-message.danger, @@ -2379,83 +2377,60 @@ button.btn::-moz-focus-inner, input[type=submit].btn::-moz-focus-inner { margin-left: 768px; } } +/* +// 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(@columnSpan: 1) { + width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)); + } + .offset(@columnOffset: 1) { + margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth; + } + .container { - width: 1170px; + width: @siteWidth; } [class*="span"] { - margin-left: 30px; - } - .span1 { - width: 70px; - } - .span2 { - width: 170px; - } - .span3 { - width: 270px; - } - .span4 { - width: 370px; - } - .span5 { - width: 470px; - } - .span6 { - width: 570px; - } - .span7 { - width: 670px; - } - .span8 { - width: 770px; - } - .span9 { - width: 870px; - } - .span10 { - width: 970px; - } - .span11 { - width: 1070px; - } - .span12 { - width: 1170px; - } - .offset1 { - margin-left: 100px; - } - .offset2 { - margin-left: 200px; - } - .offset3 { - margin-left: 300px; - } - .offset4 { - margin-left: 400px; - } - .offset5 { - margin-left: 500px; - } - .offset6 { - margin-left: 600px; - } - .offset7 { - margin-left: 700px; - } - .offset8 { - margin-left: 800px; - } - .offset9 { - margin-left: 900px; - } - .offset10 { - margin-left: 1000px; - } - .offset11 { - margin-left: 1100px; - } - .offset12 { - margin-left: 1200px; + 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 diff --git a/bootstrap.min.css b/bootstrap.min.css index 6851a6cc2b..31d1699bed 100644 --- a/bootstrap.min.css +++ b/bootstrap.min.css @@ -36,10 +36,9 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .pull-left{float:left;} .hide{display:none;} .show{display:block;} -.row{zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} +.row{margin-left:-20px;zoom:1;}.row:before,.row:after{display:table;content:"";zoom:1;*display:inline;} .row:after{clear:both;} [class*="span"]{display:inline;float:left;margin-left:20px;} -.row>[class*="span"]:first-child{margin-left:0;} .span1{width:60px;} .span2{width:140px;} .span3{width:220px;} @@ -52,17 +51,17 @@ a{color:#0069d6;text-decoration:none;line-height:inherit;font-weight:inherit;}a: .span10{width:780px;} .span11{width:860px;} .span12{width:940px;} -.offset1{margin-left:80px;} -.offset2{margin-left:160px;} -.offset3{margin-left:240px;} -.offset4{margin-left:320px;} -.offset5{margin-left:400px;} -.offset6{margin-left:480px;} -.offset7{margin-left:560px;} -.offset8{margin-left:640px;} -.offset9{margin-left:720px;} -.offset10{margin-left:800px;} -.offset11{margin-left:880px;} +.offset1{margin-left:100px;} +.offset2{margin-left:180px;} +.offset3{margin-left:260px;} +.offset4{margin-left:340px;} +.offset5{margin-left:420px;} +.offset6{margin-left:500px;} +.offset7{margin-left:580px;} +.offset8{margin-left:660px;} +.offset9{margin-left:740px;} +.offset10{margin-left:820px;} +.offset11{margin-left:900px;} p{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:13px;line-height:18px;margin-bottom:9px;}p small{font-size:11px;color:#bfbfbf;} h1,h2,h3,h4,h5,h6{font-weight:bold;color:#404040;}h1 small,h2 small,h3 small,h4 small,h5 small,h6 small{color:#bfbfbf;} h1{margin-bottom:18px;font-size:30px;line-height:36px;}h1 small{font-size:18px;} @@ -242,7 +241,7 @@ table .headerSortUp.purple,table .headerSortDown.purple{background-color:#e2d5f0 .hero-unit{background-color:#f5f5f5;margin-bottom:30px;padding:60px;-webkit-border-radius:6px;-moz-border-radius:6px;border-radius:6px;}.hero-unit h1{margin-bottom:0;font-size:60px;line-height:1;letter-spacing:-1px;} .hero-unit p{font-size:18px;font-weight:200;line-height:27px;} footer{margin-top:17px;padding-top:17px;border-top:1px solid #eee;} -.page-header{margin-bottom:17px;border-bottom:1px solid #ddd;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:8px;} +.page-header{margin-bottom:27px;border-bottom:1px solid #eee;-webkit-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);box-shadow:0 1px 0 rgba(255, 255, 255, 0.5);}.page-header h1{margin-bottom:13.5px;} .btn.danger,.alert-message.danger,.btn.danger:hover,.alert-message.danger:hover,.btn.error,.alert-message.error,.btn.error:hover,.alert-message.error:hover,.btn.success,.alert-message.success,.btn.success:hover,.alert-message.success:hover,.btn.info,.alert-message.info,.btn.info:hover,.alert-message.info:hover{color:#ffffff;} .btn.danger,.alert-message.danger,.btn.error,.alert-message.error{background-color:#c43c35;background-image:-khtml-gradient(linear, left top, left bottom, from(#ee5f5b), to(#c43c35));background-image:-moz-linear-gradient(top, #ee5f5b, #c43c35);background-image:-ms-linear-gradient(top, #ee5f5b, #c43c35);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #ee5f5b), color-stop(100%, #c43c35));background-image:-webkit-linear-gradient(top, #ee5f5b, #c43c35);background-image:-o-linear-gradient(top, #ee5f5b, #c43c35);background-image:linear-gradient(top, #ee5f5b, #c43c35);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ee5f5b', endColorstr='#c43c35', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#c43c35 #c43c35 #882a25;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} .btn.success,.alert-message.success{background-color:#57a957;background-image:-khtml-gradient(linear, left top, left bottom, from(#62c462), to(#57a957));background-image:-moz-linear-gradient(top, #62c462, #57a957);background-image:-ms-linear-gradient(top, #62c462, #57a957);background-image:-webkit-gradient(linear, left top, left bottom, color-stop(0%, #62c462), color-stop(100%, #57a957));background-image:-webkit-linear-gradient(top, #62c462, #57a957);background-image:-o-linear-gradient(top, #62c462, #57a957);background-image:linear-gradient(top, #62c462, #57a957);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#62c462', endColorstr='#57a957', GradientType=0);text-shadow:0 -1px 0 rgba(0, 0, 0, 0.25);border-color:#57a957 #57a957 #3d773d;border-color:rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);} @@ -321,4 +320,4 @@ button.btn::-moz-focus-inner,input[type=submit].btn::-moz-focus-inner{padding:0; .media-grid li{display:inline;} .media-grid a{float:left;padding:4px;margin:0 0 20px 20px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);-moz-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);box-shadow:0 1px 1px rgba(0, 0, 0, 0.075);}.media-grid a img{display:block;} .media-grid a:hover{border-color:#0069d6;-webkit-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);-moz-box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);box-shadow:0 1px 4px rgba(0, 105, 214, 0.25);} -@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}}@media (min-width: 1210px){.container{width:1170px;} [class*="span"]{margin-left:30px;} .span1{width:70px;} .span2{width:170px;} .span3{width:270px;} .span4{width:370px;} .span5{width:470px;} .span6{width:570px;} .span7{width:670px;} .span8{width:770px;} .span9{width:870px;} .span10{width:970px;} .span11{width:1070px;} .span12{width:1170px;} .offset1{margin-left:100px;} .offset2{margin-left:200px;} .offset3{margin-left:300px;} .offset4{margin-left:400px;} .offset5{margin-left:500px;} .offset6{margin-left:600px;} .offset7{margin-left:700px;} .offset8{margin-left:800px;} .offset9{margin-left:900px;} .offset10{margin-left:1000px;} .offset11{margin-left:1100px;} .offset12{margin-left:1200px;}} +@media (max-width: 480px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;} .modal{width:auto;margin:0;} .form-horizontal .control-group>label{float:none;width:auto;padding-top:0;text-align:left;} .form-horizontal .controls{margin-left:0;} .form-horizontal .control-list{padding-top:0;} .form-horizontal .form-actions{padding-left:0;}}@media (min-width: 480px) and (max-width: 768px){.container{width:auto;padding:0 10px;} [class*="span"]{float:none;display:block;width:auto;margin:0;}}@media (min-width: 768px) and (max-width: 940px){.container{width:748px;} .span1{width:44px;} .span2{width:108px;} .span3{width:172px;} .span4{width:236px;} .span5{width:300px;} .span6{width:364px;} .span7{width:428px;} .span8{width:492px;} .span9{width:556px;} .span10{width:620px;} .span11{width:684px;} .span12{width:748px;} .offset1{margin-left:64px;} .offset2{margin-left:128px;} .offset3{margin-left:192px;} .offset4{margin-left:256px;} .offset5{margin-left:320px;} .offset6{margin-left:384px;} .offset7{margin-left:448px;} .offset8{margin-left:512px;} .offset9{margin-left:576px;} .offset10{margin-left:640px;} .offset11{margin-left:704px;} .offset12{margin-left:768px;}} diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index 7d36946dbb..300eb38f55 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -17,19 +17,16 @@ body { section { padding-top: 60px; } -section > .row { - margin-bottom: 10px; -} /* Tweak topbar brand link to be super sleek -------------------------------------------------- */ -.navbar .brand { +body > .navbar-fixed .brand { float: right; font-weight: bold; color: #000; text-shadow: 0 1px 0 rgba(255,255,255,.1); } -.navbar .brand:hover { +body > .navbar-fixed .brand:hover { text-decoration: none; } @@ -136,6 +133,9 @@ section > .row { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; + -webkit-box-shadow: inset 0 1px 0 rgba(0,0,0,.03); + -moz-box-shadow: inset 0 1px 0 rgba(0,0,0,.03); + box-shadow: inset 0 1px 0 rgba(0,0,0,.03); } .quick-links li { display: inline; @@ -171,10 +171,10 @@ section > .row { -------------------------------------------------- */ .show-grid { margin-top: 10px; - margin-bottom: 10px; + margin-bottom: 20px; } .show-grid [class*="span"] { - background: #eee; + background-color: #eee; text-align: center; -webkit-border-radius: 3px; -moz-border-radius: 3px; diff --git a/docs/index.html b/docs/index.html index 3bc72751e6..eeb0f4f0df 100644 --- a/docs/index.html +++ b/docs/index.html @@ -86,7 +86,7 @@

Feature highlights