Reusable Components
Header, navigation, footer, and theme toggle components that work seamlessly together. Use them on any page for instant consistency.
Welcome to the Component System
This page demonstrates how easy it is to create new pages with consistent branding, navigation, and functionality using our modular components.
Modular Component Features
Everything you need to build consistent, professional pages quickly
Central Configuration
All site settings (colors, contact info, branding) in one place. Update once, apply everywhere automatically.
Fully Responsive
Mobile-first design with responsive navigation, touch-friendly buttons, and adaptive layouts that work on all devices.
Accessibility Ready
WCAG 2.1 AA compliant with skip links, ARIA labels, keyboard navigation, and semantic HTML throughout.
Dark Mode Support
Built-in theme toggle with localStorage persistence and system preference detection. Smooth transitions between themes.
SEO Optimized
Comprehensive meta tags, Open Graph support, Schema.org markup, and automatic canonical URLs for better search rankings.
How to Use This System
Creating a new page is as simple as 1-2-3
Step 1: Copy the Template
cp includes/templates/base-template.php my-new-page.php
Step 2: Configure Your Page
$page_title = 'My New Page';
$page_description = 'Description for SEO';
$current_page = 'home';
Step 3: Add Your Content
Replace the example content in the MAIN CONTENT section with your own. Use the provided CSS classes for consistent styling. That's it!
Ready to Create Your Page?
Check out the documentation and start building with our modular components