Visibility utilities Since v1.1.0+

Halfmoon comes with utility classes which can be used to set the visibility property of elements.

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
<!-- 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 -->
<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>

Coming soon

  • More components
  • More variables and customization
  • Form builder and validator JS
  • Themes and templates

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.