phenix-ui
v0.9.1
Published
Phenix Design System User Interface / Front-End Framework - Extended From 'Tornado UI v2'.
Downloads
228
Maintainers
eng-codeReadme
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 OptimizingBrowser 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, sizing, 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-uiafter 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/[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>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.
- Abdullah Ramadan - Phenix Founder
- Naotoshi Fujita - SplideJS Creator
- Daniel Eden - Animate.css Creator
License
Copyright (c) 2016-present, Abdullah Ramadan. Licensed under the terms of the MIT License.