diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index cb200386a733e39d239b41a1f123396fb41b9616..f42b5b57bf0fd36bc42c84c1c518d2a04358b848 100644
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ
diff --git a/docs/assets/css/bootstrap-responsive.css b/docs/assets/css/bootstrap-responsive.css
index 76e27d67201fe99d25b156f2b898a166a68aa8ca..fb1d6269272d4da5399c0d6af11cd4973d3f34e1 100644
--- a/docs/assets/css/bootstrap-responsive.css
+++ b/docs/assets/css/bootstrap-responsive.css
@@ -83,7 +83,7 @@
.row {
margin-left: 0;
}
- .row > [class*="span"] {
+ .row > [class*="span"], .row-fluid > [class*="span"] {
float: none;
display: block;
width: auto;
@@ -91,10 +91,20 @@
}
}
@media (min-width: 768px) and (max-width: 940px) {
- .container {
- width: 724px;
- padding-left: 20px;
- padding-right: 20px;
+ .row {
+ margin-left: -20px;
+ *zoom: 1;
+ }
+ .row:before, .row:after {
+ display: table;
+ content: "";
+ }
+ .row:after {
+ clear: both;
+ }
+ [class*="span"] {
+ float: left;
+ margin-left: 20px;
}
.span1 {
width: 42px;
@@ -129,7 +139,7 @@
.span11 {
width: 662px;
}
- .span12 {
+ .span12, .container {
width: 724px;
}
.offset1 {
@@ -166,48 +176,94 @@
margin-left: 702px;
}
.row-fluid {
- width: 102.76243093919337%;
- margin-left: -2.762430939%;
+ width: 100%;
+ *zoom: 1;
+ }
+ .row-fluid:before, .row-fluid:after {
+ display: table;
+ content: "";
+ }
+ .row-fluid:after {
+ clear: both;
}
.row-fluid [class*="span"] {
float: left;
margin-left: 2.762430939%;
}
+ .row-fluid [class*="span"]:first-child {
+ margin-left: 0;
+ }
.row-fluid .span1 {
- width: 5.6451612899588115%;
+ width: 5.801104972%;
}
.row-fluid .span2 {
- width: 13.978494622708812%;
+ width: 14.364640883%;
}
.row-fluid .span3 {
- width: 22.31182795545881%;
+ width: 22.928176794%;
}
.row-fluid .span4 {
- width: 30.64516128820881%;
+ width: 31.491712705%;
}
.row-fluid .span5 {
- width: 38.97849462095881%;
+ width: 40.055248616%;
}
.row-fluid .span6 {
- width: 47.311827953708814%;
+ width: 48.618784527%;
}
.row-fluid .span7 {
- width: 55.645161286458816%;
+ width: 57.182320438000005%;
}
.row-fluid .span8 {
- width: 63.97849461920882%;
+ width: 65.74585634900001%;
}
.row-fluid .span9 {
- width: 72.31182795195882%;
+ width: 74.30939226%;
}
.row-fluid .span10 {
- width: 80.64516128470882%;
+ width: 82.87292817100001%;
}
.row-fluid .span11 {
- width: 88.97849461745884%;
+ width: 91.436464082%;
}
.row-fluid .span12 {
- width: 97.31182795020881%;
+ width: 99.999999993%;
+ }
+ input.span1, textarea.span1, .uneditable-input.span1 {
+ width: 32px;
+ }
+ input.span2, textarea.span2, .uneditable-input.span2 {
+ width: 94px;
+ }
+ input.span3, textarea.span3, .uneditable-input.span3 {
+ width: 156px;
+ }
+ input.span4, textarea.span4, .uneditable-input.span4 {
+ width: 218px;
+ }
+ input.span5, textarea.span5, .uneditable-input.span5 {
+ width: 280px;
+ }
+ input.span6, textarea.span6, .uneditable-input.span6 {
+ width: 342px;
+ }
+ input.span7, textarea.span7, .uneditable-input.span7 {
+ width: 404px;
+ }
+ input.span8, textarea.span8, .uneditable-input.span8 {
+ width: 466px;
+ }
+ input.span9, textarea.span9, .uneditable-input.span9 {
+ width: 528px;
+ }
+ input.span10, textarea.span10, .uneditable-input.span10 {
+ width: 590px;
+ }
+ input.span11, textarea.span11, .uneditable-input.span11 {
+ width: 652px;
+ }
+ input.span12, textarea.span12, .uneditable-input.span12 {
+ width: 714px;
}
}
@media (max-width: 940px) {
@@ -316,19 +372,19 @@
}
}
@media (min-width: 1200px) {
- .thumbnails {
+ .row {
margin-left: -30px;
+ *zoom: 1;
}
- .thumbnails > li {
- margin-left: 30px;
+ .row:before, .row:after {
+ display: table;
+ content: "";
}
- .container {
- width: 1170px;
- }
- .row {
- margin-left: -30px;
+ .row:after {
+ clear: both;
}
[class*="span"] {
+ float: left;
margin-left: 30px;
}
.span1 {
@@ -364,7 +420,7 @@
.span11 {
width: 1070px;
}
- .span12 {
+ .span12, .container {
width: 1170px;
}
.offset1 {
@@ -401,47 +457,99 @@
margin-left: 1130px;
}
.row-fluid {
- width: 102.56143440326584%;
- margin-left: -2.56%;
+ width: 100%;
+ *zoom: 1;
+ }
+ .row-fluid:before, .row-fluid:after {
+ display: table;
+ content: "";
+ }
+ .row-fluid:after {
+ clear: both;
}
.row-fluid [class*="span"] {
float: left;
- margin-left: 2.56%;
+ margin-left: 2.564102564%;
+ }
+ .row-fluid [class*="span"]:first-child {
+ margin-left: 0;
}
.row-fluid .span1 {
- width: 5.832601732615312%;
+ width: 5.982905983%;
}
.row-fluid .span2 {
- width: 14.16126839928198%;
+ width: 14.529914530000001%;
}
.row-fluid .span3 {
- width: 22.489935065948643%;
+ width: 23.076923077%;
}
.row-fluid .span4 {
- width: 30.818601732615313%;
+ width: 31.623931624%;
}
.row-fluid .span5 {
- width: 39.14726839928198%;
+ width: 40.170940171000005%;
}
.row-fluid .span6 {
- width: 47.47593506594863%;
+ width: 48.717948718%;
}
.row-fluid .span7 {
- width: 55.8046017326153%;
+ width: 57.264957265%;
}
.row-fluid .span8 {
- width: 64.13326839928197%;
+ width: 65.81196581200001%;
}
.row-fluid .span9 {
- width: 72.46193506594864%;
+ width: 74.358974359%;
}
.row-fluid .span10 {
- width: 80.7906017326153%;
+ width: 82.905982906%;
}
.row-fluid .span11 {
- width: 89.11926839928198%;
+ width: 91.45299145300001%;
}
.row-fluid .span12 {
- width: 97.44793506594864%;
+ width: 100%;
+ }
+ input.span1, textarea.span1, .uneditable-input.span1 {
+ width: 60px;
+ }
+ input.span2, textarea.span2, .uneditable-input.span2 {
+ width: 160px;
+ }
+ input.span3, textarea.span3, .uneditable-input.span3 {
+ width: 260px;
+ }
+ input.span4, textarea.span4, .uneditable-input.span4 {
+ width: 360px;
+ }
+ input.span5, textarea.span5, .uneditable-input.span5 {
+ width: 460px;
+ }
+ input.span6, textarea.span6, .uneditable-input.span6 {
+ width: 560px;
+ }
+ input.span7, textarea.span7, .uneditable-input.span7 {
+ width: 660px;
+ }
+ input.span8, textarea.span8, .uneditable-input.span8 {
+ width: 760px;
+ }
+ input.span9, textarea.span9, .uneditable-input.span9 {
+ width: 860px;
+ }
+ input.span10, textarea.span10, .uneditable-input.span10 {
+ width: 960px;
+ }
+ input.span11, textarea.span11, .uneditable-input.span11 {
+ width: 1060px;
+ }
+ input.span12, textarea.span12, .uneditable-input.span12 {
+ width: 1160px;
+ }
+ .thumbnails {
+ margin-left: -30px;
+ }
+ .thumbnails > li {
+ margin-left: 30px;
}
}
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 9b6217fbd48b471b26fa31c822b0e58147b5ddcd..b6766f0aaf8265cf134528c6a0916be15c9ac688 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -126,7 +126,7 @@ a:hover {
margin-left: 20px;
}
.span1 {
- width: 59.99999999999999px;
+ width: 60px;
}
.span2 {
width: 140px;
@@ -158,7 +158,7 @@ a:hover {
.span11 {
width: 860px;
}
-.span12 {
+.span12, .container {
width: 940px;
}
.offset1 {
@@ -195,48 +195,58 @@ a:hover {
margin-left: 900px;
}
.row-fluid {
- width: 102.12765957421277%;
- margin-left: -2.127659574%;
+ width: 100%;
+ *zoom: 1;
+}
+.row-fluid:before, .row-fluid:after {
+ display: table;
+ content: "";
+}
+.row-fluid:after {
+ clear: both;
}
.row-fluid [class*="span"] {
float: left;
margin-left: 2.127659574%;
}
+.row-fluid [class*="span"]:first-child {
+ margin-left: 0;
+}
.row-fluid .span1 {
- width: 6.249999999619791%;
+ width: 6.382978723%;
}
.row-fluid .span2 {
- width: 14.58333333211979%;
+ width: 14.89361702%;
}
.row-fluid .span3 {
- width: 22.91666666461979%;
+ width: 23.404255317%;
}
.row-fluid .span4 {
- width: 31.24999999711979%;
+ width: 31.914893614%;
}
.row-fluid .span5 {
- width: 39.58333332961979%;
+ width: 40.425531911%;
}
.row-fluid .span6 {
- width: 47.91666666211979%;
+ width: 48.93617020799999%;
}
.row-fluid .span7 {
- width: 56.24999999461979%;
+ width: 57.446808505%;
}
.row-fluid .span8 {
- width: 64.58333332711977%;
+ width: 65.95744680199999%;
}
.row-fluid .span9 {
- width: 72.91666665961978%;
+ width: 74.468085099%;
}
.row-fluid .span10 {
- width: 81.24999999211977%;
+ width: 82.97872339599999%;
}
.row-fluid .span11 {
- width: 89.58333332461977%;
+ width: 91.489361693%;
}
.row-fluid .span12 {
- width: 97.91666665711978%;
+ width: 99.99999998999999%;
}
.container {
width: 940px;
@@ -708,42 +718,6 @@ input.span11, textarea.span11, .uneditable-input.span11 {
input.span12, textarea.span12, .uneditable-input.span12 {
width: 930px;
}
-select.span1 {
- width: 70px;
-}
-select.span2 {
- width: 150px;
-}
-select.span3 {
- width: 230px;
-}
-select.span4 {
- width: 310px;
-}
-select.span5 {
- width: 390px;
-}
-select.span6 {
- width: 470px;
-}
-select.span7 {
- width: 550px;
-}
-select.span8 {
- width: 630px;
-}
-select.span9 {
- width: 710px;
-}
-select.span10 {
- width: 790px;
-}
-select.span11 {
- width: 870px;
-}
-select.span12 {
- width: 950px;
-}
input[disabled],
select[disabled],
textarea[disabled],
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index 1380b9e6c9499bd9c8b52db4a69bf51430035b16..acbcc694127e4e53707f498346721cd22cc87431 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -553,6 +553,7 @@ form.well {
}
/* For input sizes, make them display block */
+.docs-input-sizes select,
.docs-input-sizes input[type=text] {
display: block;
margin-bottom: 9px;
diff --git a/docs/base-css.html b/docs/base-css.html
index 0406ff229eb3a1e19620870059e09b2219d2f5f1..72eea8d671de00f78e7c364983d0b58ac1a6afa0 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
+ <li class="vertical-divider"></li>
+ <li class="">
+ <a href="./examples.html">Examples</a>
+ </li>
</ul>
</div>
</div>
@@ -1078,6 +1082,27 @@ For example, <code>section</code> should be wrapped as inline.
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
+ <select class="span1">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ <select class="span2">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ <select class="span3">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
<p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
</div>
</div>
diff --git a/docs/components.html b/docs/components.html
index 95c7c99078756d0c8f6757f01073fed79af24e33..f62d84b9a9eae227383ed569056468c66c0f84bb 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
+ <li class="vertical-divider"></li>
+ <li class="">
+ <a href="./examples.html">Examples</a>
+ </li>
</ul>
</div>
</div>
diff --git a/docs/download.html b/docs/download.html
index 832b07ce65dd8fec4c4116c3e00b024bcbed676a..da442ac62048bb0c91bd52715e101f4c439246af 100644
--- a/docs/download.html
+++ b/docs/download.html
@@ -62,6 +62,10 @@
<li class="active">
<a href="./download.html">Customize</a>
</li>
+ <li class="vertical-divider"></li>
+ <li class="">
+ <a href="./examples.html">Examples</a>
+ </li>
</ul>
</div>
</div>
diff --git a/docs/examples.html b/docs/examples.html
index 7d79fc0a0a344912ef8aaaa49334edc589baf445..63570c7cb0ef553508649af5f7060979d1c44fac 100644
--- a/docs/examples.html
+++ b/docs/examples.html
@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
+ <li class="vertical-divider"></li>
+ <li class="active">
+ <a href="./examples.html">Examples</a>
+ </li>
</ul>
</div>
</div>
diff --git a/docs/index.html b/docs/index.html
index e20d08bcdd6c598ba97398f3405d1fb74fc12fe7..055f36028c51867cbf7cc5b7a06c46518f524e48 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
+ <li class="vertical-divider"></li>
+ <li class="">
+ <a href="./examples.html">Examples</a>
+ </li>
</ul>
</div>
</div>
diff --git a/docs/javascript.html b/docs/javascript.html
index eb4a175c33553bbf4791b9d8af75b4cdcd22ba77..c4c3dd72a9615ae39f1a4ff0b4bbff008f1f71e1 100644
--- a/docs/javascript.html
+++ b/docs/javascript.html
@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
+ <li class="vertical-divider"></li>
+ <li class="">
+ <a href="./examples.html">Examples</a>
+ </li>
</ul>
</div>
</div>
diff --git a/docs/less.html b/docs/less.html
index 5935c9125979f175e2f428f4333f942c31feb1c0..1242b66a17511f4c2111667cfb558fae1a8210b7 100644
--- a/docs/less.html
+++ b/docs/less.html
@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
+ <li class="vertical-divider"></li>
+ <li class="">
+ <a href="./examples.html">Examples</a>
+ </li>
</ul>
</div>
</div>
diff --git a/docs/scaffolding.html b/docs/scaffolding.html
index b9eb399f9b1badb90acb83a520284da603f46a0c..5f3cd4f43f8ed600c18f943651b7cc87ae1067db 100644
--- a/docs/scaffolding.html
+++ b/docs/scaffolding.html
@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
+ <li class="vertical-divider"></li>
+ <li class="">
+ <a href="./examples.html">Examples</a>
+ </li>
</ul>
</div>
</div>
diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache
index 7c0ab655be12ab9647a49a8b2de3aa0acb8f0ca2..b372820fdabbbd2d69bb02120f6083010dfce464 100644
--- a/docs/templates/layout.mustache
+++ b/docs/templates/layout.mustache
@@ -62,6 +62,10 @@
<li class="{{download}}">
<a href="./download.html">{{_i}}Customize{{/i}}</a>
</li>
+ <li class="vertical-divider"></li>
+ <li class="{{examples}}">
+ <a href="./examples.html">{{_i}}Examples{{/i}}</a>
+ </li>
</ul>
</div>
</div>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index b47bcf265919a74154de0e4d80f7cb9799bd7f29..dedc201f3552ea525585e427b04c67800f045666 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1006,6 +1006,27 @@
<input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3">
+ <select class="span1">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ <select class="span2">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
+ <select class="span3">
+ <option>1</option>
+ <option>2</option>
+ <option>3</option>
+ <option>4</option>
+ <option>5</option>
+ </select>
<p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
</div>
</div>
diff --git a/docs/upgrading.html b/docs/upgrading.html
index d7ad30f561de2344e171b895e83dde1044727679..f4f848c111760323d41dcea52d013c921f3a7b7d 100644
--- a/docs/upgrading.html
+++ b/docs/upgrading.html
@@ -62,6 +62,10 @@
<li class="">
<a href="./download.html">Customize</a>
</li>
+ <li class="vertical-divider"></li>
+ <li class="">
+ <a href="./examples.html">Examples</a>
+ </li>
</ul>
</div>
</div>
diff --git a/examples/fluid.html b/examples/fluid.html
index 1cdfd6568f3f357efdf07c9dc737937f7086979a..738c5205812d70ddff76c44dd33a3ca0b9929442 100644
--- a/examples/fluid.html
+++ b/examples/fluid.html
@@ -55,7 +55,7 @@
</div>
<div class="container-fluid">
- <div class="row row-fluid">
+ <div class="row-fluid">
<div class="span3">
<div class="well sidebar-nav">
<ul class="nav list">
@@ -84,7 +84,7 @@
<p>This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
<p><a class="btn primary large">Learn more »</a></p>
</div>
- <div class="row row-fluid">
+ <div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
@@ -101,7 +101,7 @@
<p><a class="btn" href="#">View details »</a></p>
</div><!--/span-->
</div><!--/row-->
- <div class="row row-fluid">
+ <div class="row-fluid">
<div class="span4">
<h2>Heading</h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
diff --git a/less/forms.less b/less/forms.less
index 9d94a64b7ea285ccf3ed8bc25d4364051b0ba44f..131f8af5553bd0efbef19215a6c2f29cb24dfd24 100644
--- a/less/forms.less
+++ b/less/forms.less
@@ -229,45 +229,13 @@ textarea[class*="span"],
margin-left: 0;
}
-// This is a duplication of the main grid .columns() mixin, but subtracts 10px to account for input padding and border
-.inputColumns(@columnSpan: 1) {
- width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 10;
-}
-input,
-textarea,
-.uneditable-input {
- // Default columns
- &.span1 { .inputColumns(1); }
- &.span2 { .inputColumns(2); }
- &.span3 { .inputColumns(3); }
- &.span4 { .inputColumns(4); }
- &.span5 { .inputColumns(5); }
- &.span6 { .inputColumns(6); }
- &.span7 { .inputColumns(7); }
- &.span8 { .inputColumns(8); }
- &.span9 { .inputColumns(9); }
- &.span10 { .inputColumns(10); }
- &.span11 { .inputColumns(11); }
- &.span12 { .inputColumns(12); }
-}
-
-.selectColumns(@columnSpan: 1) {
- width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) + 10;
-}
-select {
- &.span1 { .selectColumns(1); }
- &.span2 { .selectColumns(2); }
- &.span3 { .selectColumns(3); }
- &.span4 { .selectColumns(4); }
- &.span5 { .selectColumns(5); }
- &.span6 { .selectColumns(6); }
- &.span7 { .selectColumns(7); }
- &.span8 { .selectColumns(8); }
- &.span9 { .selectColumns(9); }
- &.span10 { .selectColumns(10); }
- &.span11 { .selectColumns(11); }
- &.span12 { .selectColumns(12); }
-}
+
+
+// GRID SIZING FOR INPUTS
+// ----------------------
+
+#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
+
diff --git a/less/grid.less b/less/grid.less
index 2ef767a4a7374c4fdc9f1afc8fafe0d8e561080d..4acb0a44ce6b5766390144f6e92ad65fee571082 100644
--- a/less/grid.less
+++ b/less/grid.less
@@ -1,81 +1,8 @@
// GRID SYSTEM
// -----------
+// Fixed (940px)
+#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
-// Grid rows and columns
-// ---------------------
-.row {
- margin-left: @gridGutterWidth * -1;
- .clearfix();
-}
-
-// Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
-[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); }
-
-// 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); }
-
-
-
-// FLUID GRID SYSTEM
-// -----------------
-// This is a very early and limited fluid grid system for now and will not be documented until it's refined in v2.1.
-
-.row-fluid {
- @gridColumnWidth: 6.382978723%;
- @gridGutterWidth: 2.127659574%;
-
- width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
- margin-left: 0 - @gridGutterWidth;
-
- // Redeclare the mixins
- .gridColumn() {
- float: left;
- margin-left: @gridGutterWidth;
- }
- [class*="span"] {
- .gridColumn();
- }
- .fluidColumns(@columns: 1) {
- width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
- }
- // Redeclare the columns
- .span1 { .fluidColumns(1); }
- .span2 { .fluidColumns(2); }
- .span3 { .fluidColumns(3); }
- .span4 { .fluidColumns(4); }
- .span5 { .fluidColumns(5); }
- .span6 { .fluidColumns(6); }
- .span7 { .fluidColumns(7); }
- .span8 { .fluidColumns(8); }
- .span9 { .fluidColumns(9); }
- .span10 { .fluidColumns(10); }
- .span11 { .fluidColumns(11); }
- .span12 { .fluidColumns(12); }
-}
+// Fluid (940px)
+#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);
diff --git a/less/mixins.less b/less/mixins.less
index cba2670db1db6fd80f75a824ae71a49fc1eae821..39e1d87967d5a039162eea8e318399053b3dfbfe 100644
--- a/less/mixins.less
+++ b/less/mixins.less
@@ -133,25 +133,135 @@
// Site container
// -------------------------
.container-fixed() {
- width: @gridTotalWidth;
+ width: @gridRowWidth;
margin-left: auto;
margin-right: auto;
.clearfix();
}
-// Columns and offseting mixins
-// ----------------------------
-.columns(@columns: 1) {
- //width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
- width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth);
+// Le grid system
+// -------------------------
+#gridSystem {
+ // Setup the mixins to be used
+ .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
+ width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
+ }
+ .offset(@gridColumnWidth, @gridGutterWidth, @columns) {
+ margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+ }
+ .gridColumn(@gridGutterWidth) {
+ float: left;
+ margin-left: @gridGutterWidth;
+ }
+ // Take these values and mixins, and make 'em do their thang
+ .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
+ // Row surrounds the columns
+ .row {
+ margin-left: @gridGutterWidth * -1;
+ .clearfix();
+ }
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+ [class*="span"] {
+ #gridSystem > .gridColumn(@gridGutterWidth);
+ }
+ // Default columns
+ .span1 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
+ .span2 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
+ .span3 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
+ .span4 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
+ .span5 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
+ .span6 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
+ .span7 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
+ .span8 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
+ .span9 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
+ .span10 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
+ .span11 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
+ .span12,
+ .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+ // Offset column options
+ .offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); }
+ .offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); }
+ .offset3 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 3); }
+ .offset4 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 4); }
+ .offset5 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 5); }
+ .offset6 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 6); }
+ .offset7 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 7); }
+ .offset8 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 8); }
+ .offset9 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 9); }
+ .offset10 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 10); }
+ .offset11 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 11); }
+ }
}
-.offset(@columns: 1) {
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
+
+// Fluid grid system
+// -------------------------
+#fluidGridSystem {
+ // Setup the mixins to be used
+ .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, @columns) {
+ width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1));
+ }
+ .gridColumn(@fluidGridGutterWidth) {
+ float: left;
+ margin-left: @fluidGridGutterWidth;
+ }
+ // Take these values and mixins, and make 'em do their thang
+ .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth) {
+ // Row surrounds the columns
+ .row-fluid {
+ width: 100%;
+ .clearfix();
+
+ // Find all .span# classes within .row and give them the necessary properties for grid columns (supported by all browsers back to IE7, thanks @dhg)
+ [class*="span"] {
+ #fluidGridSystem > .gridColumn(@fluidGridGutterWidth);
+ }
+ [class*="span"]:first-child {
+ margin-left: 0;
+ }
+ // Default columns
+ .span1 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 1); }
+ .span2 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 2); }
+ .span3 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 3); }
+ .span4 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 4); }
+ .span5 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 5); }
+ .span6 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 6); }
+ .span7 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 7); }
+ .span8 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 8); }
+ .span9 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 9); }
+ .span10 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 10); }
+ .span11 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 11); }
+ .span12 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 12); }
+ }
+ }
}
-// Necessary grid styles for every column to make them appear next to each other horizontally
-.gridColumn() {
- float: left;
- margin-left: @gridGutterWidth;
+
+
+
+
+// Input grid system
+// -------------------------
+#inputGridSystem {
+ .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
+ width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10;
+ }
+ .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth) {
+ input,
+ textarea,
+ .uneditable-input {
+ &.span1 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 1); }
+ &.span2 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 2); }
+ &.span3 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 3); }
+ &.span4 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 4); }
+ &.span5 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 5); }
+ &.span6 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 6); }
+ &.span7 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 7); }
+ &.span8 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 8); }
+ &.span9 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 9); }
+ &.span10 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 10); }
+ &.span11 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 11); }
+ &.span12 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); }
+ }
+ }
}
diff --git a/less/responsive.less b/less/responsive.less
index a1d4cf2c88219e22173832e819e6970212d612bc..72fa213848a6a3d1ebac06b8e906f3c69416d226 100644
--- a/less/responsive.less
+++ b/less/responsive.less
@@ -125,7 +125,8 @@
margin-left: 0;
}
// Make all columns even
- .row > [class*="span"] {
+ .row > [class*="span"],
+ .row-fluid > [class*="span"] {
float: none;
display: block;
width: auto;
@@ -140,90 +141,15 @@
@media (min-width: 768px) and (max-width: 940px) {
- // Reset grid variables
- @gridColumns: 12;
- @gridColumnWidth: 42px;
- @gridGutterWidth: 20px;
- @siteWidth: 724px;
+ // Fixed grid
+ #gridSystem > .generate(12, 42px, 20px);
- // Bring grid mixins to recalculate widths
- .columns(@columns: 1) {
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
- }
- .offset(@columns: 1) {
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
- }
+ // Fluid grid
+ #fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%);
+
+ // Input grid
+ #inputGridSystem > .generate(12, 42px, 20px);
- // 12cols at 44px wide with 20px gutters
- .container {
- width: @siteWidth;
- padding-left: 20px;
- padding-right: 20px;
- }
-
- // 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); }
-
- // FLUID GRID
- // ----------
- .row-fluid {
- @gridColumnWidth: 5.801104972%;
- @gridGutterWidth: 2.762430939%;
- @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
- @gridTotalWidth: @gridRowWidth;
-
- width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
- margin-left: 0 - @gridGutterWidth;
-
- // Redeclare the mixins
- .gridColumn() {
- float: left;
- margin-left: @gridGutterWidth;
- }
- [class*="span"] {
- .gridColumn();
- }
- .fluidColumns(@columns: 1) {
- width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
- }
- // Redeclare the columns
- .span1 { .fluidColumns(1); }
- .span2 { .fluidColumns(2); }
- .span3 { .fluidColumns(3); }
- .span4 { .fluidColumns(4); }
- .span5 { .fluidColumns(5); }
- .span6 { .fluidColumns(6); }
- .span7 { .fluidColumns(7); }
- .span8 { .fluidColumns(8); }
- .span9 { .fluidColumns(9); }
- .span10 { .fluidColumns(10); }
- .span11 { .fluidColumns(11); }
- .span12 { .fluidColumns(12); }
- }
}
@@ -362,99 +288,21 @@
@media (min-width: 1200px) {
- // Reset grid variables
- @gridColumns: 12;
- @gridColumnWidth: 70px;
- @gridGutterWidth: 30px;
- @siteWidth: 1170px;
+ // Fixed grid
+ #gridSystem > .generate(12, 70px, 30px);
+
+ // Fluid grid
+ #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%);
+
+ // Input grid
+ #inputGridSystem > .generate(12, 70px, 30px);
// Thumbnails
.thumbnails {
- margin-left: @gridGutterWidth * -1;
+ margin-left: -30px;
}
.thumbnails > li {
- margin-left: @gridGutterWidth;
+ margin-left: 30px;
}
- // Bring grid mixins to recalculate widths
- .columns(@columns: 1) {
- width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
- }
- .offset(@columns: 1) {
- margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
- }
- .container {
- width: @siteWidth;
- }
- .row {
- margin-left: @gridGutterWidth * -1;
- }
- [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); }
-
-
- // FLUID GRID
- // ----------
- .row-fluid {
- @gridColumnWidth: 5.982%;
- @gridGutterWidth: 2.56%;
- @gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
- @gridTotalWidth: @gridRowWidth;
-
- width: 100% * ((@gridGutterWidth + @gridRowWidth)/@gridRowWidth);
- margin-left: 0 - @gridGutterWidth;
-
- // Redeclare the mixins
- .gridColumn() {
- float: left;
- margin-left: @gridGutterWidth;
- }
- [class*="span"] {
- .gridColumn();
- }
- .fluidColumns(@columns: 1) {
- width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/(@gridRowWidth+@gridGutterWidth));
- }
- // Redeclare the columns
- .span1 { .fluidColumns(1); }
- .span2 { .fluidColumns(2); }
- .span3 { .fluidColumns(3); }
- .span4 { .fluidColumns(4); }
- .span5 { .fluidColumns(5); }
- .span6 { .fluidColumns(6); }
- .span7 { .fluidColumns(7); }
- .span8 { .fluidColumns(8); }
- .span9 { .fluidColumns(9); }
- .span10 { .fluidColumns(10); }
- .span11 { .fluidColumns(11); }
- .span12 { .fluidColumns(12); }
- }
}
diff --git a/less/variables.less b/less/variables.less
index f09a88cdb3d9bd40b8de5b8286ff40b56b3b5b57..d9d79f05c1b0e53a1acf40f7c8c040113cba622e 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -40,17 +40,6 @@
-// GRID SYSTEM VARIABLES
-// --------------------------------------------------
-
-@gridColumns: 12;
-@gridColumnWidth: 60px;
-@gridGutterWidth: 20px;
-@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-@gridTotalWidth: @gridRowWidth;
-
-
-
// COMPONENT VARIABLES
// --------------------------------------------------
@@ -94,3 +83,17 @@
@infoBorder: darken(spin(@infoBackground, -10), 7%);
+
+// GRID
+// --------------------------------------------------
+
+// Default 940px grid
+@gridColumns: 12;
+@gridColumnWidth: 60px;
+@gridGutterWidth: 20px;
+@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
+
+// Fluid grid
+@fluidGridColumnWidth: 6.382978723%;
+@fluidGridGutterWidth: 2.127659574%;
+