Getting Start

Tornado is A User Interface Framework for makeing web design simple.

Download and Getting Start :

to get start offline download the project from github and copy all files inside the dist folder and put it inside your project folder.

Quick start :

Looking to quickly add Tornado to your project? Use the CDN Call URls Provided by jsdelivr copy and past the css files inside your html head tag and add the javascript files before the </body> closing tag. 

<!-- Required CSS Files -->
<link href="//cdn.jsdelivr.net/tornado/1.0/tornado.css" rel="stylesheet">
<!-- RTL Version -->
<link href="//cdn.jsdelivr.net/tornado/1.0/tornado-rtl.css" rel="stylesheet">
<!-- Animations File -->
<link href="//cdn.jsdelivr.net/tornado/1.0/animations.css" rel="stylesheet">

<!-- Required JS Files -->
<script src="//cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/tornado/1.0/tornado.js"></script>

Starter template : 

<!DOCTYPE html>
<html lang="en">
    <head>
        <!-- Required meta tags always come first -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <meta name="description" content="A Description Of The Project">
        <meta name="keywords" content="The keywords">
        <title>Website Name</title>
        <!-- Required CSS Files -->
        <link href="//cdn.jsdelivr.net/tornado/1.0/tornado.css" rel="stylesheet">
        <!-- RTL Version  <link href="//cdn.jsdelivr.net/tornado/1.0/tornado-rtl.css" rel="stylesheet"> -->
        <link href="//cdn.jsdelivr.net/tornado/1.0/animations.css" rel="stylesheet">
    </head>
    <body>
        
        <!-- Required JS Files -->
        <script src="//cdn.jsdelivr.net/jquery/3.1.1/jquery.min.js"></script>
        <script src="//cdn.jsdelivr.net/tornado/1.0/tornado.js"></script>
    </body>
</html>

Changing Colors and Font : 

/*======== Fonts ========*/

body {
    background: #fafafa;
    color: rgba(0, 0, 0, 0.80);
    font-family: 'Roboto','Raleway',Arial,tahoma;
}

form * {
    font-family: 'Roboto','Raleway',Arial,tahoma;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6,
dl.ui-tornado dt,
.form-ui label,
.modal-box.tornado-ui .modal-content .modal-head {
    font-family:'Raleway','Roboto',Arial,tahoma;
    font-weight: 700;
}


/*======== Primary Color ========*/

.primary-bg,
.primary-bg-hoverable,
.quote-th3,
.btn.primary,
.theme-tornado .back-bar .selected-bar,
.theme-tornado .back-bar .pointer,
.form-ui label.checkbox input:checked + span:before,
.form-ui label.checkbox-switch input:checked + .switch,
.form-ui label.radio-button input:checked + span:before,
.pagination .active {
    background: #3498db;
    color: #FFF;
}

.primary-text,
.primary-text-hoverable,
.btn.primary.outline,
a:not(.btn) {
    color: #3498db;
}

.btn.primary.outline {
    border-color: #3498db
}


/*=== Primary Color Hover ===*/

.primary-bg-hoverable:hover,
.btn.primary:hover,
.btn.primary.outline:hover,
.btn.primary.active,
.form-ui label.checkbox-switch input:checked + .switch:before {
    background: #2980b9;
    color: #FFF;
}

.primary-text-hoverable:hover {
    color: #2980b9;
}

.btn.primary.outline:hover {
    border-color: #2980b9;
}


/*======== Secondary Color ========*/

.secondary-bg,
.secondary-bg-hoverable,
.btn.secondary {
    background: #546e7a;
    color: #FFF;
}

.secondart-text,
.secondart-text-hoverable,
.btn.secondary.outline {
    color: #546e7a;
}

.btn.secondary.outline {
    border-color: #546e7a;
}


/*=== Secondary Color Hover ===*/

.secondary-bg-hoverable:hover,
.btn.secondary:hover,
.btn.secondary.outline:hover,
.btn.secondary.active {
    background: #2c3e50;
    color: #FFF;
}

.secondart-text-hoverable:hover {
    color: #2c3e50;
}

.btn.secondary.outline:hover {
    border-color: #2c3e50;
}


/*=== Menu Theme ===*/

.navigation-menu .menu-button {
    border: 0;
    background: transparent;
    font-size: 30px;
    cursor: pointer;
    color: rgba(0, 0, 0, .60);
}

.navigation-menu > ul:not(.mobile-menu) > li {
    line-height: 2.4;
    padding: 0 15px;
}

.navigation-menu > ul:not(.mobile-menu) > li > a {
    color: #8f8f8f;
    font-size: 16px;
    display: block;
}

.navigation-menu > ul:not(.mobile-menu) > li:hover > a,
.navigation-menu > ul:not(.mobile-menu) > li.active > a {
    color: #2b2b2b;
}


/**** Submenu ****/

.navigation-menu > ul:not(.mobile-menu) > li > ul li {
    padding: 0 15px;
    line-height: 45px;
    font-size: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, .10);
    background: #f3f3f3;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}

.navigation-menu > ul:not(.mobile-menu) > li > ul li a {
    color: #aeaeae;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    display: block;
}

.navigation-menu > ul:not(.mobile-menu) > li > ul li:hover > a {
    color: #2b2b2b;
}

Support :

if you have an issue using tornado or have a new idea to make it beeter submit a new request from here githup issues