Front-End Development Overview
This section covers all the front-end aspects of the Phenix Design System, including SASS framework, TypeScript utilities, UI components, and more.
Phenix Ecosystem
Phenix Design System is available in two distinct packages:
- phenix-ui: The standalone front-end framework that can be used with any project or CMS
- pds-blocks: The complete WordPress plugin that includes the front-end framework plus Gutenberg blocks integration
The documentation in this section primarily focuses on the front-end framework, which is common to both packages. For WordPress-specific features, please refer to the WordPress Documentation section.
Core Modules
The front-end system in Phenix is divided into several core modules:
Getting Started
Fundamental information about installation, configuration, working with SASS, and TypeScript.
CSS Modules
Grid system, typography, and utility classes for styling your application.
JavaScript Modules
DOM manipulation tools, UI effects, animations, and other JavaScript utilities.
UI Components
Pre-built components like alerts, buttons, modals, and navigation systems.
Form Controls
Form input elements, validation, and advanced form components.
Helpers & Tools
Additional utilities for performance optimization, icons, effects, and more.
Key Features
- Lightweight: Core CSS is only 140KB (32KB gzipped), JavaScript is 80KB (30KB gzipped)
- Modern Development: Built with SASS and TypeScript
- Flexible Grid System: Flexbox and Masonry grid modes
- RTL & LTR Support: Full bidirectional text support
- Responsive Design: Optimized for all device sizes with 5 breakpoints
- JavaScript Utilities: Powerful DOM manipulation, effects, and UI components
- Performance Optimized: Fast loading and execution times
How to Choose
Use phenix-ui when you need a lightweight front-end framework for:
- Vanilla HTML/CSS/JS projects
- Non-WordPress CMS platforms
- React, Vue, or Angular applications
- Custom web applications
- Installation Guide
Use pds-blocks when you're:
- Building a WordPress site
- Using the Gutenberg editor
- Need built-in blocks and WordPress integrations
- WordPress Installation Guide
::: note Important: The WordPress plugin (pds-blocks) is not available on the WordPress.org plugin directory. It can only be downloaded from the official Phenix website or GitHub repository. :::
Documentation Structure
- Frontend Documentation: This section covers the core UI framework, applicable to both standalone and WordPress versions
- WordPress Documentation: Visit the WordPress Section for specific Gutenberg blocks, WordPress integration, and plugin features
How to Use This Documentation
Each section provides detailed guidance on implementing Phenix's front-end features. Browse through the sidebar to navigate to specific features you're interested in.