diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index cb200386..f42b5b57 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 76e27d67..fb1d6269 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 { - margin-left: -30px; - } - .thumbnails > li { - margin-left: 30px; - } - .container { - width: 1170px; - } .row { margin-left: -30px; + *zoom: 1; + } + .row:before, .row:after { + display: table; + content: ""; + } + .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 9b6217fb..b6766f0a 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 1380b9e6..acbcc694 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 0406ff22..72eea8d6 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -62,6 +62,10 @@
  • Customize
    • +
  • +
  • + Examples +
    • @@ -1078,6 +1082,27 @@ For example, <code>section</code> should be wrapped as inline. + + +

    Use the same .span* classes from the grid system for input sizes.

    diff --git a/docs/components.html b/docs/components.html index 95c7c990..f62d84b9 100644 --- a/docs/components.html +++ b/docs/components.html @@ -62,6 +62,10 @@
  • Customize
    • +
  • +
  • + Examples +
    • diff --git a/docs/download.html b/docs/download.html index 832b07ce..da442ac6 100644 --- a/docs/download.html +++ b/docs/download.html @@ -62,6 +62,10 @@
  • Customize
    • +
  • +
  • + Examples +
    • diff --git a/docs/examples.html b/docs/examples.html index 7d79fc0a..63570c7c 100644 --- a/docs/examples.html +++ b/docs/examples.html @@ -62,6 +62,10 @@
  • Customize
    • +
  • +
  • + Examples +
    • diff --git a/docs/index.html b/docs/index.html index e20d08bc..055f3602 100644 --- a/docs/index.html +++ b/docs/index.html @@ -62,6 +62,10 @@
  • Customize
    • +
  • +
  • + Examples +
    • diff --git a/docs/javascript.html b/docs/javascript.html index eb4a175c..c4c3dd72 100644 --- a/docs/javascript.html +++ b/docs/javascript.html @@ -62,6 +62,10 @@
  • Customize
    • +
  • +
  • + Examples +
    • diff --git a/docs/less.html b/docs/less.html index 5935c912..1242b66a 100644 --- a/docs/less.html +++ b/docs/less.html @@ -62,6 +62,10 @@
  • Customize
    • +
  • +
  • + Examples +
    • diff --git a/docs/scaffolding.html b/docs/scaffolding.html index b9eb399f..5f3cd4f4 100644 --- a/docs/scaffolding.html +++ b/docs/scaffolding.html @@ -62,6 +62,10 @@
  • Customize
    • +
  • +
  • + Examples +
    • diff --git a/docs/templates/layout.mustache b/docs/templates/layout.mustache index 7c0ab655..b372820f 100644 --- a/docs/templates/layout.mustache +++ b/docs/templates/layout.mustache @@ -62,6 +62,10 @@
  • {{_i}}Customize{{/i}}
    • +
  • +
  • + {{_i}}Examples{{/i}} +
    • diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index b47bcf26..dedc201f 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1006,6 +1006,27 @@ + + +

    {{_i}}Use the same .span* classes from the grid system for input sizes.{{/i}}

    diff --git a/docs/upgrading.html b/docs/upgrading.html index d7ad30f5..f4f848c1 100644 --- a/docs/upgrading.html +++ b/docs/upgrading.html @@ -62,6 +62,10 @@
  • Customize
    • +
  • +
  • + Examples +
    • diff --git a/examples/fluid.html b/examples/fluid.html index 1cdfd656..738c5205 100644 --- a/examples/fluid.html +++ b/examples/fluid.html @@ -55,7 +55,7 @@
    -
    +
      @@ -84,7 +84,7 @@

      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.

      Learn more »

    -
    +

    Heading

    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.

    @@ -101,7 +101,7 @@

    View details »

    -
    +

    Heading

    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.

    diff --git a/less/forms.less b/less/forms.less index 9d94a64b..131f8af5 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 2ef767a4..4acb0a44 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 cba2670d..39e1d879 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 a1d4cf2c..72fa2138 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%); - // 12cols at 44px wide with 20px gutters - .container { - width: @siteWidth; - padding-left: 20px; - padding-right: 20px; - } + // Input grid + #inputGridSystem > .generate(12, 42px, 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 f09a88cd..d9d79f05 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%; +