code

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">
            <h3 class="valign">This should be vertically aligned</h3>
          </div>

Alternate

This should be vertically aligned


          <div class="grey lighten-2" style="height:200px;">
            <h3 class="valign-middle">This should be vertically aligned</h3>
          </div>

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>

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>

Margin & Padding

These classes help format various content on your site.

Margin

.margin-bottom-0
 
.margin-bottom-xs
 
.margin-bottom-s
 
.margin-bottom-m
 
.margin-bottom-l
 
.margin-bottom-xl
 
margin-auto

Padding

.padding-bottom-0
 
.padding-bottom-xs
 
.padding-bottom-s
 
.padding-bottom-m
 
.padding-bottom-l
 
.padding-bottom-xl
 

Positive Margin

  All sides Top Right Bottom Left
0rem .margin-0 .margin-top-0 .margin-right-0 .margin-bottom-0 .margin-left-0
0.5rem .margin-xs .margin-top-xs .margin-right-xs .margin-bottom-xs .margin-left-xs
1rem .margin-s .margin-top-s .margin-right-s .margin-bottom-s .margin-left-s
2rem .margin-m .margin-top-m .margin-right-m .margin-bottom-m .margin-left-m
3rem .margin-l .margin-top-l .margin-right-l .margin-bottom-l .margin-left-l
5rem .margin-xl .margin-top-xl .margin-right-xl .margin-bottom-xl .margin-left-xl

Negative Margin

  All sides Top Right Bottom Left
0rem .margin-0 .margin-top-0 .margin-right-0 .margin-bottom-0 .margin-left-0
-0.5rem .neg-margin-xs .neg-margin-top-xs .neg-margin-right-xs .neg-margin-bottom-xs .neg-margin-left-xs
-1rem .neg-margin-s .neg-margin-top-s .neg-margin-right-s .neg-margin-bottom-s .neg-margin-left-s
-2rem .neg-margin-m .neg-margin-top-m .neg-margin-right-m .neg-margin-bottom-m .neg-margin-left-m
-3rem .neg-margin-l .neg-margin-top-l .neg-margin-right-l .neg-margin-bottom-l .neg-margin-left-l
-5rem .neg-margin-xl .neg-margin-top-xl .neg-margin-right-xl .neg-margin-bottom-xl .neg-margin-left-xl

Padding

  All sides Top Right Bottom Left
0rem .padding-0 .padding-top-0 .padding-right-0 .padding-bottom-0 .padding-left-0
0.5rem .padding-xs .padding-top-xs .padding-right-xs .padding-bottom-xs .padding-left-xs
1rem .padding-s .padding-top-s .padding-right-s .padding-bottom-s .padding-left-s
2rem .padding-m .padding-top-m .padding-right-m .padding-bottom-m .padding-left-m
3rem .padding-l .padding-top-l .padding-right-l .padding-bottom-l .padding-left-l
5rem .padding-xl .padding-top-xl .padding-right-xl .padding-bottom-xl .padding-left-xl

Responsive Padding and Margins

The layout is screen-size|padding-type|padding-size

  • .xspadding-l
  • .xlpadding-left-m
  • smargin-top-l
  • mmargin-bottom-xs

Resize Me


          <p class="padding-left-xs xspadding-left-s spadding-left-m mpadding-left-l lpadding-left-xl xlpadding-left-0 ">Resize Me</p>

Display

These classes affect the display attribute of an element.

Class Attribute
.display-block or .db display: block
.display-inline or .di display: inline
.display-inline-block or .dib display: inline-block
.center-block margin: 0 auto; float: none;

Width & Height

These classes affect the width/height of an element.

Class Attribute
.max-width max-width: 100%;
.full-width width: 100%
.full-height height: 100%
.width-auto width: auto
.height-auto height: auto

Show & Hide

These classes show and hide various content on your site. They are especially useful in conjunction with media queries.

.show display: block shows element
.hide display: none hides element

Position

These classes affect the position attribute of an element.

Class Attribute
.pos-r position: relative
.pos-a position: absolute
.position-s position: static

Absolute Positioning

These classes will absolutely position an element in one of the four corners of its containing div.

Inside Outside
.abs-left-inside .abs-left-outside
.abs-right-inside .abs-right-outside
.abs-bottom-inside .abs-bottom-outside
.abs-top-inside .abs-top-outside
.abs-middle-top-inside .abs-middle-top-outside
.abs-middle-bottom-inside .abs-middle-bottom-outside
.abs-left-top-inside .abs-left-top-outside
.abs-left-middle-inside .abs-left-middle-outside
.abs-left-bottom-inside .abs-left-bottom-outside
.abs-right-top-inside .abs-right-top-outside
.abs-right-middle-inside .abs-right-middle-outside
.abs-right-bottom-inside .abs-right-bottom-outside

Examples

Inside

.abs-middle-
top-inside
.abs-middle-
bottom-inside
.abs-left-
top-inside
.abs-left-
middle-inside
.abs-left-
bottom-inside
.abs-right-
top-inside
.abs-right-
middle-inside
.abs-right-
bottom-inside

Outside

.abs‑middle-
top‑outside
.abs‑middle-
bottom‑outside
.abs‑left-
top‑outside
.abs‑left-
middle‑outside
.abs‑left-
bottom‑outside
.abs‑right-
top‑outside
.abs‑right-
middle‑outside
.abs‑right-
bottom‑outside

Vertical Alignment

These classes apply to inline block elements to alter their vertical alignment.

Inside Outside
.vertical-align vertical-align: middle
.vertical-align-top vertical-align: top
.vertical-align-bottom vertical-align: bottom

Miscellaneous

These classes apply to inline block elements to alter their vertical alignment.

.hover-cursor-pointer
.overflow-hidden
.overflow-auto
[v-cloak]