Tornado Logo

Getting Start - Tornado UI v2

getting start with tornado ui framework and how to use it properly


Tornado is an Open Source Framework for Frontend 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 easy to control elements Builded With Sass and ES6 Babel for Easy Customizing.

Before You Start

Before you start working with the framework you must know that this framework ment to be a complete work enviroment not just including the production css/js files so if you want to understand what exactly happening and use it in the right way continue reading the docementation in order from sidemenu or just jump to the quick start and keep copy and paste codes into your project.


in order to install Tornado env you can download the complete OpenSource Repository Github from Here or you can use Git or NPM CLI and Clone or Install the Project into your Local Machine by runing the following Command after that you will need to install Node.JS and SASS the Ruby version for compiling the source files.

//====== Git CLI Clone =====//
git clone

//====== NPM Package Install ======//
npm install tornado-ui

github project clone command

NPM Dependencies Packages

Tornado UI have a few Node.JS Dependencies for SASS and Babel Rendering open the package.json file and Read it to know what is going to happen after that you will need to install the Dependencies by runing the following command

npm install

Node.JS Dependencies Install Command

Build and Watch

in order to build/compile the source files you can do that by runing the following command’s for building and watch each the SASS or JS Source Files.

//==== Build Tornado Command ====//
npm run tornado
//==== Watch Tornado SASS Command ====//
npm run tornado-sass
//==== Watch Tornado Javascript Command ====//
npm run tornado-js

Build and Watch NPM Script's

Files Structure

└─ Tornado Project
 |├─ Design Templates        [PSD/XD Workspace and Tornado UI Kit]
 |├─ dist                    [Production Files]
 ||├── css                   [Minified CSS Files]
 ||├── fonts                 [Default Used Fonts]
 ||├── js                    [Javascript Production Files]
 |├─ src                     [Project Source Files]
 ||├── SCSS                  [Tornado SASS/CSS Files]
 ||├── JavaScript            [Tornado Javascript Components Files]
 |├─ node_modules            [Node.JS Build Dependencies]
 |├─ package.json            [NPM Project Settings]
 |├─ .eslintrc.json          [ES-Linter Config]

Files and Folders Structure

Working With Sass

after install and testing your NPM scripts lets go and work with sass source files tornado css/sass is splited and organized for easy customizing and all files are imported in two primary files [ tornado.scss ] LTR version [ tornado-rtl.scss ] RTL version those two files contain all variables for [ direction, colors, font sizes responsive breakpoints, and imported files ] that been used cross all SCSS files and each code in every file imported is docemented and organized inside the code the list below is the structure of the sass files and all the code Write Down in simple understanding way for all levels from Beginners to Dragons.

└─ SCSS                     [Tornado SASS/CSS Files]
 |├─ tornado.scss           [Tornado LTR Variables]
 |├─ tornado-rtl.scss       [Tornado RTL Variables]
 |├─ _tornado-icons.scss    [Tornado icons Font Classes]
 |├─ _theme.scss            [Blank Theme File for You]
 |├─ assets                 [SASS/CSS Asseets and Helpers]
 ||├── _mixins.scss         [SASS Functions Like Media Query/Navigation Menu]
 ||├── _reset.scss          [CSS Reset Library]
 ||├── _selectors.scss      [SASS %Selector for Extending]
 ||├── _utilities.scss      [Tornado Global Utilities]
 |├─ grid                   [Tornado Grid System Splited and Organized]
 ||├── _grid-system.scss    [Grid System Basic CSS]
 ||├── _grid-columns.scss   [Grid System Columns Loop's]
 ||├── _grid-utilities      [Grid System Classes Helpers]
 |├─ forms                  [Tornado Form's Splited and Organized]
 ||├── _form-themes.scss    [Forms Style Theme CSS]
 ||├── _buttons.scss        [Buttons Style Theme CSS]
 ||├── _alerts.scss         [Alerts Style Theme CSS]
 ||├── _progress.scss       [Progress Bar's Style Theme CSS]
 |├─ components             [Tornado Components Splited and Organized]
 ||├── _accordion.scss      [Accordion Component Basic Theme]
 ||├── _tabs-system.scss    [Tabs Component Basic Theme]
 ||├── _tables.scss         [Tables Component Theme]
 ||├── _modals.scss         [Popup Modals Component Themes]
 ||├── _carousel.scss       [Slider Component Basic Theme]
 ||├── _animations.scss     [CSS Animations Library]
 ||├── _coloring.scss       [Colors/Backgrounds Classes]
 |├─ elements               [Tornado Elements Splited and Organized]
 ||├── _headers.scss        [Navbar/Header Theme CSS]
 ||├── _breadcrumbs.scss    [Breadcrumb's Themes CSS]
 ||├── _typography.scss     [Typography Basic Theme]
 ||├── _cards.scss          [Cards Blocks Theme CSS]
 ||├── _jumbtron.scss       [Hero/Jumbtron Theme CSS]
 ||├── _labels.scss         [Labels/Badges Theme CSS]
 ||├── _media-objects.scss  [Media Object Component Theme]
 ||├── _responsive-menus    [Responsive Navigation Menu Theme]
 ||├── _mobile-menu         [Responsive Navigation Menu Mobile Theme]
 |├─ icons                  [Tornado Font icons Splited and Organized]

Sass Components Mixins

Tornado Provide a nice controlers for components theme with sass mixin witch give you a control to extend and change the default theme like size , padding , font , colors , backgrounds witch you will find a example of code on each component example in this Docs of how to use the current component or element theme

in the code below you can find the Responsive mixin witch give you a ready to use breakpoint @media query for standard screens in the mixins of the media query below you can reverse the responsive to start from the greater screen to the smallest screen by adding one parameter value false.

/*=====> Extra Small Screen Mixin 0 ==> 480px <========*/
@include xSmall() { ... };

/*=====> Small Screen Mixin 576px ==> 640px <========*/
@include small() { ... };

/*=====> Medium Screen Mixin 768px ==> 980px <========*/
@include medium() { ... };

/*=====> Large Screen Mixin 1024px ==> 1366px <========*/
@include large() { ... };

/*=====> Extra Large Screen Mixin 1366px ==> 1600px <========*/
@include xlarge() { ... };

Copyright (c) 2016-present, Tornado UI Licensed under the terms of the MIT License.