Spacing utilities
Halfmoon comes with responsive utility classes which can be used to set the margin and padding of elements.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Notation #
The class names for the spacing utilities come in the the following formats:
- .{property}{sides}-{size}
- .{property}{sides}-{breakpoint}-{size}
The {breakpoint} can be sm, md, lg, or xl. If the breakpoint is not provided, the element will be affected on all screen sizes (including extra small screens). On the other hand, if it is provided, the element will be affected only for that breakpoint and up.
Property
The {property} can be one of the following:
| {property} | Description |
|---|---|
| m | Sets the margin property |
| p | Sets the padding property |
Sides
The {sides} can be one of the following:
| {sides} | Description |
|---|---|
| Blank | Sets the margin or padding on all 4 sides of the element |
| t | Sets the margin-top or padding-top |
| b | Sets the margin-bottom or padding-bottom |
| l | Sets the margin-left or padding-left |
| r | Sets the margin-right or padding-right |
| x | Sets the margin-left and margin-right, or padding-left and padding-right |
| y | Sets the margin-top and margin-bottom, or padding-top and padding-bottom |
Size
The {size} can be one of the following:
| {size} | Description |
|---|---|
| 0 | Sets the margin or padding to 0 |
| 5 | Sets the margin or padding to 0.5rem (5px) |
| 10 | Sets the margin or padding to 1.0rem (10px) |
| 15 | Sets the margin or padding to 1.5rem (15px) |
| 20 | Sets the margin or padding to 2.0rem (20px) |
| auto | Sets the margin to auto |
Examples #
With all the said, the following table shows some examples of how the spacing utility classes can be used:
| Classes | Description |
|---|---|
| .m-0 | margin: 0 |
| .m-auto |
margin: auto
Horizontally center block and inline-block elements
|
| .ml-auto |
margin-left: auto
Push elements to the right, see example (opens in new tab)
|
| .m-sm-20 |
margin: 2rem (20px)
Only for small screens and up
|
| .my-10 | margin-top: 1rem (10px) and margin-bottom: 1rem (10px) |
| .p-10 | padding: 1rem (10px) |
| .pt-5 | padding-top: 0.5rem (5px) |
| .px-md-20 |
padding-left: 2rem (20px) and padding-right: 2rem (20px)
Only for medium screens and up
|
Up next:
Text utilities
Help us grow
Our goal is to make Halfmoon the go-to framework for building dashboards and tools on the web. We are already working on things like a form validator, number input, datepicker, multi-select (think Select2 without jQuery), tabs component, JSX docs, and so much more. You can learn more in the project roadmap.
However, we need your help to grow. So if you truly believe in our goal, please consider supporting us through Patreon.
Gold sponsor
The following is the highest tier, with a maximum of 1 sponsor.
(Also seen at the top of the page)
Sponsors
The following is the normal tier, with a maximum of 10 sponsors.
AYCD
Automation Done Right
Sponsor image placeholder
Sponsor (9 available)
Halfmoon needs your support! Become a sponsor to place an image and description of your product here. Click here
Backers
The following people have generously decided to support Halfmoon.
- Ethan Fann
- Julia Koblitz
- Benjamin Listwon
- Sean Lindsay
- Daan
Become a backer on Patreon .
Subscribe for updates
- We will notify you when the framework gets a substantial update. No spam or marketing.
- You can also follow us on Twitter and stay updated that way.
