Introduction
Tornado is an Open Source User-Interface Framework for Frontend and UI/UX Designers made with love from a designer to designers the Prime Purpose of this framework is to make web design more simple and providing the best performance and easy to control elements Builded With Sass and ES-Next Typescript for Easy Customizing.
Installation
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 https://github.com/EngCode/Tornado-UI-v2.git //====== NPM Package Install ======// npm install tornado-uigithub project clone 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 Typescript Source Files Changes.
//==== Watch Tornado SASS Command ====// npm run tornado-sass //==== Watch Tornado Typescript/Javascript Command ====// npm run tornado-ts //==== Watch Tornado React Command ====// npm run tornado-reactBuild 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] ||├── Typescript [Tornado Typescript/Javascript Files] ||||├── React [Tornado React Components Files] ||||├── Base [Tornado Method and Components Files] |├─ 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 across 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]
||├── _animations.scss [CSS Animations Library]
||├── _coloring.scss [Colors/Backgrounds Classes]
|├─ 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]
|├─ 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]
||├── _forms.scss [Form Controls Theme CSS]
|├─ 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]
||├── _navigation-menu.scss [Responsive Navigation Menu Themes]
|├─ Icons [Tornado Icons Splited and Organized]
....Responsive 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() { ... };NPM Packages
Tornado UI have a few Node.JS Dependencies for SASS and Typescript 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 installNode.JS Dependencies Install Command