From 134865ca411f00c789c3311b258fcb82b81cb000 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Thu, 28 Mar 2024 14:24:12 -0600 Subject: [PATCH 1/3] Add push and pull classes --- less/project/columns.less | 58 +++++++++++++++++++++++++++++++++++---- 1 file changed, 53 insertions(+), 5 deletions(-) diff --git a/less/project/columns.less b/less/project/columns.less index 49b0de9d..a837eb9c 100644 --- a/less/project/columns.less +++ b/less/project/columns.less @@ -1,3 +1,8 @@ +// Custom classes +// e.g. 'col-sm-8 col-md-10' +// min small viewport takes up 8 out of 12 columns +// min medium viewport takes up 10 columns +// if undefined element defaults to 100% width .make-columns(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) { @media (min-width: @media-query) { .boxmenu-item.col-@{size}-@{iteration} { @@ -11,13 +16,56 @@ .make-columns(@size, @media-query, @count, (@iteration + 1)); } -// Custom classes -// e.g. 'col-sm-8 col-md-10' -// min small viewport takes up 8 out of 12 columns -// min medium viewport takes up 10 columns -// if undefined element defaults to 100% width .make-columns(xs, 0, 12); // deprecated: backward compatibility only .make-columns(sm, @device-width-small, 12); .make-columns(md, @device-width-medium, 12); .make-columns(lg, @device-width-large, 12); .make-columns(xl, @device-width-xlarge, 12); + +// Custom push classes +// e.g. 'col-push-sm-2 col-push-md-1' +// min small viewport indents 2 columns from the left (or right for RTL) +// min medium viewport indents 1 column from the left (or right for RTL) +// if undefined element defaults to 100% width +.make-columns-push(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) { + @media (min-width: @media-query) { + .boxmenu-item.col-push-@{size}-@{iteration} { + margin-inline-start: (@iteration * 100% / @count); + } + .component.col-push-@{size}-@{iteration} { + margin-inline-start: (@iteration * 100% / @count); + } + } + + .make-columns-push(@size, @media-query, @count, (@iteration + 1)); +} + +.make-columns-push(xs, 0, 12); // deprecated: backward compatibility only +.make-columns-push(sm, @device-width-small, 12); +.make-columns-push(md, @device-width-medium, 12); +.make-columns-push(lg, @device-width-large, 12); +.make-columns-push(xl, @device-width-xlarge, 12); + +// Custom pull classes +// e.g. 'col-pull-sm-2 col-pull-md-1' +// min small viewport indents 2 columns from the right (or left for RTL) +// min medium viewport indents 1 column from the right (or left for RTL) +// if undefined element defaults to 100% width +.make-columns-pull(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) { + @media (min-width: @media-query) { + .boxmenu-item.col-pull-@{size}-@{iteration} { + margin-inline-end: (@iteration * 100% / @count); + } + .component.col-pull-@{size}-@{iteration} { + margin-inline-end: (@iteration * 100% / @count); + } + } + + .make-columns-pull(@size, @media-query, @count, (@iteration + 1)); +} + +.make-columns-pull(xs, 0, 12); // deprecated: backward compatibility only +.make-columns-pull(sm, @device-width-small, 12); +.make-columns-pull(md, @device-width-medium, 12); +.make-columns-pull(lg, @device-width-large, 12); +.make-columns-pull(xl, @device-width-xlarge, 12); From 6dbf0c1b6f4b09d5923d728a85551d2f848e2bcb Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Thu, 4 Apr 2024 10:11:57 -0600 Subject: [PATCH 2/3] Comments amend, remove xs push and pull classes --- less/project/columns.less | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/less/project/columns.less b/less/project/columns.less index a837eb9c..88142207 100644 --- a/less/project/columns.less +++ b/less/project/columns.less @@ -1,8 +1,8 @@ -// Custom classes +// Custom column classes // e.g. 'col-sm-8 col-md-10' // min small viewport takes up 8 out of 12 columns // min medium viewport takes up 10 columns -// if undefined element defaults to 100% width +// if undefined, element defaults to 100% width .make-columns(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) { @media (min-width: @media-query) { .boxmenu-item.col-@{size}-@{iteration} { @@ -22,11 +22,11 @@ .make-columns(lg, @device-width-large, 12); .make-columns(xl, @device-width-xlarge, 12); -// Custom push classes +// Custom column push classes // e.g. 'col-push-sm-2 col-push-md-1' // min small viewport indents 2 columns from the left (or right for RTL) // min medium viewport indents 1 column from the left (or right for RTL) -// if undefined element defaults to 100% width +// if undefined, element defaults to 100% width .make-columns-push(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) { @media (min-width: @media-query) { .boxmenu-item.col-push-@{size}-@{iteration} { @@ -40,17 +40,16 @@ .make-columns-push(@size, @media-query, @count, (@iteration + 1)); } -.make-columns-push(xs, 0, 12); // deprecated: backward compatibility only .make-columns-push(sm, @device-width-small, 12); .make-columns-push(md, @device-width-medium, 12); .make-columns-push(lg, @device-width-large, 12); .make-columns-push(xl, @device-width-xlarge, 12); -// Custom pull classes +// Custom column pull classes // e.g. 'col-pull-sm-2 col-pull-md-1' // min small viewport indents 2 columns from the right (or left for RTL) // min medium viewport indents 1 column from the right (or left for RTL) -// if undefined element defaults to 100% width +// if undefined, element defaults to 100% width .make-columns-pull(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) { @media (min-width: @media-query) { .boxmenu-item.col-pull-@{size}-@{iteration} { @@ -64,7 +63,6 @@ .make-columns-pull(@size, @media-query, @count, (@iteration + 1)); } -.make-columns-pull(xs, 0, 12); // deprecated: backward compatibility only .make-columns-pull(sm, @device-width-small, 12); .make-columns-pull(md, @device-width-medium, 12); .make-columns-pull(lg, @device-width-large, 12); From f6bcae4d4ededa6addb1db6758b7af63ac5db345 Mon Sep 17 00:00:00 2001 From: Brad Simpson Date: Tue, 7 May 2024 15:49:46 -0600 Subject: [PATCH 3/3] Rename classes to margin-start-* and margin-end-* --- less/project/columns.less | 42 +++++++++++++++++++-------------------- 1 file changed, 20 insertions(+), 22 deletions(-) diff --git a/less/project/columns.less b/less/project/columns.less index 88142207..e5d1c518 100644 --- a/less/project/columns.less +++ b/less/project/columns.less @@ -22,48 +22,46 @@ .make-columns(lg, @device-width-large, 12); .make-columns(xl, @device-width-xlarge, 12); -// Custom column push classes -// e.g. 'col-push-sm-2 col-push-md-1' +// Custom column starting margin classes +// e.g. 'margin-start-sm-2 margin-start-md-1' // min small viewport indents 2 columns from the left (or right for RTL) // min medium viewport indents 1 column from the left (or right for RTL) -// if undefined, element defaults to 100% width -.make-columns-push(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) { +.make-margin-start(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) { @media (min-width: @media-query) { - .boxmenu-item.col-push-@{size}-@{iteration} { + .boxmenu-item.margin-start-@{size}-@{iteration} { margin-inline-start: (@iteration * 100% / @count); } - .component.col-push-@{size}-@{iteration} { + .component.margin-start-@{size}-@{iteration} { margin-inline-start: (@iteration * 100% / @count); } } - .make-columns-push(@size, @media-query, @count, (@iteration + 1)); + .make-margin-start(@size, @media-query, @count, (@iteration + 1)); } -.make-columns-push(sm, @device-width-small, 12); -.make-columns-push(md, @device-width-medium, 12); -.make-columns-push(lg, @device-width-large, 12); -.make-columns-push(xl, @device-width-xlarge, 12); +.make-margin-start(sm, @device-width-small, 12); +.make-margin-start(md, @device-width-medium, 12); +.make-margin-start(lg, @device-width-large, 12); +.make-margin-start(xl, @device-width-xlarge, 12); -// Custom column pull classes -// e.g. 'col-pull-sm-2 col-pull-md-1' +// Custom column ending margin classes +// e.g. 'margin-end-sm-2 margin-end-md-1' // min small viewport indents 2 columns from the right (or left for RTL) // min medium viewport indents 1 column from the right (or left for RTL) -// if undefined, element defaults to 100% width -.make-columns-pull(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) { +.make-margin-end(@size, @media-query, @count, @iteration: 1) when (@count >= @iteration) { @media (min-width: @media-query) { - .boxmenu-item.col-pull-@{size}-@{iteration} { + .boxmenu-item.margin-end-@{size}-@{iteration} { margin-inline-end: (@iteration * 100% / @count); } - .component.col-pull-@{size}-@{iteration} { + .component.margin-end-@{size}-@{iteration} { margin-inline-end: (@iteration * 100% / @count); } } - .make-columns-pull(@size, @media-query, @count, (@iteration + 1)); + .make-margin-end(@size, @media-query, @count, (@iteration + 1)); } -.make-columns-pull(sm, @device-width-small, 12); -.make-columns-pull(md, @device-width-medium, 12); -.make-columns-pull(lg, @device-width-large, 12); -.make-columns-pull(xl, @device-width-xlarge, 12); +.make-margin-end(sm, @device-width-small, 12); +.make-margin-end(md, @device-width-medium, 12); +.make-margin-end(lg, @device-width-large, 12); +.make-margin-end(xl, @device-width-xlarge, 12);