From 1583dd55e9f05275ee054884720dce2be8e2f07a Mon Sep 17 00:00:00 2001 From: Jeff Tickle Date: Thu, 1 Aug 2013 11:49:16 -0400 Subject: Added classes for lg-pull, lg-push, lg-offset, sm-pull, sm-push, sm-offset --- less/grid.less | 106 +++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 72 insertions(+), 34 deletions(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 12803f39a..dfaf4f970 100644 --- a/less/grid.less +++ b/less/grid.less @@ -125,29 +125,42 @@ .col-sm-12 { width: 100%; } // 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)); } + .col-sm-push-1 { left: percentage((1 / @grid-columns)); } + .col-sm-push-2 { left: percentage((2 / @grid-columns)); } + .col-sm-push-3 { left: percentage((3 / @grid-columns)); } + .col-sm-push-4 { left: percentage((4 / @grid-columns)); } + .col-sm-push-5 { left: percentage((5 / @grid-columns)); } + .col-sm-push-6 { left: percentage((6 / @grid-columns)); } + .col-sm-push-7 { left: percentage((7 / @grid-columns)); } + .col-sm-push-8 { left: percentage((8 / @grid-columns)); } + .col-sm-push-9 { left: percentage((9 / @grid-columns)); } + .col-sm-push-10 { left: percentage((10/ @grid-columns)); } + .col-sm-push-11 { left: percentage((11/ @grid-columns)); } + + .col-sm-pull-1 { right: percentage((1 / @grid-columns)); } + .col-sm-pull-2 { right: percentage((2 / @grid-columns)); } + .col-sm-pull-3 { right: percentage((3 / @grid-columns)); } + .col-sm-pull-4 { right: percentage((4 / @grid-columns)); } + .col-sm-pull-5 { right: percentage((5 / @grid-columns)); } + .col-sm-pull-6 { right: percentage((6 / @grid-columns)); } + .col-sm-pull-7 { right: percentage((7 / @grid-columns)); } + .col-sm-pull-8 { right: percentage((8 / @grid-columns)); } + .col-sm-pull-9 { right: percentage((9 / @grid-columns)); } + .col-sm-pull-10 { right: percentage((10/ @grid-columns)); } + .col-sm-pull-11 { right: percentage((11/ @grid-columns)); } + + // Offsets + .col-sm-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-sm-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-sm-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-sm-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-sm-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-sm-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-sm-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-sm-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-sm-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-sm-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-sm-offset-11 { margin-left: percentage((11/ @grid-columns)); } } // Medium and large device columns (desktop and up) @@ -182,18 +195,43 @@ .col-lg-11 { width: percentage((11/ @grid-columns)); } .col-lg-12 { width: 100%; } + // Push and pull columns for source order changes + .col-lg-push-1 { left: percentage((1 / @grid-columns)); } + .col-lg-push-2 { left: percentage((2 / @grid-columns)); } + .col-lg-push-3 { left: percentage((3 / @grid-columns)); } + .col-lg-push-4 { left: percentage((4 / @grid-columns)); } + .col-lg-push-5 { left: percentage((5 / @grid-columns)); } + .col-lg-push-6 { left: percentage((6 / @grid-columns)); } + .col-lg-push-7 { left: percentage((7 / @grid-columns)); } + .col-lg-push-8 { left: percentage((8 / @grid-columns)); } + .col-lg-push-9 { left: percentage((9 / @grid-columns)); } + .col-lg-push-10 { left: percentage((10/ @grid-columns)); } + .col-lg-push-11 { left: percentage((11/ @grid-columns)); } + + .col-lg-pull-1 { right: percentage((1 / @grid-columns)); } + .col-lg-pull-2 { right: percentage((2 / @grid-columns)); } + .col-lg-pull-3 { right: percentage((3 / @grid-columns)); } + .col-lg-pull-4 { right: percentage((4 / @grid-columns)); } + .col-lg-pull-5 { right: percentage((5 / @grid-columns)); } + .col-lg-pull-6 { right: percentage((6 / @grid-columns)); } + .col-lg-pull-7 { right: percentage((7 / @grid-columns)); } + .col-lg-pull-8 { right: percentage((8 / @grid-columns)); } + .col-lg-pull-9 { right: percentage((9 / @grid-columns)); } + .col-lg-pull-10 { right: percentage((10/ @grid-columns)); } + .col-lg-pull-11 { right: 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-lg-offset-1 { margin-left: percentage((1 / @grid-columns)); } + .col-lg-offset-2 { margin-left: percentage((2 / @grid-columns)); } + .col-lg-offset-3 { margin-left: percentage((3 / @grid-columns)); } + .col-lg-offset-4 { margin-left: percentage((4 / @grid-columns)); } + .col-lg-offset-5 { margin-left: percentage((5 / @grid-columns)); } + .col-lg-offset-6 { margin-left: percentage((6 / @grid-columns)); } + .col-lg-offset-7 { margin-left: percentage((7 / @grid-columns)); } + .col-lg-offset-8 { margin-left: percentage((8 / @grid-columns)); } + .col-lg-offset-9 { margin-left: percentage((9 / @grid-columns)); } + .col-lg-offset-10 { margin-left: percentage((10/ @grid-columns)); } + .col-lg-offset-11 { margin-left: percentage((11/ @grid-columns)); } } // Large desktops and up -- cgit v1.2.3 From 23ef8c0c209844dd8b92d2a5ac82daffa7bd2914 Mon Sep 17 00:00:00 2001 From: Chris Rebert Date: Sat, 3 Aug 2013 21:39:57 -0700 Subject: Greater standardization of sizing terminology In class names: * large => lg * small => sm * mini => xs ("Extra small") In screen size categories: * Tiny => Extra small --- less/grid.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index dfaf4f970..395a7947f 100644 --- a/less/grid.less +++ b/less/grid.less @@ -63,7 +63,7 @@ // Container and grid column sizing // -// Tiny device columns (smartphones) +// Extra small device columns (smartphones) .col-1, .col-2, .col-3, -- cgit v1.2.3 From db45a60cc86190a060f0baf0b3961cbc690f3a65 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 5 Aug 2013 20:55:30 -0700 Subject: Scope tablet classes to tablets range only Fixes #9128 --- less/grid.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'less/grid.less') diff --git a/less/grid.less b/less/grid.less index 395a7947f..5142feb65 100644 --- a/less/grid.less +++ b/less/grid.less @@ -92,7 +92,7 @@ .col-12 { width: 100%; } // Small device columns (phones to tablets) -@media (min-width: @screen-tablet) { +@media (min-width: @screen-tablet) and (max-width: @screen-tablet-max) { .container { max-width: @container-tablet; } -- cgit v1.2.3