Position utilities Since v1.1.0+
Halfmoon comes with responsive utility classes which can be used to set the position of elements, ie, the position, top, bottom, left, and right properties.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Notation #
The class names for the position utilities come in the the following formats:
- .position-{value}
- .position-{breakpoint}-{value}
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 |
|---|---|
| static | Sets the position: static property |
| relative | Sets the position: relative property |
| absolute | Sets the position: absolute property |
| fixed | Sets the position: fixed property |
| sticky | Sets the position: sticky property |
You can see some of these classes in action in the example below:
Box 1.1
Box 1.2
Box 2.1
Box 2.2
<!-- First container -->
<div class="position-relative"> <!-- position-relative = position: relative -->
<div class="position-absolute">Box 1.1</div> <!-- position-absolute = position: absolute -->
<div class="position-absolute m-20">Box 1.2</div> <!-- position-absolute = position: absolute, m-20 = margin: 2rem (20px) -->
</div>
<!-- Second container -->
<div class="position-sm-relative"> <!-- position-sm-relative = position: relative only on small screens and up (> 576px) -->
<div class="position-sm-absolute">Box 2.1</div> <!-- position-sm-absolute = position: absolute only on small screens and up (> 576px) -->
<div class="position-sm-absolute m-sm-20">Box 2.2</div> <!-- position-sm-absolute = position: absolute only on small screens and up (> 576px), m-sm-20 = margin: 2rem (20px) only on small screens and up (> 576px) -->
</div>In the above example, the containers and the boxes have their positions set using the classes described above. In the second container, the positions only apply on small screens and up (width > 576px), because of the use of the sm breakpoint. Below this width, the boxes will become static, so Box 2.2 will drop to the bottom of Box 2.1. You can resize your browser window and test this for yourself.
Moreover, the width, height, background color, and border of the boxes are set using utility classes. This is not shown in the code for the sake of conciseness. Please also note, some positioning may require the z-index of elements to be set. This can be done using the z-index utilities (opens in new tab).
Top / bottom / left / right #
The following classes are available for setting the top, bottom, left, and right properties:
Setting to 0 #
The top, bottom, left, or right properties can be set to 0 using the following classes:
- .{top|bottom|left|right}-0
- .{top|bottom|left|right}-{breakpoint}-0
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.
You can see these classes in action in the example below:
Top
Bottom
Left
Right
<!-- First container -->
<div class="position-relative"> <!-- position-relative = position: relative -->
<div class="position-absolute top-0">Top</div> <!-- position-absolute = position: absolute, top-0 = top: 0 -->
<div class="position-absolute bottom-0">Bottom</div> <!-- position-absolute = position: absolute, bottom-0 = bottom: 0 -->
</div>
<!-- Second container -->
<div class="position-relative"> <!-- position-relative = position: relative -->
<div class="position-absolute left-0">Left</div> <!-- position-absolute = position: absolute, left-0 = left: 0 -->
<div class="position-absolute right-0">Right</div> <!-- position-absolute = position: absolute, right-0 = right: 0 -->
</div>Once again, in the above example, the width, height, background color, and border of the containers and boxes are set using utility classes. This is not shown in the code for the sake of conciseness.
Setting to auto #
The top, bottom, left, or right properties can also be set to auto using the following classes:
- .{top|bottom|left|right}-auto
- .{top|bottom|left|right}-{breakpoint}-auto
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.
Practical example #
Given below is a practical example of how position utility classes can be used to create a close button that changes its position depending on the screen size.
<div class="position-relative"> <!-- position-relative = position: relative -->
<div class="position-absolute bottom-0 bottom-sm-auto top-sm-0 right-0"> <!-- position-absolute = position: absolute, bottom-0 = bottom: 0, bottom-sm-auto = bottom: auto only on small screens and up (> 576px), top-sm-0 = top: 0 only on small screens and up (> 576px), right-0 = right: 0 -->
<button class="btn m-10" type="button"> <!-- m-10 = margin: 1rem (10px) -->
× Close
</button>
</div>
</div>The close button will be on the bottom-right corner of the container on extra small screens (width <= 576px). Above this width, the close button will move to the top-right corner of the container. This can be useful because on extra small screens, ie, mobile phones, it is ergonomic to have buttons close to the user's thumb.
Up next:
Sizing 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.
