Utilities/Hacks

Documentation of utitlity or hack classes that modify standard behavior of various HTML tags

Files

app/styles/tools/_utilities.scss

Clickable, Hover Shadow

Make any HTML tag clickable by using cursor: pointer. Add an .is-active class to indicate active state. .hover-shadow gives a visual clue when hovering an element.

Example:code
I'm clickable!
I'm clickable and active!
Hover me
Code:
<span class="clickable">I'm clickable!</span>

No focus outline

Disable standard focus outline on any element. Just add .no-focus class to any element.

Example:code
Focus Card 1Focus Card 2

I'm a normal card

On focus or being active (click the first button or myself), i will show an outline

I won't show if i'm focused

I have a .no-focus class that disables focus outline.

Code:
<a class="btn" href="#focusable-card">Focus Card 1</a>
<a class="btn" href="#not-focusable-card">Focus Card 2</a>

<article class="card" id="focusable-card" tabindex="2">
  ...
</article>

<article class="card" id="not-focusable-card" tabindex="3">
  ...
</article>