Random Helper Classes
Set Highest z-index
.h-always-on-top
Disable Pointer-Events
Use .h-pointer-events-auto to revert to the default browser behavior for pointer events (like :hover and click).
Use .h-pointer-events-none (deprecated: .button-disabled) to make an element ignore pointer events. The pointer events will still trigger on child elements and pass-through to elements that are "beneath" the target.
<a href="test.html" class="c-link h-pointer-events-none">
Hover over me
</a>Box-Shadow
.h-box-shadow
<div class="h-box-shadow">h-box-shadow</div>Apply Link-Color on Text-Element
.h-link-color: Link Color including hover and focus-styles (without applying any font-size)
<span class="h-link-color">Hover over me</span>Specific Cursor on Mouseover / Hover
.h-hover-pointer: The cursor is a pointer that indicates a link.
<span class="h-hover-pointer">Hover over me</span>.h-forbidden-pointer: The cursor is a "not-allowed" symbol that indicates that the button/input is disabled.
<span class="h-forbidden-pointer">Hover over me</span>.h-help-pointer: Help information is available.
<span class="h-help-pointer">Hover over me</span>.h-zoom-pointer: Something can be zoomed (magnified) in or out.
<span class="h-zoom-pointer">Hover over me</span>.h-hover-darken to darken any color on mouse-over (this adds a css filter).
<span class="h-hover-darken">
<i class="fa fa-info-circle fa-2x"></i>
</span>No Pointer-Events
.h-no-pointer-evenets
<a class="h-no-pointer-events">Click me</a>Grayscale
Add grayscale filter to a section: .h-grayscale
<div class="h-grayscale">
<button class="c-btn -primary">Grayscale Filter</button>
</div>Opacity
Set opacity to 40%, 50% or 60%: .h-opacity-40[50, 60]
<a class="c-btn -primary h-opacity-60">Opacity 60%</a>Reduce Paragraph Margin-Bottom
TIP
A paragraph has a margin-bottom of $space-s per default. Use the following helper classes on either the parent element or the paragraph element itself, to reduce or eliminate the margin.
.h-paragraph-spacing-xs // reduces margin to $space-xs
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div class="h-paragraph-spacing-xs">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>.h-paragraph-spacing-reset // reduces margin to 0
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
<div>
<p class="h-paragraph-spacing-reset">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. </p>
</div>