Helpers

help

Alignment

We have easy to use classes to help you align your content.

Vertical Align

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

This should be vertically aligned
                                                    
<div class="valign-wrapper">
  <h5 class="valign">This should be vertically aligned</h5>
</div>
                                                    
                                                

Text Align

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


This should be left aligned


This should be right aligned


This should be center aligned

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

Quick Floats

Quickly float things by adding the class left or right to the element. !important is used to avoid specificity issues.

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

Hiding Content

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

Class Screen Range
.hide Hidden for all Devices
.hide-on-small-only Hidden for Mobile Only
.hide-on-med-only Hidden for Tablet Only
.hide-on-med-and-down Hidden for Tablet and Below
.hide-on-med-and-up Hidden for Tablet and Above
.hide-on-large-only Hidden for Desktop Only

Usage

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

Formatting

These classes help format various content on your site.

Truncation

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

This is an extremely long title that will be truncated

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

Hover

The hoverable is 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.

                                                    
<div class="card hoverable medium">
    <div class="card-image">
        <img src="../asset/images/nature1.jpg">
        <span class="card-title">Card Title</span>
    </div>
    <div class="card-content">
        <p>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.</p>
    </div>
    <div class="card-action">
        <a href="#">This is a link</a>
    </div>
</div>
                                                    
                                                

Padding

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

Class Description
.p-a-0 padding:0px
.p-a-5 padding:5px
.p-t-0 padding-top:0px
.p-t-5 padding-top:5px
.p-b-0 padding-bottom:0px
.p-b-5 padding-bottom:5px
.p-r-0 padding-right:0px
.p-r-5 padding-right:5px
.p-l-0 padding-left:0px
.p-l-5 padding-left:5px

Margin

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

Class Description
.m-a-0 margin:0px
.m-a-5 margin:5px
.m-t-0 margin-top:0px
.m-t-5 margin-top:5px
.m-b-0 margin-bottom:0px
.m-b-5 margin-bottom:5px
.m-r-0 margin-right:0px
.m-r-5 margin-right:5px
.m-l-0 margin-left:0px
.m-l-5 margin-left:5px

Fixed Dropdown Size

All size: 100,200,300,400,500,600px

Class Description
.width-100 width: 100px
.width-200 width: 200px

Preloader Size

All size: 20,30,40,50,60,70,80px

Class Description
.preloader-size-20 width: 20px, height: 20px
.preloader-size-30 width: 30px, height: 30px