Sizing utilities
Halfmoon comes with responsive utility classes which can be used to set the width and height of elements.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Specific sizing #
The width of an element can be set to a specific size using the following classes:
- .w-{size}
- .w-{breakpoint}-{size}
The height of an element can be set to a specific size using the following classes:
- .h-{size}
- .h-{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.
The {size} can be one of the following:
| {size} | Description |
|---|---|
| 25 | Sets the width or height to 2.5rem (25px) |
| 50 | Sets the width or height to 5rem (50px) |
| 100 | Sets the width or height to 10rem (100px) |
| 150 | Sets the width or height to 15rem (150px) |
| 200 | Sets the width or height to 20rem (200px) |
| 250 | Sets the width or height to 25rem (250px) |
| 300 | Sets the width or height to 30rem (300px) |
| 350 | Sets the width or height to 35rem (350px) |
| 400 | Sets the width or height to 40rem (400px) |
| 450 | Sets the width or height to 45rem (450px) |
| 500 | Sets the width or height to 50rem (500px) |
| 550 | Sets the width or height to 55rem (550px) |
| 600 | Sets the width or height to 60rem (600px) |
You can see a few of these classes in action in the example below. The third box will have a width of 30rem (300px) on small screens and above, ie, where screen width > 576px. Below this, it will have a width of 20rem (200px). This is because of the use of the responsive (with breakpoint) utitlity class.
.w-100
.h-100
.h-100
.w-150
.h-100
.h-100
.w-200
.w-sm-300
.h-150
.w-sm-300
.h-150
<!-- First box -->
<div class="w-100 h-100"> <!-- w-100 = width: 10rem (100px), h-100 = height: 10rem (100px) -->
...
</div>
<!-- Second box -->
<div class="w-150 h-100"> <!-- w-150 = width: 15rem (150px), h-100 = height: 10rem (100px) -->
...
</div>
<!-- Third box -->
<div class="w-200 w-sm-300 h-150"> <!-- w-200 = width: 20rem (200px), w-sm-300 = width: 30rem (300px) only on small screens and up (> 576px), h-150 = height: 15rem (150px) -->
...
</div>Relative to the parent #
The width of an element (relative to its parent) can be set using the following classes:
- .w-{value}
- .w-{breakpoint}-{value}
The height of an element (relative to its parent) can be set using the following classes:
- .h-{value}
- .h-{breakpoint}-{value}
Once again, 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.
The {value} can be one of the following:
| {value} | Description |
|---|---|
| auto | Sets the width or height to auto |
| quarter | Sets the width or height to 25% |
| half | Sets the width or height to 50% |
| three-quarter | Sets the width or height to 75% |
| full | Sets the width or height to 100% |
You can see some of these classes in action in the example below. The third box will take up 75% of the parent container's width on medium screens and above, ie, where screen width > 768px. Below this, it will take up 100% of the parent container's width. The fifth box will take up 50% of the parent container's height on large screens and above, ie, where screen width > 992px. Below this, it will take up 100% of the parent container's height.
.w-half (50%)
.w-full (100%)
.w-full (100%)
.w-md-three-quarter (75%)
.w-md-three-quarter (75%)
.h-three-quarter (75%)
.h-full (100%)
.h-lg-half (50%)
.h-lg-half (50%)
<!-- First box -->
<div class="w-half"> <!-- w-half = width: 50% -->
...
</div>
<!-- Second box -->
<div class="w-full"> <!-- w-full = width: 100% -->
...
</div>
<!-- Third box -->
<div class="w-full w-md-three-quarter"> <!-- w-full = width: 100%, w-md-three-quarter = width: 75% only on medium screens and up (> 768px) -->
...
</div>
<!-- Fourth box -->
<div class="h-100"> <!-- h-100 = height: 10rem (100px) -->
<div class="h-three-quarter"> <!-- h-three-quarter = height: 75% -->
...
</div>
</div>
<!-- Fifth box -->
<div class="h-150"> <!-- h-150 = height: 15rem (150px) -->
<div class="h-full h-lg-half"> <!-- h-full = height: 100%, h-lg-half = height: 50% only on large screens and up (> 992px) -->
...
</div>
</div>Max width and height #
The maximum width of an element (relative to its parent) can be set using the following classes:
- .mw-full sets the max-width: 100% property.
- .mw-{breakpoint}-full sets the max-width: 100% property, but only for that breakpoint and up.
The maximum height of an element (relative to its parent) can be set using the following classes:
- .mh-full sets the max-height: 100% property.
- .mh-{breakpoint}-full sets the max-height: 100% property, but only for that breakpoint and up.
In both cases, the {breakpoint} can be sm, md, lg, or xl.
More examples #
The following table shows some more examples of how the sizing utility classes can be used:
| Classes | Description |
|---|---|
| .w-full | width: 100% |
| .h-quarter | height: 25% |
| .w-full and .mw-full | width: 100% and max-width: 100% |
| .h-sm-half |
height: 50%
Only for small screens and up
|
| .w-100 | width: 10rem (100px) |
| .h-300 | height: 30rem (300px) |
| .w-lg-500 |
width: 50rem (500px)
Only for large screens and up
|
Up next:
Spacing 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.
