Phenix-ui NPM | npm.io

Introduction

Phenix DS 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

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


v63+	v84+	v12+	v64+	v84+	~~Dead~~

Documentation

you can visit the offical website of phenix design system and read the documentation to master the frameowork : design.phenixthemes.com.

Where to Start

to use and understand phenix design pattern you need to get familiar with all Utilities class names like spacing , s izing , colors , 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 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 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.

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/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** 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** 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/phenix-ui@0.9.1/dist/js/phenix.js"></script>

Credits

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.