Introduction

Phenix Design System is lightweight user-interface framework build for simple structure, fast execution, and performance is number One concern in mind it was built for personal use and later published as open-source project for web community benefits.

‣ Development Progress Report

🚀 Phenix Key-Features

✅ Core CSS 140kb and 32KB Gzipped
✅ JavaScript 80kb and 30KB Gzipped
✅ Built 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 Data-tables
✴️ Design Theme Switcher
✴️ Advanced HTML Multimedia Players

Notion Documentation

Phenix Undocumented Features

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

Introduction

🚀 Phenix Key-Features

Notion Documentation

Getting Start

Grid Layout

Content

Forms

Utilities

Helpers

SASS Customize

Typescript

CSS Components

JS Components

Credits