phenix-ui

Phenix Design System

Simple, Effective, and powerful user-interface framework for faster and easier web development.

Explore Phenix docs »

Report bug Request feature Themes Blog

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

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

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, 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-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.

• 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.