diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip index c451d13a26..eccddc3636 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 a5ebd1144f..7b7a810d9b 100644 --- a/docs/assets/css/bootstrap-responsive.css +++ b/docs/assets/css/bootstrap-responsive.css @@ -213,42 +213,6 @@ .span12 { width: 724px; } - .span13 { - width: 786px; - } - .span14 { - width: 848px; - } - .span15 { - width: 910px; - } - .span16 { - width: 972px; - } - .span17 { - width: 1034px; - } - .span18 { - width: 1096px; - } - .span19 { - width: 1158px; - } - .span20 { - width: 1220px; - } - .span21 { - width: 1282px; - } - .span22 { - width: 1344px; - } - .span23 { - width: 1406px; - } - .span24 { - width: 1468px; - } .offset1 { margin-left: 82px; } @@ -285,39 +249,6 @@ .offset12 { margin-left: 764px; } - .offset13 { - margin-left: 826px; - } - .offset14 { - margin-left: 888px; - } - .offset15 { - margin-left: 950px; - } - .offset16 { - margin-left: 1012px; - } - .offset17 { - margin-left: 1074px; - } - .offset18 { - margin-left: 1136px; - } - .offset19 { - margin-left: 1198px; - } - .offset20 { - margin-left: 1260px; - } - .offset21 { - margin-left: 1322px; - } - .offset22 { - margin-left: 1384px; - } - .offset23 { - margin-left: 1446px; - } .row-fluid { width: 100%; *zoom: 1; @@ -372,42 +303,6 @@ .row-fluid > .span12 { width: 99.999999993%; } - .row-fluid > .span13 { - width: 108.563535904%; - } - .row-fluid > .span14 { - width: 117.12707181500001%; - } - .row-fluid > .span15 { - width: 125.690607726%; - } - .row-fluid > .span16 { - width: 134.254143637%; - } - .row-fluid > .span17 { - width: 142.817679548%; - } - .row-fluid > .span18 { - width: 151.381215459%; - } - .row-fluid > .span19 { - width: 159.94475137%; - } - .row-fluid > .span20 { - width: 168.508287281%; - } - .row-fluid > .span21 { - width: 177.071823192%; - } - .row-fluid > .span22 { - width: 185.635359103%; - } - .row-fluid > .span23 { - width: 194.19889501400002%; - } - .row-fluid > .span24 { - width: 202.762430925%; - } input.span1, textarea.span1, .uneditable-input.span1 { width: 32px; } @@ -444,42 +339,6 @@ input.span12, textarea.span12, .uneditable-input.span12 { width: 714px; } - input.span13, textarea.span13, .uneditable-input.span13 { - width: 776px; - } - input.span14, textarea.span14, .uneditable-input.span14 { - width: 838px; - } - input.span15, textarea.span15, .uneditable-input.span15 { - width: 900px; - } - input.span16, textarea.span16, .uneditable-input.span16 { - width: 962px; - } - input.span17, textarea.span17, .uneditable-input.span17 { - width: 1024px; - } - input.span18, textarea.span18, .uneditable-input.span18 { - width: 1086px; - } - input.span19, textarea.span19, .uneditable-input.span19 { - width: 1148px; - } - input.span20, textarea.span20, .uneditable-input.span20 { - width: 1210px; - } - input.span21, textarea.span21, .uneditable-input.span21 { - width: 1272px; - } - input.span22, textarea.span22, .uneditable-input.span22 { - width: 1334px; - } - input.span23, textarea.span23, .uneditable-input.span23 { - width: 1396px; - } - input.span24, textarea.span24, .uneditable-input.span24 { - width: 1458px; - } } @media (max-width: 979px) { body { @@ -646,42 +505,6 @@ .span12 { width: 1170px; } - .span13 { - width: 1270px; - } - .span14 { - width: 1370px; - } - .span15 { - width: 1470px; - } - .span16 { - width: 1570px; - } - .span17 { - width: 1670px; - } - .span18 { - width: 1770px; - } - .span19 { - width: 1870px; - } - .span20 { - width: 1970px; - } - .span21 { - width: 2070px; - } - .span22 { - width: 2170px; - } - .span23 { - width: 2270px; - } - .span24 { - width: 2370px; - } .offset1 { margin-left: 130px; } @@ -718,39 +541,6 @@ .offset12 { margin-left: 1230px; } - .offset13 { - margin-left: 1330px; - } - .offset14 { - margin-left: 1430px; - } - .offset15 { - margin-left: 1530px; - } - .offset16 { - margin-left: 1630px; - } - .offset17 { - margin-left: 1730px; - } - .offset18 { - margin-left: 1830px; - } - .offset19 { - margin-left: 1930px; - } - .offset20 { - margin-left: 2030px; - } - .offset21 { - margin-left: 2130px; - } - .offset22 { - margin-left: 2230px; - } - .offset23 { - margin-left: 2330px; - } .row-fluid { width: 100%; *zoom: 1; @@ -805,42 +595,6 @@ .row-fluid > .span12 { width: 100%; } - .row-fluid > .span13 { - width: 108.547008547%; - } - .row-fluid > .span14 { - width: 117.09401709400001%; - } - .row-fluid > .span15 { - width: 125.64102564100001%; - } - .row-fluid > .span16 { - width: 134.18803418800002%; - } - .row-fluid > .span17 { - width: 142.735042735%; - } - .row-fluid > .span18 { - width: 151.282051282%; - } - .row-fluid > .span19 { - width: 159.82905982900002%; - } - .row-fluid > .span20 { - width: 168.376068376%; - } - .row-fluid > .span21 { - width: 176.923076923%; - } - .row-fluid > .span22 { - width: 185.47008547000001%; - } - .row-fluid > .span23 { - width: 194.017094017%; - } - .row-fluid > .span24 { - width: 202.564102564%; - } input.span1, textarea.span1, .uneditable-input.span1 { width: 60px; } @@ -877,42 +631,6 @@ input.span12, textarea.span12, .uneditable-input.span12 { width: 1160px; } - input.span13, textarea.span13, .uneditable-input.span13 { - width: 1260px; - } - input.span14, textarea.span14, .uneditable-input.span14 { - width: 1360px; - } - input.span15, textarea.span15, .uneditable-input.span15 { - width: 1460px; - } - input.span16, textarea.span16, .uneditable-input.span16 { - width: 1560px; - } - input.span17, textarea.span17, .uneditable-input.span17 { - width: 1660px; - } - input.span18, textarea.span18, .uneditable-input.span18 { - width: 1760px; - } - input.span19, textarea.span19, .uneditable-input.span19 { - width: 1860px; - } - input.span20, textarea.span20, .uneditable-input.span20 { - width: 1960px; - } - input.span21, textarea.span21, .uneditable-input.span21 { - width: 2060px; - } - input.span22, textarea.span22, .uneditable-input.span22 { - width: 2160px; - } - input.span23, textarea.span23, .uneditable-input.span23 { - width: 2260px; - } - input.span24, textarea.span24, .uneditable-input.span24 { - width: 2360px; - } .thumbnails { margin-left: -30px; } diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index e9fb04f2dd..41eeea9fa4 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -173,42 +173,6 @@ a:hover { .span12 { width: 940px; } -.span13 { - width: 1020px; -} -.span14 { - width: 1100px; -} -.span15 { - width: 1180px; -} -.span16 { - width: 1260px; -} -.span17 { - width: 1340px; -} -.span18 { - width: 1420px; -} -.span19 { - width: 1500px; -} -.span20 { - width: 1580px; -} -.span21 { - width: 1660px; -} -.span22 { - width: 1740px; -} -.span23 { - width: 1820px; -} -.span24 { - width: 1900px; -} .offset1 { margin-left: 100px; } @@ -245,39 +209,6 @@ a:hover { .offset12 { margin-left: 980px; } -.offset13 { - margin-left: 1060px; -} -.offset14 { - margin-left: 1140px; -} -.offset15 { - margin-left: 1220px; -} -.offset16 { - margin-left: 1300px; -} -.offset17 { - margin-left: 1380px; -} -.offset18 { - margin-left: 1460px; -} -.offset19 { - margin-left: 1540px; -} -.offset20 { - margin-left: 1620px; -} -.offset21 { - margin-left: 1700px; -} -.offset22 { - margin-left: 1780px; -} -.offset23 { - margin-left: 1860px; -} .row-fluid { width: 100%; *zoom: 1; @@ -332,42 +263,6 @@ a:hover { .row-fluid > .span12 { width: 99.99999998999999%; } -.row-fluid > .span13 { - width: 108.510638287%; -} -.row-fluid > .span14 { - width: 117.02127658399999%; -} -.row-fluid > .span15 { - width: 125.531914881%; -} -.row-fluid > .span16 { - width: 134.042553178%; -} -.row-fluid > .span17 { - width: 142.553191475%; -} -.row-fluid > .span18 { - width: 151.063829772%; -} -.row-fluid > .span19 { - width: 159.57446806899998%; -} -.row-fluid > .span20 { - width: 168.085106366%; -} -.row-fluid > .span21 { - width: 176.595744663%; -} -.row-fluid > .span22 { - width: 185.10638296000002%; -} -.row-fluid > .span23 { - width: 193.617021257%; -} -.row-fluid > .span24 { - width: 202.127659554%; -} .container { margin-left: auto; margin-right: auto; @@ -867,42 +762,6 @@ input.span11, textarea.span11, .uneditable-input.span11 { input.span12, textarea.span12, .uneditable-input.span12 { width: 930px; } -input.span13, textarea.span13, .uneditable-input.span13 { - width: 1010px; -} -input.span14, textarea.span14, .uneditable-input.span14 { - width: 1090px; -} -input.span15, textarea.span15, .uneditable-input.span15 { - width: 1170px; -} -input.span16, textarea.span16, .uneditable-input.span16 { - width: 1250px; -} -input.span17, textarea.span17, .uneditable-input.span17 { - width: 1330px; -} -input.span18, textarea.span18, .uneditable-input.span18 { - width: 1410px; -} -input.span19, textarea.span19, .uneditable-input.span19 { - width: 1490px; -} -input.span20, textarea.span20, .uneditable-input.span20 { - width: 1570px; -} -input.span21, textarea.span21, .uneditable-input.span21 { - width: 1650px; -} -input.span22, textarea.span22, .uneditable-input.span22 { - width: 1730px; -} -input.span23, textarea.span23, .uneditable-input.span23 { - width: 1810px; -} -input.span24, textarea.span24, .uneditable-input.span24 { - width: 1890px; -} input[disabled], select[disabled], textarea[disabled], diff --git a/less/forms.less b/less/forms.less index bc89bdc3f4..9a0d3b849a 100644 --- a/less/forms.less +++ b/less/forms.less @@ -253,7 +253,7 @@ textarea[class*="span"], // GRID SIZING FOR INPUTS // ---------------------- -#inputGridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth); +#grid > .input (@gridColumnWidth, @gridGutterWidth); @@ -301,7 +301,7 @@ select:focus:required:invalid { border-color: #ee5f5b; &:focus { border-color: darken(#ee5f5b, 10%); - .box-shadow(0 0 6px lighten(#ee5f5b, 20%)); + .box-shadow(0 0 6px lighten(#ee5f5b, 20%)); } } @@ -410,7 +410,7 @@ select:focus:required:invalid { } .uneditable-input { border-left-color: #eee; - border-right-color: #ccc; + border-right-color: #ccc; } .add-on { margin-right: 0; diff --git a/less/grid.less b/less/grid.less index 4acb0a44ce..e62a960932 100644 --- a/less/grid.less +++ b/less/grid.less @@ -1,8 +1,5 @@ -// GRID SYSTEM -// ----------- - // Fixed (940px) -#gridSystem > .generate(@gridColumns, @gridColumnWidth, @gridGutterWidth); +#grid > .core(@gridColumnWidth, @gridGutterWidth); // Fluid (940px) -#fluidGridSystem > .generate(@gridColumns, @fluidGridColumnWidth, @fluidGridGutterWidth); +#grid > .fluid(@fluidGridColumnWidth, @fluidGridGutterWidth); \ No newline at end of file diff --git a/less/mixins.less b/less/mixins.less index 4561e98cb2..2a184aaba9 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -135,216 +135,6 @@ } - -// GRID SYSTEM -// -------------------------------------------------- - -// Site container -// ------------------------- -.container-fixed() { - margin-left: auto; - margin-right: auto; - .clearfix(); -} - -// 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); - } - - // Fixed container - .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @gridColumns); } - - // 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 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 12); } - .span13 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); } - .span14 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); } - .span15 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); } - .span16 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); } - .span17 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 17); } - .span18 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 18); } - .span19 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 19); } - .span20 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 20); } - .span21 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 21); } - .span22 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 22); } - .span23 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 23); } - .span24 { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 24); } - - // 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); } - .offset12 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 12); } - .offset13 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 13); } - .offset14 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 14); } - .offset15 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 15); } - .offset16 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 16); } - .offset17 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 17); } - .offset18 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 18); } - .offset19 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 19); } - .offset20 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 20); } - .offset21 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 21); } - .offset22 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 22); } - .offset23 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 23); } - } -} - -// 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); } - > .span13 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 13); } - > .span14 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 14); } - > .span15 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 15); } - > .span16 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 16); } - > .span17 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 17); } - > .span18 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 18); } - > .span19 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 19); } - > .span20 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 20); } - > .span21 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 21); } - > .span22 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 22); } - > .span23 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 23); } - > .span24 { #fluidGridSystem > .columns(@fluidGridGutterWidth, @fluidGridColumnWidth, 24); } - } - } -} - -// 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); } - &.span13 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 13); } - &.span14 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 14); } - &.span15 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 15); } - &.span16 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 16); } - &.span17 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 17); } - &.span18 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 18); } - &.span19 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 19); } - &.span20 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 20); } - &.span21 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 21); } - &.span22 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 22); } - &.span23 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 23); } - &.span24 { #inputGridSystem > .inputColumns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, 24); } - } - } -} - -// Table grid system -// ------------------------- -.tableColumns(@columnSpan: 1) { - float: none; // undo default grid column styles - width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells - margin-left: 0; // undo default grid column styles -} - - -// Make a Grid -// ------------------------- -// Use .makeRow and .makeColumn to assign semantic layouts grid system behavior -.makeRow() { - margin-left: @gridGutterWidth * -1; - .clearfix(); -} -.makeColumn(@columns: 1) { - float: left; - margin-left: @gridGutterWidth; - width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); -} - - - // Form field states (used in forms.less) // -------------------------------------------------- @@ -674,3 +464,129 @@ border-right: @arrowWidth solid @black; } } + +// Grid System +// ----------- + +.container-fixed() { + margin-left: auto; + margin-right: auto; + .clearfix(); +} + +.tableColumns(@columnSpan: 1) { + float: none; // undo default grid column styles + width: ((@gridColumnWidth) * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1)) - 16; // 16 is total padding on left and right of table cells + margin-left: 0; // undo default grid column styles +} + +#grid { + + .core (@gridColumnWidth, @gridGutterWidth) { + + .span (@columns) { + width: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)); + } + + .offset (@columns) { + margin-left: (@gridColumnWidth * @columns) + (@gridGutterWidth * (@columns - 1)) + (@gridGutterWidth * 2); + } + + .row { + margin-left: @gridGutterWidth * -1; + .clearfix(); + } + + [class*="span"] { + float: left; + margin-left: @gridGutterWidth; + } + + .container { .span(12); } + + .span1 { .span(1) } + .span2 { .span(2) } + .span3 { .span(3) } + .span4 { .span(4) } + .span5 { .span(5) } + .span6 { .span(6) } + .span7 { .span(7) } + .span8 { .span(8) } + .span9 { .span(9) } + .span10 { .span(10) } + .span11 { .span(11) } + .span12 { .span(12) } + + .offset1 { .offset(1) } + .offset2 { .offset(2) } + .offset3 { .offset(3) } + .offset4 { .offset(4) } + .offset5 { .offset(5) } + .offset6 { .offset(6) } + .offset7 { .offset(7) } + .offset8 { .offset(8) } + .offset9 { .offset(9) } + .offset10 { .offset(10) } + .offset11 { .offset(11) } + .offset12 { .offset(12) } + + } + + .fluid (@fluidGridColumnWidth, @fluidGridGutterWidth) { + + .span (@columns) { + width: 1% * (@fluidGridColumnWidth * @columns) + (@fluidGridGutterWidth * (@columns - 1)); + } + + .row-fluid { + width: 100%; + .clearfix(); + > [class*="span"] { + float: left; + margin-left: @fluidGridGutterWidth; + } + > [class*="span"]:first-child { + margin-left: 0; + } + > .span1 { .span(1) } + > .span2 { .span(2) } + > .span3 { .span(3) } + > .span4 { .span(4) } + > .span5 { .span(5) } + > .span6 { .span(6) } + > .span7 { .span(7) } + > .span8 { .span(8) } + > .span9 { .span(9) } + > .span10 { .span(10) } + > .span11 { .span(11) } + > .span12 { .span(12) } + } + + } + + .input(@gridColumnWidth, @gridGutterWidth) { + + .span(@columns) { + width: ((@gridColumnWidth) * @columns) + (@gridGutterWidth * (@columns - 1)) - 10; + } + + input, + textarea, + .uneditable-input { + &.span1 { .span(1) } + &.span2 { .span(2) } + &.span3 { .span(3) } + &.span4 { .span(4) } + &.span5 { .span(5) } + &.span6 { .span(6) } + &.span7 { .span(7) } + &.span8 { .span(8) } + &.span9 { .span(9) } + &.span10 { .span(10) } + &.span11 { .span(11) } + &.span12 { .span(12) } + } + + } + +} \ No newline at end of file diff --git a/less/responsive.less b/less/responsive.less index aacefe6cc3..7fa62cad9c 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -188,13 +188,13 @@ @media (min-width: 768px) and (max-width: 979px) { // Fixed grid - #gridSystem > .generate(@gridColumns, 42px, 20px); + #grid > .core(42px, 20px); // Fluid grid - #fluidGridSystem > .generate(@gridColumns, 5.801104972%, 2.762430939%); + #grid > .fluid(5.801104972%, 2.762430939%); // Input grid - #inputGridSystem > .generate(@gridColumns, 42px, 20px); + #grid > .input(42px, 20px); } @@ -340,13 +340,13 @@ @media (min-width: 1200px) { // Fixed grid - #gridSystem > .generate(@gridColumns, 70px, 30px); + #grid > .core(70px, 30px); // Fluid grid - #fluidGridSystem > .generate(@gridColumns, 5.982905983%, 2.564102564%); + #grid > .fluid(5.982905983%, 2.564102564%); // Input grid - #inputGridSystem > .generate(@gridColumns, 70px, 30px); + #grid > .input(70px, 30px); // Thumbnails .thumbnails {