Display utilities

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

Notation #

The class names for the display utilities come in the the following formats:

• .d-{value}
• .d-{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:

Hiding elements #

The responsive display utility classes can be used to show and hide elements by device. This way, sites can be easily made responsive and work well on all screen sizes. The following table shows all the scenarios for hiding/showing elements for certain breakpoints:

Hidden for breakpoint up and down #

In the last section, we saw how elements can be hidden/shown only on certain screen sizes. However, often times it is more useful to simply hide elements (set the display: none property) for a certain breakpoint and up, or for a certain breakpoint and down. This can be done using the following classes:

• .hidden-{breakpoint}-and-up
• .hidden-{breakpoint}-and-down

So for example, the class .hidden-sm-and-down would hide the element on small screens and down (ie, where width <= 768px), while the class .hidden-md-and-up would hide the element on medium screens and up (ie, where width > 768px).

This method is generally a little bit easier to reason with in some cases, as you don't have to worry about setting the display property explicitly.

Hidden in light or dark mode #

Elements can also be hidden (display: none) in light mode or dark mode using the following classes:

• .hidden-lm hides the element in light mode only.
• .hidden-dm hides the element in dark mode only.

You can see these classes in action in the example below. Try alternating between light mode and dark mode to see the results.