New: Add margin start and margin end column classes (fixes #504)

[swashbuck]

Fixes #504

New

• Adds new margin start and margin end column classes (e.g. margin-start-sm-2 and margin-end-md-1) for indenting components from the left or right.

Testing

Configure two single width components using the existing column classes and the new margin classes. For example, in the same block:

Single width Text component
Add classes col-md-5 margin-start-md-1. This makes the component 5 columns wide with a 1 column margin from the left at the medium breakpoint and higher.

Single width Graphic component
Add classes col-md-4 margin-end-md-1. This makes the component 4 columns wide with a 1 column margin from the right at the medium breakpoint and higher.

The result for the above would look something like the following (gray block background color and guidelines added for illustrative purposes):

The number of columns + starting/ending margins must add up to the total number of columns (or less) which is 12 unless redefined in the theme.

Additional work

The theme wiki should be updated with these new classes.

[guywillis]

Lovely work @swashbuck 👍

[guywillis]

👍

[oliverfoster]

Why calling them pull and push and not margin left and right?

columns, gutters, margins

• https://developer.apple.com/documentation/apple_news/layout
• https://coreui.io/react/docs/layout/columns/#margin-utilities
• https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
• https://getbootstrap.com/docs/5.0/layout/utilities/#margin-and-padding

[kirsty-hames]

Why calling them pull and push and not margin left and right?

columns, gutters, margins

• https://developer.apple.com/documentation/apple_news/layout
• https://coreui.io/react/docs/layout/columns/#margin-utilities
• https://m2.material.io/design/layout/responsive-layout-grid.html#columns-gutters-and-margins
• https://getbootstrap.com/docs/5.0/layout/utilities/#margin-and-padding

I'd agree. Perhaps margin start and margin end to align with the CSS?

[swashbuck]

Why calling them pull and push and not margin left and right?

@oliverfoster Since these classes can be used with RTL layouts, "left" and "right" would not work. As for "push" and "pull", these were the names that Bootstrap used for the same sort of utility class. So, my thought was that they would be familiar to developers who have used Bootstrap. However, they may be deprecated in the newest version(s).

I'd agree. Perhaps margin start and margin end to align with the CSS?

@kirsty-hames Yep, I'm fine with this if everyone else is? "Start" and "end" would make sense with both RTL and LTR. Something like this then?

margin-start-sm-2
margin-end-md-1

[swashbuck]

Yep, deprecated as of v4:
https://getbootstrap.com/docs/4.0/migration/#grid-system-1

Dropped push and pull modifier classes for the new flexbox-powered order classes. For example, instead of .col-8.push-4 and .col-4.pull-8, you’d use .col-8.order-2 and .col-4.order-1.

Of course, by no means do we need to follow Bootstrap's conventions.

[joe-allen-89]

👍

[swashbuck]

To do:

• Change class names to include "margin". For example: margin-start-sm-2 and margin-end-md-1
• Change CSS classes/mixins. .make-columns-pull .make-columns-push
• Update documentation and examples where necessary

[swashbuck]

Class names have been updated. Ready for re-review.

[cahirodoherty-learningpool]

👀

[github-actions]

🎉 This PR is included in version 9.18.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀