Default Theme Dark Theme
Tornado Logo
Tornado has become Phenix Design System

Quick start - Tornado UI

if your looking to quickly work with tornado using the production files this is for you.

Quick start

Looking to quickly add Tornado to your project ? Use the CDN Call URls Provided by unpkg npm cdn copy and past the css files inside your html head tag and add the javascript files before the closing tag.

<!-- Tornado CSS -->
<link href="https://unpkg.com/[email protected]/dist/css/tornado.css" rel="stylesheet">
<!-- RTL Version -->
<link href="https://unpkg.com/[email protected]/dist/css/tornado-rtl.css" rel="stylesheet">
<!-- Tronado Icons CSS -->
<link href="https://unpkg.com/[email protected]/dist/css/tornado-icons.css" rel="stylesheet">
<!-- Tornado JS -->
<script src="https://unpkg.com/[email protected]/dist/js/tornado.min.js"></script>

Embedding Required Javascript Files Code

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" dir="ltr">
<head>
<!-- Required Meta Tags -->
<meta name="language" content="en">
<meta http-equiv="x-ua-compatible" content="text/html" charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="The Description of This Page Goes Right Here and its !Important" />
<meta name="keywords" content="keywords,goes,here,for,this,web,site,its,!important,and,keep,it,dynamic" />
<title>Tornado Starter Template</title>
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="This Page title Goes Here" />
<meta property="og:description" content="The Description of This Page Goes Right Here" />
<meta property="og:url" content="http://domain.com/page-url/" />
<meta property="og:image" content="img/logo.png" />
<meta name="twitter:image" content="img/logo.png">
<meta name="facebook:description" content="The Description of This Page Goes Right Here" />
<!-- Other Meta Tags -->
<meta name="robots" content="index, follow" />
<meta name="copyright" content="Sitename Goes Here">
<link rel="shortcut icon" type="image/png" href="img/logo.png">
<!-- Required CSS Files -->
<link href="https://unpkg.com/[email protected]/dist/css/tornado.css" rel="stylesheet" />
<!-- Tronado Icons CSS -->
<link href="https://unpkg.com/[email protected]/dist/css/tornado-icons.css" rel="stylesheet">
</head>
<body>
<!-- Tornado JS -->
<script src="https://unpkg.com/[email protected]/dist/js/tornado.min.js"></script>
<!-- Tornado React -->
<script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"</script>
<script src="js/tornado.react.js"></script>
</body>
</html>

Starter HTML Structure Template Code

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