From 45cec4a6fa0145611dcc9ac4b4d6f56aa759e7e8 Mon Sep 17 00:00:00 2001 From: Emanuele Gaspari Date: Tue, 21 Feb 2012 19:07:55 +0100 Subject: [PATCH 1/2] added .span[13-24] and .offset[12-23] to support up to 24-columns layout --- less/mixins.less | 50 ++++++++++++++++++++++++++++++++++++++++++++++++ less/tables.less | 12 ++++++++++++ 2 files changed, 62 insertions(+) diff --git a/less/mixins.less b/less/mixins.less index d74ce73dfa..80bfdf9459 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -185,7 +185,21 @@ .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); } + .container { #gridSystem > .columns(@gridGutterWidth, @gridColumnWidth, @gridRowWidth, @gridColumns); } + // Offset column options .offset1 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 1); } .offset2 { #gridSystem > .offset(@gridColumnWidth, @gridGutterWidth, 2); } @@ -198,6 +212,18 @@ .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); } } } @@ -239,6 +265,18 @@ > .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); } } } } @@ -265,6 +303,18 @@ &.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); } } } } diff --git a/less/tables.less b/less/tables.less index 3a4066d715..089267d87f 100644 --- a/less/tables.less +++ b/less/tables.less @@ -147,4 +147,16 @@ table { .span10 { .tableColumns(10); } .span11 { .tableColumns(11); } .span12 { .tableColumns(12); } + .span13 { .tableColumns(13); } + .span14 { .tableColumns(14); } + .span15 { .tableColumns(15); } + .span16 { .tableColumns(16); } + .span17 { .tableColumns(17); } + .span18 { .tableColumns(18); } + .span19 { .tableColumns(19); } + .span20 { .tableColumns(20); } + .span21 { .tableColumns(21); } + .span22 { .tableColumns(22); } + .span23 { .tableColumns(23); } + .span24 { .tableColumns(24); } } From 1cfb3fd03a529847ec1023c873fe71fbc279bfc1 Mon Sep 17 00:00:00 2001 From: Emanuele Gaspari Date: Tue, 21 Feb 2012 19:19:15 +0100 Subject: [PATCH 2/2] substituted hard-coded number of columns (12) with @gridColumns --- less/responsive.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/less/responsive.less b/less/responsive.less index 8c39f088e7..41dcd247a0 100644 --- a/less/responsive.less +++ b/less/responsive.less @@ -157,13 +157,13 @@ @media (min-width: 768px) and (max-width: 979px) { // Fixed grid - #gridSystem > .generate(12, 42px, 20px); + #gridSystem > .generate(@gridColumns, 42px, 20px); // Fluid grid - #fluidGridSystem > .generate(12, 5.801104972%, 2.762430939%); + #fluidGridSystem > .generate(@gridColumns, 5.801104972%, 2.762430939%); // Input grid - #inputGridSystem > .generate(12, 42px, 20px); + #inputGridSystem > .generate(@gridColumns, 42px, 20px); } @@ -309,13 +309,13 @@ @media (min-width: 1200px) { // Fixed grid - #gridSystem > .generate(12, 70px, 30px); + #gridSystem > .generate(@gridColumns, 70px, 30px); // Fluid grid - #fluidGridSystem > .generate(12, 5.982905983%, 2.564102564%); + #fluidGridSystem > .generate(@gridColumns, 5.982905983%, 2.564102564%); // Input grid - #inputGridSystem > .generate(12, 70px, 30px); + #inputGridSystem > .generate(@gridColumns, 70px, 30px); // Thumbnails .thumbnails {