What is Phenix Design System?
Phenix Design System is a comprehensive design and development ecosystem available in two powerful forms:
- phenix-ui: A standalone front-end framework for any web project
- pds-blocks: A WordPress plugin with Gutenberg blocks integration
Both share the same core front-end technology while offering different integration paths for your specific needs. Whether you're building a custom web application or enhancing a WordPress site, Phenix provides a complete solution with lightweight, performance-focused components.
Two Powerful Solutions
For WordPress Users (pds-blocks)
The complete WordPress plugin transforms the standard WordPress editor into a powerful design system with:
- Custom Gutenberg Blocks: 20+ specialized blocks for creating complex layouts
- Advanced Block Controls: Extensive styling options with responsive capabilities
- WordPress Integration: Seamless integration with WordPress core features
- Performance Optimization: Tools to enhance WordPress site speed
- WooCommerce Integration: Special features for e-commerce websites
- Developer Tools: APIs for custom post types, taxonomies, and more
For Frontend Developers (phenix-ui)
The standalone framework provides a lightweight solution for:
- Vanilla HTML/CSS/JS Projects: Use in any web project without WordPress
- Modern Web Applications: Integrate with React, Vue, Angular, or other frameworks
- Custom CMS Development: Add to any content management system
- Design System Foundation: Build your own design system on top of Phenix
- Legacy Project Enhancement: Improve existing projects with modern capabilities
WordPress Integration (pds-blocks)
The WordPress plugin enhances the standard block editor with powerful features:
Custom Gutenberg Blocks
A comprehensive collection of specialized blocks organized into logical categories:
Layout Blocks
- Container: Create boxed or full-width content areas with advanced styling
- Grid Row: Flexible row layouts with responsive controls and gap settings
- Grid Column: Responsive columns with width controls for all device sizes
- Group: Group content with advanced styling and positioning options
- Theme Part: Include reusable template parts within your content
Content Blocks
- Text: Enhanced text elements with advanced typography controls
- Media Element: Advanced image and video handling with responsive controls
- Icon Element: Insert and customize icons from multiple icon libraries
- Button: Create buttons with extensive styling and interaction options
- Logo: Insert and customize your site logo with sizing controls
- Page Head: Create dynamic page headers with title and breadcrumb support
Interactive Blocks
- Popup: Create modal popups with custom triggers and animations
- Navigation: Build responsive menus with mobile support and custom styling
- Custom Code: Insert custom HTML, CSS, and JavaScript
- 3D Viewer: Display interactive 3D models with customizable controls
- Logical Content: Display conditional content based on user roles, devices, or languages
Dynamic Blocks
- Query Block: Display posts with advanced filtering and pagination
- Taxonomies Block: Display taxonomy terms with custom styling
- Users Query Block: Display user information with filtering options
Block Controls
Every block includes powerful controls organized in intuitive panels:
- Layout Panel: Control alignment, width, height, and position
- Style Panel: Apply colors, backgrounds, borders, and effects
- Typography Panel: Customize fonts, sizes, and text styles
- Responsive Panel: Adjust display for different screen sizes
- Advanced Panel: Add custom attributes, CSS classes, and more
WordPress Optimization
Comprehensive tools to enhance WordPress performance:
- Head Optimizer: Remove unnecessary WordPress scripts
- Asset Management: Control CSS and JavaScript loading
- Image Optimization: Automatically optimize image sizes and loading
- WordPress Cleanup: Remove unused WordPress features
- WooCommerce Enhancement: Special optimizations for WooCommerce sites
Front-End Framework (phenix-ui)
The core front-end framework that powers both solutions:
CSS Framework
A lightweight yet powerful CSS framework (140KB/32KB gzipped):
Flexible Grid System: Responsive layouts with flexbox and grid
- Containers, rows, and columns with responsive control
- Automatic and custom gap settings
- Equal height and aligned columns
- Masonry layout option
Typography System: Comprehensive text styling
- Custom font management with variable fonts support
- Responsive text sizing and line heights
- RTL text support and multilingual capabilities
- Text alignment, decoration, and transformation controls
Utility Classes: Over 500 utility classes for rapid styling
- Spacing (margin, padding) with responsive variants
- Colors and backgrounds with opacity control
- Display, positioning, and sizing utilities
- Flexbox and grid helpers
Component Library: Ready-to-use UI components
- Buttons, cards, alerts, and badges
- Modals, tooltips, and popovers
- Tabs, accordions, and carousels
- Navigation menus and breadcrumbs
JavaScript Utilities
Modern, lightweight JavaScript tools (80KB/30KB gzipped):
DOM Manipulation: Simplified working with DOM elements
- Element selection and traversal
- Class and attribute manipulation
- Event handling and delegation
- Dynamic content insertion
UI Components: Ready-to-use interactive elements
- Modals and popups with multiple triggers
- Tabs and accordion systems
- Dropdown menus and navigation
- Form validation and enhanced inputs
Media Handling: Advanced media capabilities
- Lazy loading for images and videos
- Responsive media embedding
- Lightbox and gallery components
- Video and audio players with custom controls
Advanced Animation System
The latest version introduces a powerful animation system that takes your content to the next level:
- Progress Tracking: Control animation progress based on scroll position
- Viewport Detection: Trigger animations when elements enter or exit the viewport
- Exit Animations: Define separate animations when elements leave the viewport
- Animation Delay: Set staggered timing for groups of animated elements
- Model Viewer: Display interactive 3D models with pan, zoom, and rotate controls
- Multiple Format Support: Support for GLTF, GLB, OBJ, and FBX formats
- Responsive Sizing: Automatically adapt 3D content to different screen sizes
- Three.js Integration: Powered by the industry-standard 3D library
Phenix Design System provides powerful tools for both WordPress and front-end developers:
For WordPress Developers
For Front-End Developers
Core Principles
- No-Code Website Building: Create complex, professional websites without writing code
- Developer-Friendly Architecture: Built with modern development practices (SASS, TypeScript)
- Performance-Focused: Optimized for speed with minimal file sizes (Core CSS: 140KB/32KB gzipped, JS: 80KB/30KB gzipped)
- Comprehensive Design System: Consistent styling, typography, spacing, and interaction patterns
- Extensible Platform: Designed to be extended and customized for specific project needs
Technical Specifications
- Version: 1.3.0
- Requirements: WordPress 6.0+, PHP 7.4+
- Browser Support: Chrome, Firefox, Safari, Edge (latest versions)
- File Size: Core CSS (140KB/32KB gzipped), JavaScript (80KB/30KB gzipped)
- Languages: Full RTL support and translation-ready
- License: GPL2 for WordPress plugin, MIT for standalone framework
Documentation Structure
This documentation is organized into two main sections:
For users of the WordPress plugin (pds-blocks):
For users of the standalone framework (phenix-ui) or WordPress developers needing front-end details:
