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
- 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
- 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 |