Typography

Tornado Use (Raleway and Roboto Font Family) as A Defualt Font You Can Customize it Easy.

Customize Font Family

body,.form-control{font-family:'Roboto','Raleway',Arial,tahoma;}

Headers

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Paragraphs

Paragraph Large Text

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt

Paragraph Normal Text

Paragraph Medium Text

Paragraph Small Text

<p class="large-text">Paragraph Large Text</p>

<p class="normal-text">Paragraph Normal Text</p>

<p class="medium-text">Paragraph Medium Text</p>

<p class="small-text">Paragraph Small Text</p>

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend Abdullah , Source Name

<blockquote>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend Abdullah , Source Name

<blockquote class="quote-th1">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend Abdullah , Source Name

<blockquote class="quote-th2">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend Abdullah , Source Name

<blockquote class="quote-th3">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer lorem quam, adipiscing condimentum tristique vel, eleifend
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>

Primary Lists Theme

To use lists theme on the default markup of lists, simply just add the class .ui-tornado to a ul,ol,dl tags, see the examples blow.

Ordered list

Tornado user interface
Super Features
Material design philosophy
1. Nested list item
Great UI / UX work
Awesome typography

Unordered list

Tornado user interface
Super Features
Material design philosophy
- Nested list item
Great UI / UX work
Awesome typography

Description list

Coffee: black hot drink
New York City: a quite lovely city
Milk: white cold drink
Los Angeles: Sometimes can be a lovely city

<!-- Ordered list -->
<ol class="ui-tornado">
    <li>Tornado user interfac</li>
    <li>Super Features</li>
    <li>Material design philosophy
        <ol class="ui-tornado">
            <li>Nested list item</li>
        </ol>
    </li>
    <li>Great UI / UX work</li>
    <li>Awesome typography</li>
</ol>

<!-- Unordered list -->
<ul class="ui-tornado">
    <li>Tornado user interface</li>
    <li>Super Features</li>
    <li>Material design philosophy
        <ul class="ui-tornado">
            <li>Nested list item</li>
        </ul>
    </li>
    <li>Great UI / UX work</li>
    <li>Awesome typography</li>
</ul>

<!-- Description list -->
<dl class="ui-tornado">
  <dt>Coffee</dt>
  <dd>black hot drink</dd>
  
  <dt>New York City</dt>
  <dd>a quite lovely city </dd>
  
  <dt>Milk</dt>
  <dd>white cold drink</dd>
  
  <dt>Los Angeles</dt>
  <dd>Sometimes can be a lovely city </dd>
</dl>

Unordered list Types

Changing List Bullet icon with a data-type attribute

Square list icon

Tornado user interface
Super Features
Material design philosophy
- Nested list item
Great UI / UX work
Awesome typography

Chevron list icon

Tornado user interface
Super Features
Material design philosophy
- Nested list item
Great UI / UX work
Awesome typography

Arrow list icon

Tornado user interface
Super Features
Material design philosophy
- Nested list item
Great UI / UX work
Awesome typography

Stars list icon

Tornado user interface
Super Features
Material design philosophy
- Nested list item
Great UI / UX work
Awesome typography

Checked list icon

Tornado user interface
Super Features
Material design philosophy
- Nested list item
Great UI / UX work
Awesome typography

Custom list icon

Tornado user interface
Super Features
Material design philosophy
- Nested list item
Great UI / UX work
Awesome typography

<!-- Square list icon -->
<ul class="ui-tornado" data-type="square">
    <li>Tornado user interface</li>
    <li>Super Features</li>
    <li>Material design philosophy
        <ul>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>Great UI / UX work</li>
    <li>Awesome typography</li>
</ul>

<!-- Chevron list icon -->
<ul class="ui-tornado" data-type="chevron">
    <li>Tornado user interface</li>
    <li>Super Features</li>
    <li>Material design philosophy
        <ul>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>Great UI / UX work</li>
    <li>Awesome typography</li>
</ul>

<!-- Arrow list icon -->
<ul class="ui-tornado" data-type="arrow">
    <li>Tornado user interface</li>
    <li>Super Features</li>
    <li>Material design philosophy
        <ul>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>Great UI / UX work</li>
    <li>Awesome typography</li>
</ul>

<!-- Stars list icon -->
<ul class="ui-tornado" data-type="stars">
    <li>Tornado user interface</li>
    <li>Super Features</li>
    <li>Material design philosophy
        <ul>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>Great UI / UX work</li>
    <li>Awesome typography</li>
</ul>

<!-- Checked list icon -->
<ul class="ui-tornado" data-type="checked">
    <li>Tornado user interface</li>
    <li>Super Features</li>
    <li>Material design philosophy
        <ul>
            <li>Nested list item</li>
        </ul>
    </li>
    <li>Great UI / UX work</li>
    <li>Awesome typography</li>
</ul>

<!-- Custom list icon -->
<ul class="ui-tornado" data-type="custom">
    <li class="ti-action-android">Tornado user interface</li>
    <li class="ti-clock">Super Features</li>
    <li class="ti-phone">Material design philosophy
        <ul class="ui-tornado" data-type="stars">
            <li>Nested list item</li>
        </ul>
    </li>
    <li class="ti-email">Great UI / UX work</li>
    <li class="ti-add">Awesome typography</li>
</ul>

Helpers

Helper	Definition	Element
Class : align-right	text aligned to right	added to any element
Class : align-center	text aligned to center	added to any element
Class : align-left	text aligned to left	added to any element
Class : align-justify	text align justifyed	added to any element