.row {
margin-left: 0;
}
- .row > [class*="span"] {
+ .row > [class*="span"], .row-fluid > [class*="span"] {
float: none;
display: block;
width: auto;
}
}
@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;
.span11 {
width: 662px;
}
- .span12 {
+ .span12, .container {
width: 724px;
}
.offset1 {
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) {
}
}
@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 {
.span11 {
width: 1070px;
}
- .span12 {
+ .span12, .container {
width: 1170px;
}
.offset1 {
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;
}
}
margin-left: 20px;
}
.span1 {
- width: 59.99999999999999px;
+ width: 60px;
}
.span2 {
width: 140px;
.span11 {
width: 860px;
}
-.span12 {
+.span12, .container {
width: 940px;
}
.offset1 {
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;
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],
}
/* For input sizes, make them display block */
+.docs-input-sizes select,
.docs-input-sizes input[type=text] {
display: block;
margin-bottom: 9px;
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
<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>
</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">
<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>
<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>
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);
+
// 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);
// 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); }
+ }
+ }
}
margin-left: 0;
}
// Make all columns even
- .row > [class*="span"] {
+ .row > [class*="span"],
+ .row-fluid > [class*="span"] {
float: none;
display: block;
width: auto;
@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); }
- }
}
@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); }
- }
}
-// GRID SYSTEM VARIABLES
-// --------------------------------------------------
-
-@gridColumns: 12;
-@gridColumnWidth: 60px;
-@gridGutterWidth: 20px;
-@gridRowWidth: (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));
-@gridTotalWidth: @gridRowWidth;
-
-
-
// COMPONENT VARIABLES
// --------------------------------------------------
@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%;
+
projects / thirdparty / bootstrap.git / commitdiff
