Getting Started

getting start with tornado css framework.

Introduction

Tornado is an Open Source Framework for Forntend and UI/UX Designers made with love from a designer to designers the Main Goal of this framework is to make web design more simple and providing the best performance and dynamic easy to control elements Builded With Sass for Easy Customizing and Overriding Every Thing.

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/2.0/tornado.min.css" rel="stylesheet">
<!-- RTL Version -->
<link href="//cdn.jsdelivr.net/tornado/2.0/tornado-rtl.min.css" rel="stylesheet">
<!-- Animations File -->
<link href="//cdn.jsdelivr.net/tornado/2.0/animations.min.css" rel="stylesheet">

Embedding Required CSS Files Code

Tornado Javascript Functions Require jQuery version 3.x.x to Work Perfectly and There is a Version of Tornado for VUE.JS Framework


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

Embedding Required Javascript Files Code

Warning : Component List Below is Requiring JavaScript Files To Be Included

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

Dropdowns: black hot drink
Scrollspy: a quite lovely city
Viewport Animations: white cold drink
Form File Upload: Sometimes can be a lovely city

Form Range Slider: black hot drink
Form Advanced Select: a quite lovely city
Masonry Grid: white cold drink
Responsive Menus: Sometimes can be a lovely city

Starter template

Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:


<!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/2.0/tornado.min.css" rel="stylesheet">
        <!-- RTL Version -->
        <link href="//cdn.jsdelivr.net/tornado/2.0/tornado-rtl.min.css" rel="stylesheet">
        <!-- Animations File -->
        <link href="//cdn.jsdelivr.net/tornado/2.0/animations.min.css" rel="stylesheet">
    </head>
    <body>
        <!-- Page Content -->
        <h1>Hello, world!</h1>

        <!-- Required JS Files -->
        <script src="//cdn.jsdelivr.net/jquery/3.3.1/jquery.min.js"></script>
        <script src="//cdn.jsdelivr.net/tornado/2.0/tornado.min.js"></script>
    </body>
</html>
Starter HTML Structure Template Code

Next Download