<p align="center">
  <a href="https://design.phenixthemes.com">
    <img src="https://phenixthemes.com/pds-docs/wp-content/uploads/sites/2/2022/09/phenix-design-icon.svg" alt="Phenix Design logo" width="175" height="162">
  </a>
</p>

<h2 align="center">Phenix Design System</h2>

<p align="center">
  Simple, Effective, and powerful user-interface framework for faster and easier web development.
</p>
<p align="center">
  <a href="https://design.phenixthemes.com"><strong>Explore Phenix docs »</strong></a>
</p>
<p align="center">
<a href="https://github.com/EngCode/phenix-ui/issues/new?assignees=-&labels=bug&template=bug_report.yml">Report bug</a>
<a href="https://github.com/EngCode/phenix-ui/issues/new?assignees=&labels=feature&template=feature_request.yml">Request feature</a>
<a href="https://phenixthemes.com/">Themes</a>
<a href="https://blog.phenixthemes.com/">Blog</a>
</p>

<p align="center">
  <img src="https://img.shields.io/badge/build-v0.9.1-blue.svg" alt="" />
  <img src="https://img.shields.io/github/languages/code-size/EngCode/phenix-ui.svg" alt="" />
  <img src="https://img.shields.io/github/repo-size/EngCode/phenix-ui.svg" alt="" />
  <img src="https://img.shields.io/github/issues/EngCode/phenix-ui.svg" alt="" />
  <img src="https://img.shields.io/badge/%40typescript-v3.9.10-blue.svg" alt="" />
  <img src="https://img.shields.io/badge/Sass-v7.0.1-blue.svg" alt="" />
</p>
</div>

---

### Introduction

**[Phenix DS](https://design.phenixthemes.com/about-phenix/ "About Phenix")** is lightweight user-interface framework 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.

---

#### 🚀 Phenix Key-Features

<div>
<ul style="list-style:none;padding:0;margin:0">
    <li>✅ Core CSS 140kb and 32KB Gzipped</li>  
    <li>✅ JavaScript 80kb and 30KB Gzipped</li>
    <li>✅ Builded with Sass and TypeScript</li>
    <li>✅ Built-In Powerful JavaScript plugins</li>
    <li>✅ Build Anything with CSS Utilities</li>
    <li>✅ Flexbox Grid System</li>
    <li>✅ Masonry Grid Mode</li>
    <li>✅ RTL & LTR Fully-Support</li>
    <li>✅ CSS Variable for Design System</li>
    <li>✅ Responsive for 5 Breakpoints</li>
    <li>✅ DOM Manipulation methods</li>
    <li>✅ DOM Traversing methods</li>
    <li>✅ Javascript Media Query</li>
    <li>✅ Live Event Listener</li>
    <li>✅ DOM Javascript UI Effects</li>
    <li>✅ Responsive Multimedia</li>
    <li>✅ Javascript Time Counter</li>
    <li>✅ Dropdown Buttons and Menu's</li>
    <li>✅ View-Port Animations</li>
    <li>✅ Standard Form Controls</li>
    <li>✅ Advanced Select Control</li>
    <li>✅ Easy Form Validation</li>
    <li>✅ CSS Utilities to build freely</li>
    <li>✅ Responsive Navigation Menu</li>
    <li>✅ Responsive Megamenu</li>
    <li>✅ Notifications System</li>
    <li>✅ Advanced Popup Modals</li>
    <li>✅ Simple Tabs & Panels</li>
    <li>✅ Shape Shifter Progress Bars</li>
    <li>✅ Lazy-Loading for Everything</li>
    <li>✅ JavaScript Data attributes API</li>
    <li>✅ CSS Animations on Demand</li>
    <li>✅ Slider/Carousel on Demand</li>
    <li>✴️ Tooltip & Popovers</li>
    <li>✴️ Advanced Form Controls</li>
    <li>✴️ Advanced Datatables</li>
    <li>✴️ Design Theme Switcher</li>
    <li>✴️ Advanced HTML Multimedia Players</li>
</ul>
</div>

---

#### Changelog Update v0.9.X {WIP}

```
01 - [new] Phenix Repeater
02 - [new] Phenix Uploader
03 - [new] Rating Controller
04 - [new] Clip-Path Method (https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path)
```

---

#### Changelog Update v0.7.X

```
01 - [Doc] Carousel Slider
02 - [update] CSS Layout Groups
03 - [update] Advanced Select [rebuild, react compatibility, multiple mode]
04 - [update] Counter Lazyloading
05 - [update] Timer Lazyloading
06 - [update] Responsive Form Controls Sizes
07 - [update] Border Utilities
08 - [update] Position Utilities changed
09 - [update] Dynamic Position for Dropdowns, Select
10 - [update] Popups Modal and Select Component.
11 - [BugFix] Dropdown, Navbar, Buttons, React-Js Mode.
```

---

#### Changelog Update v0.6.5

```
01 - [upgrade] Masonry Grid Mode
02 - [new] Collapse Javascript
03 - [upgrade] Re-Build Accordion with Collapse
04 - [new] Multi-level Dropdowns and Megamenu
05 - [new] CSS Animations on Dimand
06 - [upgrade] Add Media Lightbox for Popups.
07 - [new] Notifications and Toasts
08 - [upgrade] Typography CSS Utilites
09 - [update] Animations on Demand Demand Demand Types
10 - [new] Progress Bars
11 - [update] Carousel Slider Optimizing
```

-----------------------

#### Browser Support

| ![](https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![](https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![](https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![](https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![](https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png) | ![](https://raw.githubusercontent.com/alrra/browser-logos/master/src/archive/internet-explorer_9-11/internet-explorer_9-11_48x48.png) |
|:-----------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------:|:---------------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------:|:-----------------------------------------------------------------------------------------:|:-------------------------------------------------------------------------------------------------------------------------------------:|
| v63+                                                                                            | v84+                                                                                          | v12+                                                                                          | v64+                                                                                        | v84+                                                                                      | ~~Dead~~                                                                                                                              |

---

#### [Documentation](https://design.phenixthemes.com)

you can visit the offical website of phenix design system and read the documentation to master the frameowork : [design.phenixthemes.com](https://design.phenixthemes.com).

---

### Where to Start

to use and understand phenix design pattern you need to get familiar with all [Utilities](https://design.phenixthemes.com/category/utilities/) class names like [spacing](https://design.phenixthemes.com/spacing/)[,](https://design.phenixthemes.com/display/) [s](https://design.phenixthemes.com/sizing/)[izing](https://design.phenixthemes.com/sizing/)[, colors](https://design.phenixthemes.com/colors/)[, backgrounds](https://design.phenixthemes.com/backgrounds/) to be able to customize and change any component used in the documentation examples and builds.

---

### Installation

phenix is available through NPM and Github you will need [Node.js](https://nodejs.org/en/download/ "Download Node JS") to install and import phenix into your project with CLI, or you can clone this project and work from it directly as work enviroment

```
====== Git CLI Clone =====
git clone https://github.com/EngCode/phenix-ui.git

====== NPM Install ======
npm install phenix-ui
```

after that you will need to install Node.JS and SASS the Ruby version for compiling the source files.

---

### 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](https://design.phenixthemes.com/category/sass-customize/ "SASS Customize") 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](https://design.phenixthemes.com/category/typescript-js/ "Typescript").

---

### CDN CSS

the next piece of code will load ******[Phenix D.S](https://design.phenixthemes.com/ "Home")****** 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/phenix-ui@0.9.1/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](https://design.phenixthemes.com/ "Home")**** 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/phenix-ui@0.9.1/dist/css/phenix-rtl.css" rel="stylesheet" />
```

---

### CDN JavaScript

the next piece of code will load ****[Phenix D.S](https://design.phenixthemes.com/ "Home")**** [JavaScript](https://design.phenixthemes.com/category/typescript-js/ "Typescript") for [ui Effects](https://design.phenixthemes.com/ui-effects/ "UI Effects") and Interactive [Components](https://design.phenixthemes.com/category/components/ "Components") like [[popups](https://design.phenixthemes.com/popup-modals/ "Popup Modals"), [sliders](https://design.phenixthemes.com/carousel-slider/ "Carousel Slider"), [animations](https://design.phenixthemes.com/animations/ "Animations"), [tabs](https://design.phenixthemes.com/tabs-panels/ "Tabs & Panels"), [data tables](https://design.phenixthemes.com/data-tables/ "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/phenix-ui@0.9.1/dist/js/phenix.js"></script>
```

---

### Credits

this project was created in 2016 under the code-name **[Tornado UI](https://tornado.phenixthemes.com/)** until 2022 the name was changed to fit the new personal-business brand **[Phenix Themes](https://phenixthemes.com/ "https://phenixthemes.com")**.

- [Abdullah Ramadan](https://www.facebook.com/Eng.AbdallahPS) - Phenix Founder
- Naotoshi Fujita - [SplideJS]([](https://github.com/Splidejs/splide)) Creator
- Daniel Eden - [Animate.css](https://animate.style/) Creator

--------------------

### License

Copyright (c) 2016-present, [Abdullah Ramadan](https://www.facebook.com/Eng.AbdallahPS). Licensed under the terms of the [MIT License](https://opensource.org/licenses/MIT).
