Skip to content

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:

  1. phenix-ui: The standalone front-end framework that can be used with any project or CMS
  2. 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:

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

Released under the MIT License.