Typography, Icons and Media

You can overwrite all style-definitions with your own style.css.

download CSS

Templates

Typography

Each of these colors is defined with a color for background, text and border.
See below how to use this file.

Typeface Roboto

We use the same Typeface as the google material design guidelines.
Roboto has been refined extensively to work across the wider set of supported platforms.

H1 h1 font-weight: 300; / font-size: 2.8rem;

H2 h2 font-weight: 300; / font-size: 2.2rem;

H3 h3 font-weight: 300; / font-size: 1.5rem;

H4 h4 font-weight: 300; / font-size: 1.2rem;

H5 h5 font-weight: 400; / font-size: 1rem;

H6 h6 font-weight: 400; / font-size: .8rem;

Icon Font

For Particles we use Font Awesome, the iconic font and CSS toolkit.
We have included the font files with our Mobile First Template.

Text align

<p class="center"> center </p>

center

<p class="right-text"> right-text </p>

right-text

<p class="left-text"> left-text </p>

left-text

Vertical align

Add the class valign-text to the container holding the element you want to vertically align.
Make sure you give a height

<div class="col s6 valign-text"> center </div>

Media

Responsive Images

To make images resize to page or col width, add the class responsive to the image tag.
The image will have a max-width: 100% and height:auto.

<img class="responsive" src="xy">

Embedd responsive video

Make your videos responsive, wrap them with a div with the class="video-container".

<div class="video-container"> <iframe… > </iframe></div>