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 src/SCSS/elements/_typography.scss
Font Families
Tornado Uses Roboto Google Font as Primary English Font Family and Almari for RTL Arabic Version , and the Third font is Tornado Font Icon for icons Glyphs.
/* Using Titles Font */ .Selector { font-family:var(--primary-font); } /* Using Text Font */ .Selector { font-family:var(--secondary-font); } /* Using Tornado Icons Font */ .Selector { font-family:var(--icons-font); }
CSS Fonts Usage Example
Headlines and Paragraphs
A Header Provides a Short Summary of Content , HTML Typography Headers are Sized With REM to Give Your Design a Responsive Headlines. 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 Default 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 Meduim 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 Small 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.
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
<!-- Ordered List -->
<ol>
<li>Tornado v2 Ordered List</li>
<li>More Flexible Elements</li>
<li>Builded With Sass
<ol>
<li>Nested Ordered List Item</li>
</ol>
</li>
<li>Multi Languages Support [RTL]
<ul>
<li>Nested Unordered List Item</li>
</ul>
</li>
<li>Modern Userinterface Design</li>
<li>Awesome Typography Styling</li>
</ol>
<!-- Unordered List -->
<ul>
<li>Tornado v2 Unordered List</li>
<li>More Flexible Elements</li>
<li>Builded With Sass
<ul>
<li>Nested Unordered List Item</li>
</ul>
</li>
<li>Multi Languages Support [RTL]</li>
<li>Modern Userinterface Design
<ol>
<li>Nested Ordered List Item</li>
</ol>
</li>
<li>Awesome Typography Styling</li>
</ul>
<!-- Description list -->
<dl>
<dt>Carousel</dt>
<dd>black hot drink</dd>
<dt>Tabs System</dt>
<dd>a quite lovely city </dd>
<dt>Accourdion System</dt>
<dd>white cold drink</dd>
<dt>Popup Modals</dt>
<dd>Sometimes can be a lovely city </dd>
</dl>
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 |
---|---|---|
rtl | Any Elements | Force Element Direction to RTL |
ltr | Any Elements | Force Element Direction to LTR |
color-inherit | Any Elements | Changing text Color to the Parent txt Color. |
xLarge Size | ||
display-h0 | Any Elements | Larger Size Text [ 5rem ] |
display-h1 | Any Elements | Larger Size Text [ 4rem ] |
display-h2 | Any Elements | Larger Size Text [ 3rem ] |
display-h3 | Any Elements | Larger Size Text [ 2rem ] |
Paragraph Size | ||
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 ] |
Font Style | ||
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 |
Alignment | ||
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 |
tx-nowrap | Any Elements | Making Endless 1 Line Text and Hide the Flowing Text. |
line-height | ||
lineheight-1 | Any Elements | Text Lineheight 100% of the Size. |
lineheight-130 | Any Elements | Text Lineheight 130% of the Size. |
lineheight-150 | Any Elements | Text Lineheight 150% of the Size. |
lineheight-160 | Any Elements | Text Lineheight 160% of the Size. |