Introduction

Getting Start with Phenix Design System a Utilities Based Front-End Framework for building responsive, mobile-first Apps, with HTML, SASS and Typescript so to sum up,

Phenix DS is lightweight user-interface framework similar to “Bootstrap, Material CSS, Foundation 5” etc & was build for simple structure, fast execution, and performance is number One concern in mind it was build for personal use and later published as open-source project for web community benefits,

this project was created in 2016 under the code-name Tornado UI until 2022 the name was changed to fit the new personal-business brand Phenix Themes.

Where to Start

to use and understand phenix design pattern you need to get familiar with all Utilities class names like spacing, sizing, colors, backgrounds to be able to customize and change any component used in the documentation examples and builds.


Quick Setup

if you’re looking to quickly setup and start using Phenix D.S you can use the compiled files and include them to your html document in the next section you will find a CDN links for the “CSS & JS” compiled files you can copy them and place them into your document.

CDN CSS

the next piece of code will load Phenix D.S Stylesheet “LTR” version from npm CDN Links you can copy it and place it into your document <head>...</head> tag.

<!-- Phenix CSS LTR -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/phenix.css" rel="stylesheet" />

Right-to-Left (RTL) Version

if your document language is right-to-left you can use Phenix D.S Stylesheet “RTL” version from npm CDN Links you can copy it and place it into your document <head>...</head> tag.

<!-- Phenix CSS RTL -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/phenix-rtl.css" rel="stylesheet" />

CDN JavaScript

the next piece of code will load Phenix D.S JavaScript for ui Effects and Interactive Components like [popups, sliders, animations, tabs, data tables] from npm CDN Links you can copy it and place it before your document </body> closing tag.

<!-- Phenix JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/phenix.js"></script>

Starter template

when you put the CSS,JS togther your document code should look like the one below it is the most basic structure for Responsive & SEO Friendly WebApp.

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <!-- Essential Meta Tags -->
        <meta name="language" content="en">
        <meta http-equiv="x-ua-compatible" content="text/html" charset="utf-8">
        <meta name="robots" content="index, follow" />
        <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" />
        <meta name="copyright" content="the app copyrights goes here">

        <!-- Title and Favicon -->
        <title>Phenix Design System v1 [Tornado UI v3]</title>
        <link rel="shortcut icon" type="image/png"  href="img/fevicon.png">

        <!-- Required CSS Files -->
        <link href="https://unpkg.com/[email protected]/dist/css/phenix.css" rel="stylesheet" />
    </head>
    <body>
        <!-- Your Code Start from Here -->
        
        <!-- Required JS Files -->
        <script src="https://unpkg.com/[email protected]/dist/js/phenix.js"></script>
    </body>
</html>

Download

you can download phenix directly as source code or compiled files to use it or include it with your favorite package managers like npm, RubyGems, etc,


NPM Installation

phenix is available through NPM [node package manager] you will need Node.js to install and import phenix into your project with CLI npm install phenix-ui then you can import [ TypeScript , SASS ] Modules,

SASS Modules

after installing phenix-ui from npm you can import sass modules into you project sass with @import './node_modules/phenix-sass/*' which will import the “*name” module into your project, for more information about SASS modules click here also,

Typescript Modules

you can import and use the TypeScript modules into your project typescript by import Phenix from './node_modules/phenix-ts' which will import Phenix plugins for you to use it in your project,

or you can use it as JavaScript module by import Phenix from "./node_modules/phenix-js" inside your script file or even with html script in the example below, for more information about how to use P.D.S TypeScript/JavaScript click here.

<script type="module">
    import Phenix from  "./node_modules/phenix-js" || "CDN URL";
</script>

Table of Content