Helpers

You can easily vertically center things by adding the class valign-wrapperto the container holding the items you want to vertically align.

<div class="valign-wrapper" style="height: 200px;">    <h5>This should be vertically aligned</h5></div>

These classes are for horizontally aligning content. We have .left-align, .right-alignand .center-align

<h5 class="left-align">This should be left aligned</h5><h5 class="right-align">This should be right aligned</h5><h5 class="center-align">This should be center aligned</h5>

Quickly float things by adding the class leftor rightto the element. !importantis used to avoid specificity issues.

<div class="left">...</div><div class="right">...</div>

We provide easy to use classes to hide/show content on specific screen sizes.

<div class="hide-on-small-only"></div>

All size: 0,5,10,15,20,25,30,35,40,45,50px

<div class="p-a-5"></div>

All size: 0,5,10,15,20,25,30,35,40,45,50px

<div class="m-a-5"></div>

To truncate long lines of text in an ellipsis, add the class truncateto the tag which contains the text. See an example below of a header being truncated inside a card.

<h4 class="truncate">This is an extremely long title that will be truncated</h4>

The hoverableis a hover class that adds an animation for box shadow as seen below. It can be used on most elements, but meant for use on cards.

Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link

<div class="card-panel hoverable">Hoverable Card Panel</div>

Because we override many of the default browser styles and elements, we provide the .browser-defaultclass to revert these elements to their original state.