Phenix Design System

Utilities Based Front-End Framework

Simple, Effective, and powerful user-interface framework for faster and easier web development with today performance, utilize prebuilt grid system and components, and bring projects to life with powerful JavaScript plugins.

Download Read Documentation Github

Wait for it

yes it is another framework but smaller, faster, simple to understand, makes you write a clean human code

but most of all you properly will never need any thing with it to build whatever you need with your own rules.

Your Workspace !Your Rules

Phenix is Build for Phenix

but is free to use for anyone

the design system was build for personal use and published for who ever is interested and will always go forward with phenix needs.

Familiar and Easy to move from

phenix design system build to be familiar for make it easy to move from it to any other framework without losing your head.

Never Forget Your Skills

phenix is not meant for those how hate to code its build RAW which means you build-up on it your design concept using some of your own CSS and JavaScript so try to learn its way of thinking

You Control Everything

nothing in phenix works from it self and everything will work and load when you only need it to, which make it perfect to work alongside React, Vue, Angular frameworks

Fully RTL Support

phenix design system is the real deal multi-language support framework is build with a dynamic mechanism to shift everything with logical properties and utilities

Variables and Data API

the design system and every primary based component has its CSS variables to control it and shift it as you wish, and all JavaScript plugins support options with data-attribute API

Ready to Dig into Phenix ?

its ready for you when you are give it a try you might fall in love with it

Download Read Documentation Github

Key Features

  • CSS 100kb and 17KB gzipped
  • Builded with Sass and TypeScript
  • JavaScript 65kb and 17KB gzipped
  • Built-In Powerful JavaScript plugins
  • Build Anything with CSS Utilities
  • Flexbox Grid System
  • Masonry Grid Mode
  • RTL & LTR Fully-Support
  • CSS Variables 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
  • Design Theme Switcher
  • API Connection Handler
  • Standard Form Controls
  • Advanced Select
  • Advanced Files Uploader
  • Range Slider
  • Rating Controller
  • Form Repeater
  • Easy Form Validation
  • Advanced Datatables
  • Responsive Navigation Menu
  • Responsive Megamenu
  • Notifications System
  • Advanced Popup Modals
  • Simple Tabs & Panels
  • Tooltip & Popovers
  • Shape Shifter Progress Bars
  • Advanced Multimedia Players
  • Lazy-Loading for Everything
  • JavaScript Data attributes API
  • CSS Animations on Dimand

Give it a try you might fall in love with it

you can start using phenix design system from GitHub or npm or you can download the source

Download Read Documentation Github

Copyright (c) 2021-Present, Phenix D.S (Abdullah.Ramadan) Licensed under the terms of the MIT License.