From e7d2218b2043742f21c368d074d97a4bde275730 Mon Sep 17 00:00:00 2001
From: Mark Otto <mark.otto@twitter.com>
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) {
- .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 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 @@
<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 47857f1faf..5b05654d50 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 950ac2feb9..f1badc46d4 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 900df4c751..a1a33164fe 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 01fcd9e772..f15f6853cf 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); }
--
GitLab