Typography

Tornado Typography Style [ Fonts, Text Coloring, Heading, Global Text, Lists, Designed Block, Responsive Unites, and much more... ]

Sass Customize

in order to edit the Typography Elements you can use the css Selectors to overide the theme or you can edit it with sass Tornado Folder/SCSS/elements/_typography.scss and do not forget to compile the main files of the framework Tornado Folder/SCSS/tornado.scss and tornado-rtl.scss.

Fonts Families

Tornado Uses Roboto Google Font as Primary English Font Family and Helvetica Neue W23 SKY for RTL Arabic Version , Both Fonts are Free to Use an Any Kind of Projects.


.Roboto{ font-family:'Roboto'; } /* Using Roboto Font */
.Helevtica{ font-family:'Helvetica'; } /* Using Helvetica Font */

Headings and Paragraphs

A Header Provides a Short Summary of Content , HTML Typography Headers are Sized With REM to Give Your Design a Responsive Heads of Lines. in The Example's Below You will See All Heading Level Size's and Also Paragraphs With Defferent Sizes That Can Be Used as a Content for Head Titles.

Header Lvl.1 With Large Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.


<h1>Header Lvl.1 With Large Text</h1>
<p class="large-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores. </p>

Header Lvl.2 With Large Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.


<h2>Header Lvl.2 With Default Text</h2>
<p class="large-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>

Header Lvl.3 With Default Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.


<h3>Header Lvl.3 With Meduim Text</h3>
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>

Type Header Lvl.4 With Meduim Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.


<h4>Type Header Lvl.4 With Small Text</h4>
<p class="small-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.</p>

Header Lvl.5 With Small Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti .


<h5>Header Lvl.5 With Small Text</h5>
<p class="small-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti .</p>

Header Lvl.6 With Small Text

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium.


<h6>Header Lvl.6 With Small Text</h6>
<p class="small-text">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium. </p>

HTML Default Lists

HTML5 Default Listing Tags With Tornado Theme Applayed on it for More Flexible Lists and for
using lists theme on the default markup of lists, simply just add the class tornado-ui to a ul,ol,dl tags, see the examples blow.

Ordered List

Tornado v2 Ordered List
More Flexible Elements
Builded With Sass
1. Nested Ordered List Item
Multi Languages Support [RTL]
- Nested Unordered List Item
Modern Userinterface Design
Awesome Typography Styling

Unordered List

Tornado v2 Unordered List
More Flexible Elements
Builded With Sass
- Nested Unordered List Item
Multi Languages Support [RTL]
Modern Userinterface Design
1. Nested Ordered List Item
Awesome Typography Styling

Description List

Carousel: black hot drink
Tabs System: a quite lovely city
Accourdion System: white cold drink
Popup Modals: Sometimes can be a lovely city

Blockquotes Themes

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. Abdullah , Source Name


<blockquote>
    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. 
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>

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. Abdullah , Source Name


<blockquote class="theme-2">
    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. 
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>

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. Abdullah , Source Name


<blockquote class="theme-3">
    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. 
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>

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. Abdullah , Source Name


<blockquote class="theme-4">
    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. 
    <span class="quote-name">Abdullah , Source Name</span>
</blockquote>

Typography Utilities

Class Name	element	description
large-text	Any Elements	Larger Size Text [ 1.125rem ]
meduim-text	Any Elements	Normal Size Text [ 1rem \| 16px ]
small-text	Any Elements	Smaller Size Text [ 0.875rem ]
tx-uppercase	Any Elements	Make The Text Uppercase
tx-capitalize	Any Elements	Make The First Letter of Every Word Capital
tx-line-through	Any Elements	Create Line Through The Text
tx-align-start	Any Elements	Align The Text To The Page Direction Start Point
tx-align-end	Any Elements	Align The Text To The Page Direction End Point
tx-align-right	Any Elements	Align The Text To The Right
tx-align-center	Any Elements	Align The Text To The Center
tx-align-left	Any Elements	Align The Text To The Left
tx-align-justify	Any Elements	Justify and Align Text For The Line To Start and End on The Same End Point

Next Responsive Menus Previous Grid Utilities