Skip to content

B
bootstrap
Commit ae7f94ee authored by Mark Otto's avatar Mark Otto
Browse files
Options

overhaul grid mixins and variables, standardize fluid grid system and enable... 

overhaul grid mixins and variables, standardize fluid grid system and enable it across responsive layouts
parent 2ba1b01f
Show whitespace changes
Inline Side-by-side
Showing with 430 additions and 409 deletions
docs/assets/css/bootstrap-responsive.css
View file @ ae7f94ee
...@@ -83,7 +83,7 @@ ...@@ -83,7 +83,7 @@
.row { .row {
margin-left: 0; margin-left: 0;
} }
.row > [class*="span"] { .row > [class*="span"], .row-fluid > [class*="span"] {
float: none; float: none;
display: block; display: block;
width: auto; width: auto;
...@@ -91,10 +91,20 @@ ...@@ -91,10 +91,20 @@
} }
} }
@media (min-width: 768px) and (max-width: 940px) { @media (min-width: 768px) and (max-width: 940px) {
.container { .row {
width: 724px; margin-left: -20px;
padding-left: 20px; *zoom: 1;
padding-right: 20px; }
.row:before, .row:after {
display: table;
content: "";
}
.row:after {
clear: both;
}
[class*="span"] {
float: left;
margin-left: 20px;
} }
.span1 { .span1 {
width: 42px; width: 42px;
...@@ -129,7 +139,7 @@ ...@@ -129,7 +139,7 @@
.span11 { .span11 {
width: 662px; width: 662px;
} }
.span12 { .span12, .container {
width: 724px; width: 724px;
} }
.offset1 { .offset1 {
...@@ -166,48 +176,94 @@ ...@@ -166,48 +176,94 @@
margin-left: 702px; margin-left: 702px;
} }
.row-fluid { .row-fluid {
width: 102.76243093919337%; width: 100%;
margin-left: -2.762430939%; *zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
} }
.row-fluid [class*="span"] { .row-fluid [class*="span"] {
float: left; float: left;
margin-left: 2.762430939%; margin-left: 2.762430939%;
} }
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 { .row-fluid .span1 {
width: 5.6451612899588115%; width: 5.801104972%;
} }
.row-fluid .span2 { .row-fluid .span2 {
width: 13.978494622708812%; width: 14.364640883%;
} }
.row-fluid .span3 { .row-fluid .span3 {
width: 22.31182795545881%; width: 22.928176794%;
} }
.row-fluid .span4 { .row-fluid .span4 {
width: 30.64516128820881%; width: 31.491712705%;
} }
.row-fluid .span5 { .row-fluid .span5 {
width: 38.97849462095881%; width: 40.055248616%;
} }
.row-fluid .span6 { .row-fluid .span6 {
width: 47.311827953708814%; width: 48.618784527%;
} }
.row-fluid .span7 { .row-fluid .span7 {
width: 55.645161286458816%; width: 57.182320438000005%;
} }
.row-fluid .span8 { .row-fluid .span8 {
width: 63.97849461920882%; width: 65.74585634900001%;
} }
.row-fluid .span9 { .row-fluid .span9 {
width: 72.31182795195882%; width: 74.30939226%;
} }
.row-fluid .span10 { .row-fluid .span10 {
width: 80.64516128470882%; width: 82.87292817100001%;
} }
.row-fluid .span11 { .row-fluid .span11 {
width: 88.97849461745884%; width: 91.436464082%;
} }
.row-fluid .span12 { .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) { @media (max-width: 940px) {
...@@ -316,19 +372,19 @@ ...@@ -316,19 +372,19 @@
} }
} }
@media (min-width: 1200px) { @media (min-width: 1200px) {
.thumbnails { .row {
margin-left: -30px; margin-left: -30px;
*zoom: 1;
} }
.thumbnails > li { .row:before, .row:after {
margin-left: 30px; display: table;
content: "";
} }
.container { .row:after {
width: 1170px; clear: both;
}
.row {
margin-left: -30px;
} }
[class*="span"] { [class*="span"] {
float: left;
margin-left: 30px; margin-left: 30px;
} }
.span1 { .span1 {
...@@ -364,7 +420,7 @@ ...@@ -364,7 +420,7 @@
.span11 { .span11 {
width: 1070px; width: 1070px;
} }
.span12 { .span12, .container {
width: 1170px; width: 1170px;
} }
.offset1 { .offset1 {
...@@ -401,47 +457,99 @@ ...@@ -401,47 +457,99 @@
margin-left: 1130px; margin-left: 1130px;
} }
.row-fluid { .row-fluid {
width: 102.56143440326584%; width: 100%;
margin-left: -2.56%; *zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
} }
.row-fluid [class*="span"] { .row-fluid [class*="span"] {
float: left; float: left;
margin-left: 2.56%; margin-left: 2.564102564%;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
} }
.row-fluid .span1 { .row-fluid .span1 {
width: 5.832601732615312%; width: 5.982905983%;
} }
.row-fluid .span2 { .row-fluid .span2 {
width: 14.16126839928198%; width: 14.529914530000001%;
} }
.row-fluid .span3 { .row-fluid .span3 {
width: 22.489935065948643%; width: 23.076923077%;
} }
.row-fluid .span4 { .row-fluid .span4 {
width: 30.818601732615313%; width: 31.623931624%;
} }
.row-fluid .span5 { .row-fluid .span5 {
width: 39.14726839928198%; width: 40.170940171000005%;
} }
.row-fluid .span6 { .row-fluid .span6 {
width: 47.47593506594863%; width: 48.717948718%;
} }
.row-fluid .span7 { .row-fluid .span7 {
width: 55.8046017326153%; width: 57.264957265%;
} }
.row-fluid .span8 { .row-fluid .span8 {
width: 64.13326839928197%; width: 65.81196581200001%;
} }
.row-fluid .span9 { .row-fluid .span9 {
width: 72.46193506594864%; width: 74.358974359%;
} }
.row-fluid .span10 { .row-fluid .span10 {
width: 80.7906017326153%; width: 82.905982906%;
} }
.row-fluid .span11 { .row-fluid .span11 {
width: 89.11926839928198%; width: 91.45299145300001%;
} }
.row-fluid .span12 { .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;
} }
} }
docs/assets/css/bootstrap.css
View file @ ae7f94ee
...@@ -126,7 +126,7 @@ a:hover { ...@@ -126,7 +126,7 @@ a:hover {
margin-left: 20px; margin-left: 20px;
} }
.span1 { .span1 {
width: 59.99999999999999px; width: 60px;
} }
.span2 { .span2 {
width: 140px; width: 140px;
...@@ -158,7 +158,7 @@ a:hover { ...@@ -158,7 +158,7 @@ a:hover {
.span11 { .span11 {
width: 860px; width: 860px;
} }
.span12 { .span12, .container {
width: 940px; width: 940px;
} }
.offset1 { .offset1 {
...@@ -195,48 +195,58 @@ a:hover { ...@@ -195,48 +195,58 @@ a:hover {
margin-left: 900px; margin-left: 900px;
} }
.row-fluid { .row-fluid {
width: 102.12765957421277%; width: 100%;
margin-left: -2.127659574%; *zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
} }
.row-fluid [class*="span"] { .row-fluid [class*="span"] {
float: left; float: left;
margin-left: 2.127659574%; margin-left: 2.127659574%;
} }
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span1 { .row-fluid .span1 {
width: 6.249999999619791%; width: 6.382978723%;
} }
.row-fluid .span2 { .row-fluid .span2 {
width: 14.58333333211979%; width: 14.89361702%;
} }
.row-fluid .span3 { .row-fluid .span3 {
width: 22.91666666461979%; width: 23.404255317%;
} }
.row-fluid .span4 { .row-fluid .span4 {
width: 31.24999999711979%; width: 31.914893614%;
} }
.row-fluid .span5 { .row-fluid .span5 {
width: 39.58333332961979%; width: 40.425531911%;
} }
.row-fluid .span6 { .row-fluid .span6 {
width: 47.91666666211979%; width: 48.93617020799999%;
} }
.row-fluid .span7 { .row-fluid .span7 {
width: 56.24999999461979%; width: 57.446808505%;
} }
.row-fluid .span8 { .row-fluid .span8 {
width: 64.58333332711977%; width: 65.95744680199999%;
} }
.row-fluid .span9 { .row-fluid .span9 {
width: 72.91666665961978%; width: 74.468085099%;
} }
.row-fluid .span10 { .row-fluid .span10 {
width: 81.24999999211977%; width: 82.97872339599999%;
} }
.row-fluid .span11 { .row-fluid .span11 {
width: 89.58333332461977%; width: 91.489361693%;
} }
.row-fluid .span12 { .row-fluid .span12 {
width: 97.91666665711978%; width: 99.99999998999999%;
} }
.container { .container {
width: 940px; width: 940px;
...@@ -708,42 +718,6 @@ input.span11, textarea.span11, .uneditable-input.span11 { ...@@ -708,42 +718,6 @@ input.span11, textarea.span11, .uneditable-input.span11 {
input.span12, textarea.span12, .uneditable-input.span12 { input.span12, textarea.span12, .uneditable-input.span12 {
width: 930px; 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], input[disabled],
select[disabled], select[disabled],
textarea[disabled], textarea[disabled],
......
docs/assets/css/docs.css
View file @ ae7f94ee
...@@ -553,6 +553,7 @@ form.well { ...@@ -553,6 +553,7 @@ form.well {
} }
/* For input sizes, make them display block */ /* For input sizes, make them display block */
.docs-input-sizes select,
.docs-input-sizes input[type=text] { .docs-input-sizes input[type=text] {
display: block; display: block;
margin-bottom: 9px; margin-bottom: 9px;
......
docs/base-css.html
View file @ ae7f94ee
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
<li class=""> <li class="">
<a href="./download.html">Customize</a> <a href="./download.html">Customize</a>
</li> </li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
...@@ -1078,6 +1082,27 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline. ...@@ -1078,6 +1082,27 @@ For example, &lt;code&gt;section&lt;/code&gt; should be wrapped as inline.
<input class="span1" type="text" placeholder=".span1"> <input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2"> <input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3"> <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> <p class="help-block">Use the same <code>.span*</code> classes from the grid system for input sizes.</p>
</div> </div>
</div> </div>
......
docs/components.html
View file @ ae7f94ee
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
<li class=""> <li class="">
<a href="./download.html">Customize</a> <a href="./download.html">Customize</a>
</li> </li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/download.html
View file @ ae7f94ee
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
<li class="active"> <li class="active">
<a href="./download.html">Customize</a> <a href="./download.html">Customize</a>
</li> </li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/examples.html
View file @ ae7f94ee
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
<li class=""> <li class="">
<a href="./download.html">Customize</a> <a href="./download.html">Customize</a>
</li> </li>
<li class="vertical-divider"></li>
<li class="active">
<a href="./examples.html">Examples</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/index.html
View file @ ae7f94ee
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
<li class=""> <li class="">
<a href="./download.html">Customize</a> <a href="./download.html">Customize</a>
</li> </li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/javascript.html
View file @ ae7f94ee
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
<li class=""> <li class="">
<a href="./download.html">Customize</a> <a href="./download.html">Customize</a>
</li> </li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/less.html
View file @ ae7f94ee
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
<li class=""> <li class="">
<a href="./download.html">Customize</a> <a href="./download.html">Customize</a>
</li> </li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/scaffolding.html
View file @ ae7f94ee
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
<li class=""> <li class="">
<a href="./download.html">Customize</a> <a href="./download.html">Customize</a>
</li> </li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/templates/layout.mustache
View file @ ae7f94ee
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
<li class="{{download}}"> <li class="{{download}}">
<a href="./download.html">{{_i}}Customize{{/i}}</a> <a href="./download.html">{{_i}}Customize{{/i}}</a>
</li> </li>
<li class="vertical-divider"></li>
<li class="{{examples}}">
<a href="./examples.html">{{_i}}Examples{{/i}}</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
docs/templates/pages/base-css.mustache
View file @ ae7f94ee
...@@ -1006,6 +1006,27 @@ ...@@ -1006,6 +1006,27 @@
<input class="span1" type="text" placeholder=".span1"> <input class="span1" type="text" placeholder=".span1">
<input class="span2" type="text" placeholder=".span2"> <input class="span2" type="text" placeholder=".span2">
<input class="span3" type="text" placeholder=".span3"> <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> <p class="help-block">{{_i}}Use the same <code>.span*</code> classes from the grid system for input sizes.{{/i}}</p>
</div> </div>
</div> </div>
......
docs/upgrading.html
View file @ ae7f94ee
...@@ -62,6 +62,10 @@ ...@@ -62,6 +62,10 @@
<li class=""> <li class="">
<a href="./download.html">Customize</a> <a href="./download.html">Customize</a>
</li> </li>
<li class="vertical-divider"></li>
<li class="">
<a href="./examples.html">Examples</a>
</li>
</ul> </ul>
</div> </div>
</div> </div>
......
examples/fluid.html
View file @ ae7f94ee
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
</div> </div>
<div class="container-fluid"> <div class="container-fluid">
<div class="row row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span3">
<div class="well sidebar-nav"> <div class="well sidebar-nav">
<ul class="nav list"> <ul class="nav list">
...@@ -84,7 +84,7 @@ ...@@ -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>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 &raquo;</a></p> <p><a class="btn primary large">Learn more &raquo;</a></p>
</div> </div>
<div class="row row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span4">
<h2>Heading</h2> <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> <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 @@ ...@@ -101,7 +101,7 @@
<p><a class="btn" href="#">View details &raquo;</a></p> <p><a class="btn" href="#">View details &raquo;</a></p>
</div><!--/span--> </div><!--/span-->
</div><!--/row--> </div><!--/row-->
<div class="row row-fluid"> <div class="row-fluid">
<div class="span4"> <div class="span4">
<h2>Heading</h2> <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> <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>
......
less/forms.less
View file @ ae7f94ee
...@@ -229,45 +229,13 @@ textarea[class*="span"], ...@@ -229,45 +229,13 @@ textarea[class*="span"],
margin-left: 0; 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; // GRID SIZING FOR INPUTS
} // ----------------------
input,
textarea, #inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
.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); }
}
......
less/grid.less
View file @ ae7f94ee
// GRID SYSTEM // GRID SYSTEM
// ----------- // -----------
// Fixed (940px)
#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth);
// Grid rows and columns // Fluid (940px)
// --------------------- #fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth);
.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); }
}
less/mixins.less
View file @ ae7f94ee
...@@ -133,25 +133,135 @@ ...@@ -133,25 +133,135 @@
// Site container // Site container
// ------------------------- // -------------------------
.container-fixed() { .container-fixed() {
width: @gridTotalWidth; width: @gridRowWidth;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
.clearfix(); .clearfix();
} }
// Columns and offseting mixins // Le grid system
// ---------------------------- // -------------------------
.columns(@columns: 1) { #gridSystem {
//width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); // Setup the mixins to be used
width: @gridTotalWidth * ((((@gridGutterWidth+@gridColumnWidth)*@columns)-@gridGutterWidth)/@gridRowWidth); .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @columns) {
} width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
.offset(@columns: 1) { }
.offset(@gridColumnWidth, @gridGutterWidth, @columns) {
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); 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(@gridGutterWidth) {
.gridColumn() {
float: left; float: left;
margin-left: @gridGutterWidth; 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); }
}
}
// 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); }
}
}
}
// 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); }
}
}
} }
......
less/responsive.less
View file @ ae7f94ee
...@@ -125,7 +125,8 @@ ...@@ -125,7 +125,8 @@
margin-left: 0; margin-left: 0;
} }
// Make all columns even // Make all columns even
.row > [class*="span"] { .row > [class*="span"],
.row-fluid > [class*="span"] {
float: none; float: none;
display: block; display: block;
width: auto; width: auto;
...@@ -140,90 +141,15 @@ ...@@ -140,90 +141,15 @@
@media (min-width: 768px) and (max-width: 940px) { @media (min-width: 768px) and (max-width: 940px) {
// Reset grid variables // Fixed grid
@gridColumns: 12; #gridSystem > .generate(12, 42px, 20px);
@gridColumnWidth: 42px;
@gridGutterWidth: 20px;
@siteWidth: 724px;
// Bring grid mixins to recalculate widths // Fluid grid
.columns(@columns: 1) { #fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%);
width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1));
} // Input grid
.offset(@columns: 1) { #inputGridSystem > .generate(12, 42px, 20px);
margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2);
}
// 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 @@ ...@@ -362,99 +288,21 @@
@media (min-width: 1200px) { @media (min-width: 1200px) {
// Reset grid variables // Fixed grid
@gridColumns: 12; #gridSystem > .generate(12, 70px, 30px);
@gridColumnWidth: 70px;
@gridGutterWidth: 30px; // Fluid grid
@siteWidth: 1170px; #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%);
// Input grid
#inputGridSystem > .generate(12, 70px, 30px);
// Thumbnails // Thumbnails
.thumbnails { .thumbnails {
margin-left: @gridGutterWidth * -1; margin-left: -30px;
} }
.thumbnails > li { .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); }
}
} }
less/variables.less
View file @ ae7f94ee
...@@ -40,17 +40,6 @@ ...@@ -40,17 +40,6 @@
// GRID SYSTEM VARIABLES
// --------------------------------------------------
@gridColumns: 12;
@gridColumnWidth: 60px;
@gridGutterWidth: 20px;
@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
@gridTotalWidth: @gridRowWidth;
// COMPONENT VARIABLES // COMPONENT VARIABLES
// -------------------------------------------------- // --------------------------------------------------
...@@ -94,3 +83,17 @@ ...@@ -94,3 +83,17 @@
@infoBorder: darken(spin(@infoBackground, -10), 7%); @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%;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment