diff --git a/bootstrap.css b/bootstrap.css
index 32ffc612057bccf699c46c71aac1a2bd7761497c..89d55199e52f1984f192a6056fcb1af87be54d3b 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) {
- .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;
+
+ // 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));
}
- .offset10 {
- margin-left: 1000px;
+ .offset(@columnOffset: 1) {
+ margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
}
- .offset11 {
- margin-left: 1100px;
+
+ .container {
+ width: @siteWidth;
}
- .offset12 {
- margin-left: 1200px;
+ [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
diff --git a/bootstrap.min.css b/bootstrap.min.css
index 6851a6cc2b925a11df73b65353457c9db17f8aec..31d1699bed06e439d9cd326b45617c4e74db5462 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 7d36946dbbeec07e1e7748de7e4722f91d211d2c..300eb38f55f52f5f99eab238b76c7ab7b6a99dfa 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 3bc72751e60177d621c1442233d53bdb226538ff..eeb0f4f0dfab04d34fa9ee0e468368b7b41fcf41 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -86,7 +86,7 @@
<h4>Feature highlights</h4>
<ul>
<li><span>×</span> Built on LESS</li>
- <li><span>×</span> Complete styleguide</li>
+ <li><span>×</span> Complete styleguide docs</li>
<li><span>×</span> Fully responsive design</li>
<li><span>×</span> Small footprint (7kb gzipped)</li>
<li><span>×</span> Support for IE7 and up</li>
@@ -199,28 +199,10 @@
================================================== -->
<section id="grid-system">
<div class="page-header">
- <h1>Grid system <small>Rock the standard 940px or roll your own</small></h1>
+ <h1>Grid system <small>12 columns with a responsive twist</small></h1>
</div>
- <div class="row">
- <div class="span3">
- <h2>Default grid</h2>
- <p>The default grid system provided as part of Bootstrap is a 940px wide 16-column grid. It’s a flavor of the popular 960 grid system, but without the additional margin/padding on the left and right sides.</p>
- </div>
- <div class="span9">
- <h3>Example grid markup</h3>
- <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 16 foundational columns we defined as part of our grid system. See the examples below for more variations.</p>
-<pre class="prettyprint linenums">
-<div class="row">
- <div class="span6">
- ...
- </div>
- <div class="span10">
- ...
- </div>
-</div>
-</pre>
- </div>
- </div><!-- /row -->
+
+ <h2>Default 940px grid</h2>
<div class="row show-grid">
<div class="span1">1</div>
<div class="span1">1</div>
@@ -252,12 +234,28 @@
<div class="span12">12</div>
</div>
- <br>
+ <div class="row">
+ <div class="span4">
+ <p>The default grid system provided as part of Bootstrap is a <strong>940px-wide, 12-column grid</strong>.</p>
+ <p>It also has three responsive variations for various devices and resolutions: phone, tablet, and large widescreen desktops.</p>
+ </div>
+ <div class="span4">
+<pre class="prettyprint linenums">
+<div class="row">
+ <div class="span4">...</div>
+ <div class="span8">...</div>
+</div>
+</pre>
+ </div>
+ <div class="span4">
+ <p>As shown here, a basic layout can be created with two "columns," each spanning a number of the 12 foundational columns we defined as part of our grid system.</p>
+ </div>
+ </div><!-- /row -->
<h2>Offsetting columns</h2>
<div class="row show-grid">
<div class="span4">4</div>
- <div class="span8 offset4">8 offset 4</div>
+ <div class="span4 offset4">4 offset 4</div>
</div><!-- /row -->
<div class="row show-grid">
<div class="span3 offset3">3 offset 3</div>
@@ -269,37 +267,33 @@
<br>
+ <h2>Nesting columns</h2>
<div class="row">
- <div class="span3">
- <h2>Nesting columns</h2>
- <p>Nest your content if you must by creating a <code>.row</code> within an existing column.</p>
- </div>
- <div class="span9">
- <h4>Example of nested columns</h4>
+ <div class="span6">
+ <p>With the static (non-fluid) grid system in Bootstrap, nesting is easy. To nest your content, just add a new <code>.row</code> and set of <code>.span*</code> columns within an existing <code>.span*</code> column.</p>
+ <h4>Example</h4>
<div class="row show-grid">
- <div class="span9">
+ <div class="span6">
Level 1 of column
<div class="row show-grid">
- <div class="span4">
+ <div class="span3">
Level 2
</div>
- <div class="span5">
+ <div class="span3">
Level 2
</div>
</div>
</div>
</div>
+ </div>
+ <div class="span6">
<pre class="prettyprint linenums">
<div class="row">
<div class="span12">
Level 1 of column
<div class="row">
- <div class="span6">
- Level 2
- </div>
- <div class="span6">
- Level 2
- </div>
+ <div class="span6">Level 2</div>
+ <div class="span6">Level 2</div>
</div>
</div>
</div>
@@ -307,56 +301,53 @@
</div>
</div>
- <br>
-
+ <h2>Grid customization</h2>
+ <table class="zebra-striped">
+ <thead>
+ <tr>
+ <th>Variable</th>
+ <th>Default value</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>@gridColumns</code></td>
+ <td>16</td>
+ <td>The number of columns within the grid</td>
+ </tr>
+ <tr>
+ <td><code>@gridColumnWidth</code></td>
+ <td>40px</td>
+ <td>The width of each column within the grid</td>
+ </tr>
+ <tr>
+ <td><code>@gridGutterWidth</code></td>
+ <td>20px</td>
+ <td>The negative space between each column</td>
+ </tr>
+ <tr>
+ <td><code>@siteWidth</code></td>
+ <td><em>Computed sum of all columns and gutters</em></td>
+ <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
+ </tr>
+ </tbody>
+ </table>
<div class="row">
- <div class="span3">
- <h2>Roll your own grid</h2>
- <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system. With a bit of customization, you can modify the size of columns, their gutters, and the container they reside in.</p>
+ <div class="span4">
+ <h3>Variables in LESS</h3>
+ <p>Built into Bootstrap are a handful of variables for customizing the default 940px grid system, documented above. All variables for the grid are stored in mixins.less.</p>
</div>
- <div class="span9">
- <h3>Inside the grid</h3>
- <p>The variables needed to modify the grid system currently all reside in <code>preboot.less</code>.</p>
- <table class="zebra-striped">
- <thead>
- <tr>
- <th>Variable</th>
- <th>Default value</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><code>@gridColumns</code></td>
- <td>16</td>
- <td>The number of columns within the grid</td>
- </tr>
- <tr>
- <td><code>@gridColumnWidth</code></td>
- <td>40px</td>
- <td>The width of each column within the grid</td>
- </tr>
- <tr>
- <td><code>@gridGutterWidth</code></td>
- <td>20px</td>
- <td>The negative space between each column</td>
- </tr>
- <tr>
- <td><code>@siteWidth</code></td>
- <td><em>Computed sum of all columns and gutters</em></td>
- <td>We use some basic match to count the number of columns and gutters and set the width of the <code>.fixed-container()</code> mixin.</td>
- </tr>
- </tbody>
- </table>
- <h3>Now to customize</h3>
- <p>Modifying the grid means changing the three <code>@grid-*</code> variables and recompiling the Less files.</p>
- <p>Bootstrap comes equipped to handle a grid system with up to 24 columns; the default is just 16. Here's how your grid variables would look customized to a 24-column grid.</p>
- <pre class="prettyprint linenums">@gridColumns: 24;
-@gridColumnWidth: 20px;
-@gridGutterWidth: 20px;</pre>
- <p>Once recompiled, you'll be set!</p>
+ <div class="span4">
+ <h3>How to customize</h3>
+ <p>Modifying the grid means changing the three <code>@grid*</code> variables and recompiling Bootstrap. Change the grids in the preboot.less file and use one of the <a href="#compiling">four ways documented to recompile</a>.</p>
</div>
- </div>
+ <div class="span4">
+ <h3>Staying responsive</h3>
+ <p>Customization of the grid only works at the default level, the 940px grid. To maintain the responsive aspects of Bootstrap, you'll also have to customize the grids in responsive.less.</p>
+ </div>
+ </div><!-- /row -->
+
</section>
@@ -1928,7 +1919,7 @@ Lorem ipsum dolar sit amet illo error <a href="#" title="below">ipsum</a> verita
}
</pre>
- <h2>Compiling Less</h2>
+ <h2 id="compiling">Compiling Less</h2>
<p>After modifying the <code>.less</code> files in /lib/, you'll need to recompile them in order to regenerate the bootstrap-*.*.*.css and bootstrap-*.*.*.min.css files. If you're submitting a pull request to GitHub, you must always recompile.</p>
<h3>Ways to compile</h3>
<table class="zebra-striped">
diff --git a/lib/mixins.less b/lib/mixins.less
index 47857f1fafd304137387373690b94ae75a5657fc..5b05654d5021e93982b2e973c95d5be01448ec5d 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 950ac2feb90c9121d57e3b1b3f0e5f3a30e6547e..f1badc46d4299a75707a83845c847a8b0e62446c 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 900df4c751a8ffe09e0743133bc61daa7f502c48..a1a33164fe268e5237c536a21afbea5de8f3516d 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 01fcd9e7726c19c641ef5c3710593de79597e0d7..f15f6853cf86b82764450b724fc6bb5d9906b798 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); }