Visibility utilities Since v1.1.0+
Halfmoon comes with utility classes which can be used to set the visibility property of elements.
|
Commenting
|
New message!
Jane Doe just sent you a new message.
|
Classes #
The following table shows the available classes:
| Class | Description |
|---|---|
| .visible | Sets the visibility: visible property |
| .invisible | Sets the visibility: hidden property |
You can see the classes in action in the example below. Note how the invisible element still takes up space in the DOM. If you want an element to not take up space, the display: none property must be set instead. This can be done using display utilities (opens in new tab).
This is visible
This is invisible, but still takes up space
<!-- Visible -->
<div class="visible">
This is visible
</div>
<!-- Invisible -->
<div class="invisible">
This is invisible, but still takes up space
</div>Visibility in light or dark mode #
The visibility of elements can also be set only for light mode, or only for dark mode, using the following classes:
Visible
- .visible-lm sets the visibility: visible property in light mode only.
- .visible-dm sets the visibility: visible property in dark mode only.
Visible in light mode only
Visible in dark mode only
<!-- Visible in light mode only -->
<div class="invisible visible-lm">
Visible in light mode only
</div>
<!-- Visible in dark mode only -->
<div class="invisible visible-dm">
Visible in dark mode only
</div>Invisible
- .invisible-lm sets the visibility: hidden property in light mode only.
- .invisible-dm sets the visibility: hidden property in dark mode only.
Invisible in light mode only
Invisible in dark mode only
<!-- Invisible in light mode only -->
<div class="visible invisible-lm">
Invisible in light mode only
</div>
<!-- Invisible in dark mode only -->
<div class="visible invisible-dm">
Invisible in dark mode only
</div>
Up next:
Z-index 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.
