This theme has various typography element. You can visit demo page of this theme where you can view typography and theme components page and get the code of every element. You will understand these elements much better on those pages because they are fully functional on demo website.

Few very basic things I would like to mention here are:

  1. color class changes text color of containing elements to current chosen theme color scheme.
<div class="color">Hello I am color ful</div>

<!-- This can also be used like this which make texts in two colors -->
Lorem Ipsum <span class="color">Dolor</span>

<!--In your nodes or blocks, you can also use shortcode like this -->
[color] MY COLORED TEXT [/color]
  1. `theme-scheme class adds background color to the element it is added to.
<div class="theme-scheme"></div>
<!--this will set background color of this div container
to current theme's color scheme. -->
  1. bordered class add underline border to the element with padding and margin. It is meant to be used with heading elements only.
<!--In your nodes or blocks, you can also use shortcode like this -->
[h1 bordered] Your title [/h1]
[h2 bordered] Your title [/h2]
[h3 bordered] Your title [/h3]
  1. divider class play role of adding margin of of 20px wherever it is added to. Usage:
<span class="divider"></span>
<!-- this will add margin between above and under lying elements-->
  1. border class add a simple border like html <hr/> tag.
<span class="border"></span>
<!--this will add a horizontal boreder-->
  1. pull-right and pull-left class float your element to right or left.

  2. less-margin class is made for heading elements. When you need less margin heading, add this class. This will give only 5px bottom margin to heading element such as h1, h2 etc. This theme is based on bootstrap 2.1, you can also grab codes from their website.