From 2b088ef44e9476a6336487c65d42b74213cd2a19 Mon Sep 17 00:00:00 2001 From: Aristeides Stathopoulos Date: Mon, 27 May 2013 19:33:14 +0300 Subject: using screen-size variables for grids --- less/grid.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 82d2a355b..1be9dfd18 100644 --- a/less/grid.less +++ b/less/grid.less @@ -39,21 +39,21 @@ // Responsive: Tablets and up @media screen and (min-width: @screen-tablet) { .container { - max-width: 728px; + max-width: (@screen-tablet - 40); } } // Responsive: Desktops and up @media screen and (min-width: @screen-desktop) { .container { - max-width: 940px; + max-width: (@screen-desktop - 52); } } // Responsive: Large desktops and up @media screen and (min-width: @screen-large-desktop) { .container { - max-width: 1170px; + max-width: (@screen-large-desktop - @grid-gutter-width); } } -- cgit v1.2.3 From 6fda25b4c16df2d34d298b373a64ef6f41da7a5a Mon Sep 17 00:00:00 2001 From: Aristeides Stathopoulos Date: Mon, 27 May 2013 23:00:39 +0300 Subject: Adding variables for container sizes --- less/grid.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 1be9dfd18..6d5a8e345 100644 --- a/less/grid.less +++ b/less/grid.less @@ -39,21 +39,21 @@ // Responsive: Tablets and up @media screen and (min-width: @screen-tablet) { .container { - max-width: (@screen-tablet - 40); + max-width: @container-tablet; } } // Responsive: Desktops and up @media screen and (min-width: @screen-desktop) { .container { - max-width: (@screen-desktop - 52); + max-width: @container-desktop; } } // Responsive: Large desktops and up @media screen and (min-width: @screen-large-desktop) { .container { - max-width: (@screen-large-desktop - @grid-gutter-width); + max-width: @container-large-desktop; } } -- cgit v1.2.3 From 19d0726609f860d4a7f1c214965164084aaf8a5f Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Jun 2013 13:38:45 -0700 Subject: Grid updates MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Removed mixins for generating grid classes - Thus, we manually declare every grid class, from 1-11 (12th unit is excluded as that's the same as no grid columns) - No more need for `.col` base class (yay!) - Negative indent the rows at tablets and above once again (ugh, still working through this part) - Add support for `.col-md` for tablet-specific grid columns - Still need to figure out offsets, pushes, and pulls on other devices—right now only available on desktop --- less/grid.less | 113 +++++++++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 101 insertions(+), 12 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 6d5a8e345..23aa069e3 100644 --- a/less/grid.less +++ b/less/grid.less @@ -13,9 +13,29 @@ .make-row(); } - // Common styles for small and large grid columns -.col { +.col-1, +.col-2, +.col-3, +.col-4, +.col-5, +.col-6, +.col-7, +.col-8, +.col-9, +.col-10, +.col-11, +.col-lg-1, +.col-lg-2, +.col-lg-3, +.col-lg-4, +.col-lg-5, +.col-lg-6, +.col-lg-7, +.col-lg-8, +.col-lg-9, +.col-lg-10, +.col-lg-11 { position: relative; // Float and set width: 100%; for easy stacking on mobile devices float: left; @@ -27,14 +47,88 @@ padding-right: (@grid-gutter-width / 2); } -// Generate small grid classes first -.generate-grid-columns(@grid-columns); +// Grid column sizing + +// Small columns (phones and up) +.col-1 { width: (1 / @grid-columns); } +.col-2 { width: (2 / @grid-columns); } +.col-3 { width: (3 / @grid-columns); } +.col-4 { width: (4 / @grid-columns); } +.col-5 { width: (5 / @grid-columns); } +.col-6 { width: (6 / @grid-columns); } +.col-7 { width: (7 / @grid-columns); } +.col-8 { width: (8 / @grid-columns); } +.col-9 { width: (9 / @grid-columns); } +.col-10 { width: (10/ @grid-columns); } +.col-11 { width: (11/ @grid-columns); } -// Then generate the larger grid classes via media query -@media screen and (min-width: @screen-small) { - .generate-large-grid-columns(@grid-columns); +// Medium columns (tablets and up) +@media (min-width: @screen-tablet) { + .col-md-1 { width: (1 / @grid-columns); } + .col-md-2 { width: (2 / @grid-columns); } + .col-md-3 { width: (3 / @grid-columns); } + .col-md-4 { width: (4 / @grid-columns); } + .col-md-5 { width: (5 / @grid-columns); } + .col-md-6 { width: (6 / @grid-columns); } + .col-md-7 { width: (7 / @grid-columns); } + .col-md-8 { width: (8 / @grid-columns); } + .col-md-9 { width: (9 / @grid-columns); } + .col-md-10 { width: (10/ @grid-columns); } + .col-md-11 { width: (11/ @grid-columns); } } +@media (min-width: @screen-desktop) { + // Large columns (desktop and up) + .col-lg-1 { width: percentage(1 / @grid-columns); } + .col-lg-2 { width: percentage(2 / @grid-columns); } + .col-lg-3 { width: percentage(3 / @grid-columns); } + .col-lg-4 { width: percentage(4 / @grid-columns); } + .col-lg-5 { width: percentage(5 / @grid-columns); } + .col-lg-6 { width: percentage(6 / @grid-columns); } + .col-lg-7 { width: percentage(7 / @grid-columns); } + .col-lg-8 { width: percentage(8 / @grid-columns); } + .col-lg-9 { width: percentage(9 / @grid-columns); } + .col-lg-10 { width: percentage(10/ @grid-columns); } + .col-lg-11 { width: percentage(11/ @grid-columns); } + + // Offsets + .col-offset-1 { margin-left: percentage(1 / @grid-columns); } + .col-offset-2 { margin-left: percentage(2 / @grid-columns); } + .col-offset-3 { margin-left: percentage(3 / @grid-columns); } + .col-offset-4 { margin-left: percentage(4 / @grid-columns); } + .col-offset-5 { margin-left: percentage(5 / @grid-columns); } + .col-offset-6 { margin-left: percentage(6 / @grid-columns); } + .col-offset-7 { margin-left: percentage(7 / @grid-columns); } + .col-offset-8 { margin-left: percentage(8 / @grid-columns); } + .col-offset-9 { margin-left: percentage(9 / @grid-columns); } + .col-offset-10 { margin-left: percentage(10/ @grid-columns); } + .col-offset-11 { margin-left: percentage(11/ @grid-columns); } + + // Push and pull columns for source order changes + .col-push-1 { left: percentage(1 / @grid-columns); } + .col-push-2 { left: percentage(2 / @grid-columns); } + .col-push-3 { left: percentage(3 / @grid-columns); } + .col-push-4 { left: percentage(4 / @grid-columns); } + .col-push-5 { left: percentage(5 / @grid-columns); } + .col-push-6 { left: percentage(6 / @grid-columns); } + .col-push-7 { left: percentage(7 / @grid-columns); } + .col-push-8 { left: percentage(8 / @grid-columns); } + .col-push-9 { left: percentage(9 / @grid-columns); } + .col-push-10 { left: percentage(10/ @grid-columns); } + .col-push-11 { left: percentage(11/ @grid-columns); } + + .col-pull-1 { right: percentage(1 / @grid-columns); } + .col-pull-2 { right: percentage(2 / @grid-columns); } + .col-pull-3 { right: percentage(3 / @grid-columns); } + .col-pull-4 { right: percentage(4 / @grid-columns); } + .col-pull-5 { right: percentage(5 / @grid-columns); } + .col-pull-6 { right: percentage(6 / @grid-columns); } + .col-pull-7 { right: percentage(7 / @grid-columns); } + .col-pull-8 { right: percentage(8 / @grid-columns); } + .col-pull-9 { right: percentage(9 / @grid-columns); } + .col-pull-10 { right: percentage(10/ @grid-columns); } + .col-pull-11 { right: percentage(11/ @grid-columns); } +} // Responsive: Tablets and up @media screen and (min-width: @screen-tablet) { @@ -56,8 +150,3 @@ max-width: @container-large-desktop; } } - -// Reset utility classes due to specificity -/*[class*="col-span-"].pull-right { - float: right; -}*/ -- cgit v1.2.3 From 21441f129259b17c6112d923dc93d4fc4577e49b Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sun, 2 Jun 2013 15:33:42 -0700 Subject: Move the grid offset, push, and pull classes to be tablets-up instead of desktop-up --- less/grid.less | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 23aa069e3..82b7b60c8 100644 --- a/less/grid.less +++ b/less/grid.less @@ -75,21 +75,6 @@ .col-md-9 { width: (9 / @grid-columns); } .col-md-10 { width: (10/ @grid-columns); } .col-md-11 { width: (11/ @grid-columns); } -} - -@media (min-width: @screen-desktop) { - // Large columns (desktop and up) - .col-lg-1 { width: percentage(1 / @grid-columns); } - .col-lg-2 { width: percentage(2 / @grid-columns); } - .col-lg-3 { width: percentage(3 / @grid-columns); } - .col-lg-4 { width: percentage(4 / @grid-columns); } - .col-lg-5 { width: percentage(5 / @grid-columns); } - .col-lg-6 { width: percentage(6 / @grid-columns); } - .col-lg-7 { width: percentage(7 / @grid-columns); } - .col-lg-8 { width: percentage(8 / @grid-columns); } - .col-lg-9 { width: percentage(9 / @grid-columns); } - .col-lg-10 { width: percentage(10/ @grid-columns); } - .col-lg-11 { width: percentage(11/ @grid-columns); } // Offsets .col-offset-1 { margin-left: percentage(1 / @grid-columns); } @@ -130,6 +115,21 @@ .col-pull-11 { right: percentage(11/ @grid-columns); } } +@media (min-width: @screen-desktop) { + // Large columns (desktop and up) + .col-lg-1 { width: percentage(1 / @grid-columns); } + .col-lg-2 { width: percentage(2 / @grid-columns); } + .col-lg-3 { width: percentage(3 / @grid-columns); } + .col-lg-4 { width: percentage(4 / @grid-columns); } + .col-lg-5 { width: percentage(5 / @grid-columns); } + .col-lg-6 { width: percentage(6 / @grid-columns); } + .col-lg-7 { width: percentage(7 / @grid-columns); } + .col-lg-8 { width: percentage(8 / @grid-columns); } + .col-lg-9 { width: percentage(9 / @grid-columns); } + .col-lg-10 { width: percentage(10/ @grid-columns); } + .col-lg-11 { width: percentage(11/ @grid-columns); } +} + // Responsive: Tablets and up @media screen and (min-width: @screen-tablet) { .container { -- cgit v1.2.3 From a05f6d4cea03a61f35223eab697d3caa4dc9e24c Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 3 Jun 2013 11:58:38 -0700 Subject: fixes #8066: add missing % functions to grid less code --- less/grid.less | 44 ++++++++++++++++++++++---------------------- 1 file changed, 22 insertions(+), 22 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 82b7b60c8..d2b9a4e70 100644 --- a/less/grid.less +++ b/less/grid.less @@ -50,31 +50,31 @@ // Grid column sizing // Small columns (phones and up) -.col-1 { width: (1 / @grid-columns); } -.col-2 { width: (2 / @grid-columns); } -.col-3 { width: (3 / @grid-columns); } -.col-4 { width: (4 / @grid-columns); } -.col-5 { width: (5 / @grid-columns); } -.col-6 { width: (6 / @grid-columns); } -.col-7 { width: (7 / @grid-columns); } -.col-8 { width: (8 / @grid-columns); } -.col-9 { width: (9 / @grid-columns); } -.col-10 { width: (10/ @grid-columns); } -.col-11 { width: (11/ @grid-columns); } +.col-1 { width: percentage(1 / @grid-columns); } +.col-2 { width: percentage(2 / @grid-columns); } +.col-3 { width: percentage(3 / @grid-columns); } +.col-4 { width: percentage(4 / @grid-columns); } +.col-5 { width: percentage(5 / @grid-columns); } +.col-6 { width: percentage(6 / @grid-columns); } +.col-7 { width: percentage(7 / @grid-columns); } +.col-8 { width: percentage(8 / @grid-columns); } +.col-9 { width: percentage(9 / @grid-columns); } +.col-10 { width: percentage(10/ @grid-columns); } +.col-11 { width: percentage(11/ @grid-columns); } // Medium columns (tablets and up) @media (min-width: @screen-tablet) { - .col-md-1 { width: (1 / @grid-columns); } - .col-md-2 { width: (2 / @grid-columns); } - .col-md-3 { width: (3 / @grid-columns); } - .col-md-4 { width: (4 / @grid-columns); } - .col-md-5 { width: (5 / @grid-columns); } - .col-md-6 { width: (6 / @grid-columns); } - .col-md-7 { width: (7 / @grid-columns); } - .col-md-8 { width: (8 / @grid-columns); } - .col-md-9 { width: (9 / @grid-columns); } - .col-md-10 { width: (10/ @grid-columns); } - .col-md-11 { width: (11/ @grid-columns); } + .col-md-1 { width: percentage(1 / @grid-columns); } + .col-md-2 { width: percentage(2 / @grid-columns); } + .col-md-3 { width: percentage(3 / @grid-columns); } + .col-md-4 { width: percentage(4 / @grid-columns); } + .col-md-5 { width: percentage(5 / @grid-columns); } + .col-md-6 { width: percentage(6 / @grid-columns); } + .col-md-7 { width: percentage(7 / @grid-columns); } + .col-md-8 { width: percentage(8 / @grid-columns); } + .col-md-9 { width: percentage(9 / @grid-columns); } + .col-md-10 { width: percentage(10/ @grid-columns); } + .col-md-11 { width: percentage(11/ @grid-columns); } // Offsets .col-offset-1 { margin-left: percentage(1 / @grid-columns); } -- cgit v1.2.3 From 286955167a53862fdde84359ab3c21a1e4237627 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 3 Jun 2013 21:48:52 -0700 Subject: prep for less 1.4 with double parens in functions --- less/grid.less | 132 ++++++++++++++++++++++++++++----------------------------- 1 file changed, 66 insertions(+), 66 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index d2b9a4e70..d4320c418 100644 --- a/less/grid.less +++ b/less/grid.less @@ -50,84 +50,84 @@ // Grid column sizing // Small columns (phones and up) -.col-1 { width: percentage(1 / @grid-columns); } -.col-2 { width: percentage(2 / @grid-columns); } -.col-3 { width: percentage(3 / @grid-columns); } -.col-4 { width: percentage(4 / @grid-columns); } -.col-5 { width: percentage(5 / @grid-columns); } -.col-6 { width: percentage(6 / @grid-columns); } -.col-7 { width: percentage(7 / @grid-columns); } -.col-8 { width: percentage(8 / @grid-columns); } -.col-9 { width: percentage(9 / @grid-columns); } -.col-10 { width: percentage(10/ @grid-columns); } -.col-11 { width: percentage(11/ @grid-columns); } +.col-1 { width: percentage((1 / @grid-columns)); } +.col-2 { width: percentage((2 / @grid-columns)); } +.col-3 { width: percentage((3 / @grid-columns)); } +.col-4 { width: percentage((4 / @grid-columns)); } +.col-5 { width: percentage((5 / @grid-columns)); } +.col-6 { width: percentage((6 / @grid-columns)); } +.col-7 { width: percentage((7 / @grid-columns)); } +.col-8 { width: percentage((8 / @grid-columns)); } +.col-9 { width: percentage((9 / @grid-columns)); } +.col-10 { width: percentage((10/ @grid-columns)); } +.col-11 { width: percentage((11/ @grid-columns)); } // Medium columns (tablets and up) @media (min-width: @screen-tablet) { - .col-md-1 { width: percentage(1 / @grid-columns); } - .col-md-2 { width: percentage(2 / @grid-columns); } - .col-md-3 { width: percentage(3 / @grid-columns); } - .col-md-4 { width: percentage(4 / @grid-columns); } - .col-md-5 { width: percentage(5 / @grid-columns); } - .col-md-6 { width: percentage(6 / @grid-columns); } - .col-md-7 { width: percentage(7 / @grid-columns); } - .col-md-8 { width: percentage(8 / @grid-columns); } - .col-md-9 { width: percentage(9 / @grid-columns); } - .col-md-10 { width: percentage(10/ @grid-columns); } - .col-md-11 { width: percentage(11/ @grid-columns); } + .col-md-1 { width: percentage((1 / @grid-columns)); } + .col-md-2 { width: percentage((2 / @grid-columns)); } + .col-md-3 { width: percentage((3 / @grid-columns)); } + .col-md-4 { width: percentage((4 / @grid-columns)); } + .col-md-5 { width: percentage((5 / @grid-columns)); } + .col-md-6 { width: percentage((6 / @grid-columns)); } + .col-md-7 { width: percentage((7 / @grid-columns)); } + .col-md-8 { width: percentage((8 / @grid-columns)); } + .col-md-9 { width: percentage((9 / @grid-columns)); } + .col-md-10 { width: percentage((10/ @grid-columns)); } + .col-md-11 { width: percentage((11/ @grid-columns)); } // Offsets - .col-offset-1 { margin-left: percentage(1 / @grid-columns); } - .col-offset-2 { margin-left: percentage(2 / @grid-columns); } - .col-offset-3 { margin-left: percentage(3 / @grid-columns); } - .col-offset-4 { margin-left: percentage(4 / @grid-columns); } - .col-offset-5 { margin-left: percentage(5 / @grid-columns); } - .col-offset-6 { margin-left: percentage(6 / @grid-columns); } - .col-offset-7 { margin-left: percentage(7 / @grid-columns); } - .col-offset-8 { margin-left: percentage(8 / @grid-columns); } - .col-offset-9 { margin-left: percentage(9 / @grid-columns); } - .col-offset-10 { margin-left: percentage(10/ @grid-columns); } - .col-offset-11 { margin-left: percentage(11/ @grid-columns); } + .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-offset-11 { margin-left: percentage((11/ @grid-columns)); } // Push and pull columns for source order changes - .col-push-1 { left: percentage(1 / @grid-columns); } - .col-push-2 { left: percentage(2 / @grid-columns); } - .col-push-3 { left: percentage(3 / @grid-columns); } - .col-push-4 { left: percentage(4 / @grid-columns); } - .col-push-5 { left: percentage(5 / @grid-columns); } - .col-push-6 { left: percentage(6 / @grid-columns); } - .col-push-7 { left: percentage(7 / @grid-columns); } - .col-push-8 { left: percentage(8 / @grid-columns); } - .col-push-9 { left: percentage(9 / @grid-columns); } - .col-push-10 { left: percentage(10/ @grid-columns); } - .col-push-11 { left: percentage(11/ @grid-columns); } + .col-push-1 { left: percentage((1 / @grid-columns)); } + .col-push-2 { left: percentage((2 / @grid-columns)); } + .col-push-3 { left: percentage((3 / @grid-columns)); } + .col-push-4 { left: percentage((4 / @grid-columns)); } + .col-push-5 { left: percentage((5 / @grid-columns)); } + .col-push-6 { left: percentage((6 / @grid-columns)); } + .col-push-7 { left: percentage((7 / @grid-columns)); } + .col-push-8 { left: percentage((8 / @grid-columns)); } + .col-push-9 { left: percentage((9 / @grid-columns)); } + .col-push-10 { left: percentage((10/ @grid-columns)); } + .col-push-11 { left: percentage((11/ @grid-columns)); } - .col-pull-1 { right: percentage(1 / @grid-columns); } - .col-pull-2 { right: percentage(2 / @grid-columns); } - .col-pull-3 { right: percentage(3 / @grid-columns); } - .col-pull-4 { right: percentage(4 / @grid-columns); } - .col-pull-5 { right: percentage(5 / @grid-columns); } - .col-pull-6 { right: percentage(6 / @grid-columns); } - .col-pull-7 { right: percentage(7 / @grid-columns); } - .col-pull-8 { right: percentage(8 / @grid-columns); } - .col-pull-9 { right: percentage(9 / @grid-columns); } - .col-pull-10 { right: percentage(10/ @grid-columns); } - .col-pull-11 { right: percentage(11/ @grid-columns); } + .col-pull-1 { right: percentage((1 / @grid-columns)); } + .col-pull-2 { right: percentage((2 / @grid-columns)); } + .col-pull-3 { right: percentage((3 / @grid-columns)); } + .col-pull-4 { right: percentage((4 / @grid-columns)); } + .col-pull-5 { right: percentage((5 / @grid-columns)); } + .col-pull-6 { right: percentage((6 / @grid-columns)); } + .col-pull-7 { right: percentage((7 / @grid-columns)); } + .col-pull-8 { right: percentage((8 / @grid-columns)); } + .col-pull-9 { right: percentage((9 / @grid-columns)); } + .col-pull-10 { right: percentage((10/ @grid-columns)); } + .col-pull-11 { right: percentage((11/ @grid-columns)); } } @media (min-width: @screen-desktop) { // Large columns (desktop and up) - .col-lg-1 { width: percentage(1 / @grid-columns); } - .col-lg-2 { width: percentage(2 / @grid-columns); } - .col-lg-3 { width: percentage(3 / @grid-columns); } - .col-lg-4 { width: percentage(4 / @grid-columns); } - .col-lg-5 { width: percentage(5 / @grid-columns); } - .col-lg-6 { width: percentage(6 / @grid-columns); } - .col-lg-7 { width: percentage(7 / @grid-columns); } - .col-lg-8 { width: percentage(8 / @grid-columns); } - .col-lg-9 { width: percentage(9 / @grid-columns); } - .col-lg-10 { width: percentage(10/ @grid-columns); } - .col-lg-11 { width: percentage(11/ @grid-columns); } + .col-lg-1 { width: percentage((1 / @grid-columns)); } + .col-lg-2 { width: percentage((2 / @grid-columns)); } + .col-lg-3 { width: percentage((3 / @grid-columns)); } + .col-lg-4 { width: percentage((4 / @grid-columns)); } + .col-lg-5 { width: percentage((5 / @grid-columns)); } + .col-lg-6 { width: percentage((6 / @grid-columns)); } + .col-lg-7 { width: percentage((7 / @grid-columns)); } + .col-lg-8 { width: percentage((8 / @grid-columns)); } + .col-lg-9 { width: percentage((9 / @grid-columns)); } + .col-lg-10 { width: percentage((10/ @grid-columns)); } + .col-lg-11 { width: percentage((11/ @grid-columns)); } } // Responsive: Tablets and up -- cgit v1.2.3 From 45c5b4e45c1d6479801dc205e13b350e334ebcd0 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 3 Jun 2013 21:51:35 -0700 Subject: restore .col-*-12 classes for now --- less/grid.less | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index d4320c418..bb99dff7e 100644 --- a/less/grid.less +++ b/less/grid.less @@ -25,6 +25,7 @@ .col-9, .col-10, .col-11, +.col-12, .col-lg-1, .col-lg-2, .col-lg-3, @@ -35,7 +36,8 @@ .col-lg-8, .col-lg-9, .col-lg-10, -.col-lg-11 { +.col-lg-11, +.col-lg-12 { position: relative; // Float and set width: 100%; for easy stacking on mobile devices float: left; @@ -61,6 +63,7 @@ .col-9 { width: percentage((9 / @grid-columns)); } .col-10 { width: percentage((10/ @grid-columns)); } .col-11 { width: percentage((11/ @grid-columns)); } +.col-12 { width: 100%; } // Medium columns (tablets and up) @media (min-width: @screen-tablet) { @@ -75,6 +78,7 @@ .col-md-9 { width: percentage((9 / @grid-columns)); } .col-md-10 { width: percentage((10/ @grid-columns)); } .col-md-11 { width: percentage((11/ @grid-columns)); } + .col-md-12 { width: 100%; } // Offsets .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } @@ -128,6 +132,7 @@ .col-lg-9 { width: percentage((9 / @grid-columns)); } .col-lg-10 { width: percentage((10/ @grid-columns)); } .col-lg-11 { width: percentage((11/ @grid-columns)); } + .col-lg-12 { width: 100%; } } // Responsive: Tablets and up -- cgit v1.2.3 From 441bbe1998c790dad1c4d44c5f85e6360209eaac Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 8 Jun 2013 18:34:16 -0230 Subject: Another grid update * Update docs to include table of grid levels and behaviors * Change from .col-md to .col-sm to match existing size variables we use elsewhere * Keep .col-lg as-is though for simplicity as we won't likely add a fourth level of the grid * Combine responsive .container breakpoints with grid breakpoints in grid.less * Other misc docs updates --- less/grid.less | 73 +++++++++++++++++++++++++++++++++------------------------- 1 file changed, 41 insertions(+), 32 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index bb99dff7e..b97d1d5c4 100644 --- a/less/grid.less +++ b/less/grid.less @@ -26,6 +26,18 @@ .col-10, .col-11, .col-12, +.col-sm-1, +.col-sm-2, +.col-sm-3, +.col-sm-4, +.col-sm-5, +.col-sm-6, +.col-sm-7, +.col-sm-8, +.col-sm-9, +.col-sm-10, +.col-sm-11, +.col-sm-12, .col-lg-1, .col-lg-2, .col-lg-3, @@ -49,9 +61,13 @@ padding-right: (@grid-gutter-width / 2); } -// Grid column sizing -// Small columns (phones and up) + +// +// Container and grid column sizing +// + +// Tiny device columns (smartphones) .col-1 { width: percentage((1 / @grid-columns)); } .col-2 { width: percentage((2 / @grid-columns)); } .col-3 { width: percentage((3 / @grid-columns)); } @@ -65,20 +81,24 @@ .col-11 { width: percentage((11/ @grid-columns)); } .col-12 { width: 100%; } -// Medium columns (tablets and up) +// Small device columns (phones to tablets) @media (min-width: @screen-tablet) { - .col-md-1 { width: percentage((1 / @grid-columns)); } - .col-md-2 { width: percentage((2 / @grid-columns)); } - .col-md-3 { width: percentage((3 / @grid-columns)); } - .col-md-4 { width: percentage((4 / @grid-columns)); } - .col-md-5 { width: percentage((5 / @grid-columns)); } - .col-md-6 { width: percentage((6 / @grid-columns)); } - .col-md-7 { width: percentage((7 / @grid-columns)); } - .col-md-8 { width: percentage((8 / @grid-columns)); } - .col-md-9 { width: percentage((9 / @grid-columns)); } - .col-md-10 { width: percentage((10/ @grid-columns)); } - .col-md-11 { width: percentage((11/ @grid-columns)); } - .col-md-12 { width: 100%; } + .container { + max-width: @container-tablet; + } + + .col-sm-1 { width: percentage((1 / @grid-columns)); } + .col-sm-2 { width: percentage((2 / @grid-columns)); } + .col-sm-3 { width: percentage((3 / @grid-columns)); } + .col-sm-4 { width: percentage((4 / @grid-columns)); } + .col-sm-5 { width: percentage((5 / @grid-columns)); } + .col-sm-6 { width: percentage((6 / @grid-columns)); } + .col-sm-7 { width: percentage((7 / @grid-columns)); } + .col-sm-8 { width: percentage((8 / @grid-columns)); } + .col-sm-9 { width: percentage((9 / @grid-columns)); } + .col-sm-10 { width: percentage((10/ @grid-columns)); } + .col-sm-11 { width: percentage((11/ @grid-columns)); } + .col-sm-12 { width: 100%; } // Offsets .col-offset-1 { margin-left: percentage((1 / @grid-columns)); } @@ -119,8 +139,11 @@ .col-pull-11 { right: percentage((11/ @grid-columns)); } } +// Medium and large device columns (desktop and up) @media (min-width: @screen-desktop) { - // Large columns (desktop and up) + .container { + max-width: @container-desktop; + } .col-lg-1 { width: percentage((1 / @grid-columns)); } .col-lg-2 { width: percentage((2 / @grid-columns)); } .col-lg-3 { width: percentage((3 / @grid-columns)); } @@ -135,22 +158,8 @@ .col-lg-12 { width: 100%; } } -// Responsive: Tablets and up -@media screen and (min-width: @screen-tablet) { - .container { - max-width: @container-tablet; - } -} - -// Responsive: Desktops and up -@media screen and (min-width: @screen-desktop) { - .container { - max-width: @container-desktop; - } -} - -// Responsive: Large desktops and up -@media screen and (min-width: @screen-large-desktop) { +// Large desktops and up +@media (min-width: @screen-large-desktop) { .container { max-width: @container-large-desktop; } -- cgit v1.2.3