PHPackages                             douglasgreen/pagemaker - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. douglasgreen/pagemaker

ActiveProject

douglasgreen/pagemaker
======================

Bootstrap page maker

06PHP

Since Mar 1Pushed 2mo agoCompare

[ Source](https://github.com/douglasgreen/pagemaker)[ Packagist](https://packagist.org/packages/douglasgreen/pagemaker)[ RSS](/packages/douglasgreen-pagemaker/feed)WikiDiscussions main Synced 1mo ago

READMEChangelogDependenciesVersions (3)Used By (0)

PageMaker — System Architecture & Specification
===================================================

[](#pagemaker--system-architecture--specification)

A mobile-first, responsive page layout system built on **Bootstrap 5.3**, **PHP 8.2+**, and the Twig templating engine.

---

Table of Contents
-----------------

[](#table-of-contents)

1. [Architecture Overview](#1-architecture-overview)
2. [Core Interfaces and Enums](#2-core-interfaces-and-enums)
3. [The PageMaker Class](#3-the-pagemaker-class)
4. [Layout Patterns](#4-layout-patterns)
5. [Structural Sections](#5-structural-sections)
6. [Interactive Widgets & UI Components](#6-interactive-widgets--ui-components)
7. [Grid System & Breakpoint Reference](#7-grid-system--breakpoint-reference)
8. [Asset Management](#8-asset-management)
9. [Template Specifications](#9-template-specifications)
10. [Usage Patterns](#10-usage-patterns)

---

1. Architecture Overview
------------------------

[](#1-architecture-overview)

### 1.1 Design Philosophy

[](#11-design-philosophy)

PageMaker treats a web page as a **composition of structural sections** (header, footer, left sidebar, right sidebar, main content) arranged according to a named **layout pattern**. Every section accepts content as `string|Renderable|callable`, giving consumers three ways to populate any slot:

Content TypeExampleWhen to Use`string``'Hello'`Static HTML or simple text`Renderable``new Breadcrumb($items)`Reusable component objects`callable``fn() => $twig->render(...)`Lazy evaluation, expensive queriesThe system is **mobile-first**: every template starts with the smallest-viewport layout and layers on complexity at wider breakpoints using Bootstrap's responsive utilities.

### 1.2 Technology Stack

[](#12-technology-stack)

LayerTechnologyRoleRuntimePHP 8.2+Class model, enums, interfacesTemplatesTwig 3.xHTML generationCSS FrameworkBootstrap 5.3.xGrid, utilities, componentsIconsBootstrap Icons 1.11+Sidebar/icon-strip iconsJavaScriptBootstrap 5.3 bundle (Popper included)Offcanvas, collapse, dropdowns### 1.3 High-Level Architecture

[](#13-high-level-architecture)

The PageMaker system follows a **builder pattern** with clear separation of concerns:

 ```
graph TB
    subgraph "Client Code"
        A[Application Controller]
    end

    subgraph "Core Layer"
        B[PageMaker Class]
        C[AssetManager]
    end

    subgraph "Type System"
        D[LayoutPattern Enum]
        E[Breakpoint Enum]
        F[AssetPosition Enum]
        G[Renderable Interface]
    end

    subgraph "Component Layer"
        H[Navbar]
        I[Sidebar]
        J[Footer]
        K[Breadcrumb]
        L[HeroSection]
        M[TabSet]
        N[Accordion]
        O[Modal]
        P[Carousel]
        Q[Form]
    end

    subgraph "Template Layer"
        R[Twig Environment]
        S[base.html.twig]
        T[Layout Templates]
        U[Component Templates]
    end

    subgraph "Output"
        V[HTML Page]
    end

    A --> B
    B --> C
    B --> D
    B --> E
    B --> F
    B --> R

    H --> G
    I --> G
    J --> G
    K --> G
    L --> G
    M --> G
    N --> G
    O --> G
    P --> G
    Q --> G

    B -->|accepts| G
    B -->|accepts| string
    B -->|accepts| callable

    R --> S
    S --> T
    S --> U

    T --> V
    U --> V
    C --> V

    style B fill:#4a90d9,stroke:#2c5aa0,color:#fff
    style G fill:#50c878,stroke:#2e8b57,color:#fff
    style R fill:#daa520,stroke:#b8860b,color:#fff
```

      Loading ### 1.4 Data Flow

[](#14-data-flow)

 ```
sequenceDiagram
    participant App as Application
    participant PM as PageMaker
    participant AM as AssetManager
    participant Comp as Components
    participant Twig as Twig Engine
    participant Output as HTML Output

    App->>PM: Create PageMaker instance
    App->>AM: Register CSS/JS assets
    App->>PM: Set layout pattern & breakpoint
    App->>PM: Set column widths
    App->>Comp: Create component instances
    Comp-->>PM: Return Renderable objects
    App->>PM: Populate content slots

    Note over PM: Build template context
    PM->>PM: Resolve all content slots
    PM->>PM: Generate context array

    PM->>Twig: Render with template & context
    Twig-->>PM: Return rendered HTML
    PM-->>App: Return complete page HTML
    App-->>Output: Send to browser
```

      Loading ### 1.5 Directory Structure

[](#15-directory-structure)

```
pagemaker/
├── src/
│   ├── Enums/
│   │   ├── LayoutPattern.php
│   │   ├── Breakpoint.php
│   │   └── AssetPosition.php
│   ├── Contracts/
│   │   └── Renderable.php
│   ├── Components/
│   │   ├── Navbar.php
│   │   ├── Sidebar.php
│   │   ├── Breadcrumb.php
│   │   ├── TabSet.php
│   │   ├── Accordion.php
│   │   ├── Modal.php
│   │   ├── Carousel.php
│   │   ├── Footer.php
│   │   ├── HeroSection.php
│   │   └── Form.php
│   ├── Assets/
│   │   └── AssetManager.php
│   └── PageMaker.php
├── templates/
│   ├── base.html.twig
│   ├── layouts/
│   │   ├── holy_grail.html.twig
│   │   ├── offcanvas_left.html.twig
│   │   ├── offcanvas_right.html.twig
│   │   ├── stacked.html.twig
│   │   ├── fixed_sidebar.html.twig
│   │   ├── partially_collapsing.html.twig
│   │   ├── accordion_sidebar.html.twig
│   │   ├── overlay_drawer.html.twig
│   │   └── mini_icon_sidebar.html.twig
│   └── components/
│       ├── navbar.html.twig
│       ├── sidebar.html.twig
│       ├── breadcrumb.html.twig
│       ├── tabset.html.twig
│       ├── accordion.html.twig
│       ├── modal.html.twig
│       ├── carousel.html.twig
│       ├── footer.html.twig
│       ├── hero.html.twig
│       └── form.html.twig
├── public/
│   └── css/
│       └── pagemaker.css
└── tests/

```

---

2. Core Interfaces and Enums
----------------------------

[](#2-core-interfaces-and-enums)

### 2.1 Renderable Interface

[](#21-renderable-interface)

Every component that can fill a layout slot implements this interface. It defines two methods:

- `render(): string` — Returns the component as an HTML string
- `__toString(): string` — Allows echo/string coercion

This enables any component to be used interchangeably in content slots.

### 2.2 LayoutPattern Enum

[](#22-layoutpattern-enum)

Defines the nine available layout patterns, each mapping to a specific Twig template:

PatternTemplateDescription`HOLY_GRAIL``layouts/holy_grail.html.twig`Classic three-column layout`OFFCANVAS_LEFT``layouts/offcanvas_left.html.twig`Left drawer on mobile, inline on desktop`OFFCANVAS_RIGHT``layouts/offcanvas_right.html.twig`Right drawer on mobile, inline on desktop`STACKED``layouts/stacked.html.twig`Mobile-first with visual reordering`FIXED_SIDEBAR``layouts/fixed_sidebar.html.twig`Position-fixed sidebar with mini collapse`PARTIALLY_COLLAPSING``layouts/partially_collapsing.html.twig`Always-visible narrowing sidebar`ACCORDION_SIDEBAR``layouts/accordion_sidebar.html.twig`Sidebar with collapsible accordion sections`OVERLAY_DRAWER``layouts/overlay_drawer.html.twig`Full-screen overlay drawer on mobile`MINI_ICON_SIDEBAR``layouts/mini_icon_sidebar.html.twig`Icon strip expanding to full sidebar### 2.3 Breakpoint Enum

[](#23-breakpoint-enum)

Maps Bootstrap 5.3's six breakpoint tiers to PHP constants:

Enum CaseClass InfixMin WidthTypical Device`XS`*(none)*$0\\text{px}$Phones (portrait)`SM``-sm`$\\geq 576\\text{px}$Phones (landscape)`MD``-md`$\\geq 768\\text{px}$Tablets`LG``-lg`$\\geq 992\\text{px}$Laptops / small desktops`XL``-xl`$\\geq 1200\\text{px}$Desktops`XXL``-xxl`$\\geq 1400\\text{px}$Large desktops / TVsEach breakpoint provides methods to retrieve pixel values and generate Bootstrap class infixes.

### 2.4 AssetPosition Enum

[](#24-assetposition-enum)

Defines three insertion points for assets:

- `HEAD` — Inside `` (CSS, meta tags)
- `BODY_START` — Immediately after `` (early JS, analytics)
- `BODY_END` — Before `` (main JS bundles)

---

3. The PageMaker Class
----------------------

[](#3-the-pagemaker-class)

The central builder class collects configuration, resolves content slots, and delegates rendering to the template engine.

### 3.1 Core Responsibilities

[](#31-core-responsibilities)

 ```
classDiagram
    class PageMaker {
        -string title
        -string lang
        -array metaTags
        -LayoutPattern pattern
        -Breakpoint sidebarBreakpoint
        -array columnWidths
        -Renderable header
        -Renderable footer
        -Renderable leftSidebar
        -Renderable rightSidebar
        -Renderable mainContent
        -Renderable heroSection
        -Renderable breadcrumb
        -AssetManager assets
        -callable renderer

        +setTitle(string) PageMaker
        +setLayout(LayoutPattern, Breakpoint) PageMaker
        +setColumnWidths(int, int, int) PageMaker
        +setHeader(Renderable) PageMaker
        +setFooter(Renderable) PageMaker
        +setLeftSidebar(Renderable) PageMaker
        +setRightSidebar(Renderable) PageMaker
        +setMainContent(Renderable) PageMaker
        +setHeroSection(Renderable) PageMaker
        +setBreadcrumb(Renderable) PageMaker
        +assets() AssetManager
        +render() string
        -resolve(slot) string
        -buildContext() array
    }

    class AssetManager {
        -array assets
        +addCss(string, AssetPosition) AssetManager
        +addJs(string, AssetPosition) AssetManager
        +addInlineCss(string, AssetPosition) AssetManager
        +addInlineJs(string, AssetPosition) AssetManager
        +addBootstrap(string) AssetManager
        +addBootstrapIcons(string) AssetManager
        +render(AssetPosition) string
    }

    class Renderable {

        +render() string
        +__toString() string
    }

    PageMaker --> AssetManager
    PageMaker ..> Renderable : accepts
```

      Loading ### 3.2 Content Slot Resolution

[](#32-content-slot-resolution)

The `resolve()` method handles the three content types:

1. **null** → Returns empty string
2. **string** → Returns as-is (raw HTML)
3. **Renderable** → Calls `render()` method
4. **callable** → Executes and recursively resolves the result

This allows lazy evaluation for expensive operations like database queries.

### 3.3 Template Context Building

[](#33-template-context-building)

The `buildContext()` method assembles all data needed by templates:

Context VariableSourcePurposeMetadata`$title`, `$lang`, `$metaTags`HTML head elementsLayout config`$pattern`, `$breakpoint`, `$columnWidths`Responsive behaviorResolved contentSlot resolution resultsBody sectionsAsset HTML`AssetManager::render()`CSS/JS tags### 3.4 Column Width Presets

[](#34-column-width-presets)

For convenience, named presets simplify common configurations:

PresetColumn DistributionUse Case`left-only``[3, 9, 0]`Admin panels`right-only``[0, 9, 3]`Blog with sidebar ads`both-narrow``[2, 8, 2]`Three-column portal`both-wide``[3, 6, 3]`Traditional portal`both-unequal``[3, 7, 2]`Documentation with TOC`no-sidebars``[0, 12, 0]`Landing pages### 3.5 Mathematical Constraints

[](#35-mathematical-constraints)

Column widths must satisfy:

$$\\text{left} + \\text{main} + \\text{right} = 12$$

where $\\text{main} \\geq 1$ and $\\text{left}, \\text{right} \\geq 0$.

---

4. Layout Patterns
------------------

[](#4-layout-patterns)

Each pattern defines **how structural sections behave at the mobile breakpoint vs. the configured sidebar breakpoint**. All patterns share the same base template and override only the body block.

### 4.1 Pattern Behavior Matrix

[](#41-pattern-behavior-matrix)

PatternMobile (below $bp$)At/Above $bp$Key Bootstrap ClassesSidebars Used**HOLY\_GRAIL**Single column; sidebars hidden3-column grid`d-none d-{bp}-block`, `col-{bp}-*`Left, Right**OFFCANVAS\_LEFT**Hamburger toggles left drawerLeft sidebar visible inline`offcanvas-{bp} offcanvas-start`Left**OFFCANVAS\_RIGHT**Hamburger toggles right drawerRight sidebar visible inline`offcanvas-{bp} offcanvas-end`Right**STACKED**Single column; sidebars stack below main3-column; DOM order rearranged`order-{bp}-*`Left, Right**FIXED\_SIDEBAR**Sidebar collapses to mini icon stripFixed-position sidebar + scrollable main`position-fixed`, `sidebar-mini`Left**PARTIALLY\_COLLAPSING**Sidebar shows icons only (always visible)Full sidebar with labels`sidebar-narrow` ↔ `sidebar-wide`Left**ACCORDION\_SIDEBAR**Sidebar content in accordionExpanded multi-level navBootstrap `accordion` inside sidebarLeft**OVERLAY\_DRAWER**Full-screen overlay drawerSidebar as normal grid column`offcanvas` + `offcanvas-backdrop`Left**MINI\_ICON\_SIDEBAR**Narrow icon strip, expand on tapFull sidebar with text + icons`sidebar-mini`, `d-none d-{bp}-inline`Left### 4.2 Pattern Selection Guide

[](#42-pattern-selection-guide)

 ```
graph TD
    Start[Need to choose a layout?] --> Q1{Need sidebars on mobile?}

    Q1 -->|No| Q2{Sidebars on desktop?}
    Q1 -->|Yes| Q3{How should sidebars appear?}

    Q2 -->|No| HolyGrail[HOLY_GRAILClassic hidden sidebars]
    Q2 -->|Yes, fixed| Fixed[FIXED_SIDEBARAlways visible, mini on mobile]
    Q2 -->|Yes, collapsing| Partial[PARTIALLY_COLLAPSINGNarrows but stays visible]

    Q3 -->|Slide-in drawer| Q4{Which side?}
    Q3 -->|Full overlay| Overlay[OVERLAY_DRAWERFull-screen drawer]
    Q3 -->|Stacked below content| Stacked[STACKEDMain first in DOM]
    Q3 -->|Accordion navigation| Accordion[ACCORDION_SIDEBARCollapsible nav sections]

    Q4 -->|Left| OffLeft[OFFCANVAS_LEFTLeft drawer]
    Q4 -->|Right| OffRight[OFFCANVAS_RIGHTRight drawer]

    Q5{Need icon-only mode?} -->|Yes, with expansion| Mini[MINI_ICON_SIDEBARIcon strip → full sidebar]
    Q5 -->|No| HolyGrail

    style HolyGrail fill:#90EE90
    style OffLeft fill:#87CEEB
    style OffRight fill:#87CEEB
    style Stacked fill:#DDA0DD
    style Fixed fill:#FFB6C1
    style Partial fill:#FFD700
    style Accordion fill:#F0E68C
    style Overlay fill:#E6E6FA
    style Mini fill:#98FB98
```

      Loading ---

5. Structural Sections
----------------------

[](#5-structural-sections)

These are the major semantic areas of every page. Each has a dedicated component class implementing `Renderable`.

### 5.1 Component Architecture

[](#51-component-architecture)

 ```
graph LR
    subgraph "Structural Components"
        A[Navbar]
        B[HeroSection]
        C[Sidebar]
        D[Breadcrumb]
        E[Footer]
    end

    subgraph "Widget Components"
        F[TabSet]
        G[Accordion]
        H[Modal]
        I[Carousel]
        J[Form]
    end

    subgraph "Slots"
        K[header]
        L[heroSection]
        M[leftSidebar]
        N[rightSidebar]
        O[breadcrumb]
        P[mainContent]
        Q[footer]
    end

    A --> K
    B --> L
    C --> M
    C --> N
    D --> O
    E --> Q

    F --> P
    G --> P
    H --> P
    I --> P
    J --> P

    style A fill:#4a90d9,color:#fff
    style B fill:#4a90d9,color:#fff
    style C fill:#4a90d9,color:#fff
    style D fill:#4a90d9,color:#fff
    style E fill:#4a90d9,color:#fff
    style F fill:#50c878,color:#fff
    style G fill:#50c878,color:#fff
    style H fill:#50c878,color:#fff
    style I fill:#50c878,color:#fff
    style J fill:#50c878,color:#fff
```

      Loading ### 5.2 Navbar Component

[](#52-navbar-component)

**Properties:**

- Brand configuration (name, URL, optional logo)
- Navigation items (label → href mapping)
- Theme selection (light/dark)
- Positioning (static or sticky-top)
- Collapse breakpoint

**Accessibility:** Includes proper ARIA labels, keyboard navigation, and mobile-friendly hamburger toggle.

### 5.3 Hero Section Component

[](#53-hero-section-component)

**Properties:**

- Title and subtitle
- Optional call-to-action button
- Background image with overlay support
- Theme-aware text coloring

**Use Cases:** Landing page headers, section separators, feature announcements.

### 5.4 Sidebar Component

[](#54-sidebar-component)

**Properties:**

- Navigation items with icons and labels
- Optional heading section
- Support for nested children (multi-level navigation)
- Active state highlighting

**Critical Implementation Note:** The `` wrapper is essential. Patterns like MINI\_ICON\_SIDEBAR, FIXED\_SIDEBAR, and PARTIALLY\_COLLAPSING hide this span below the breakpoint to achieve icon-only mode.

### 5.5 Footer Component

[](#55-footer-component)

**Properties:**

- Multiple columns of link groups
- Copyright text
- Social media icon links

**Layout:** Responsive grid that stacks on mobile.

### 5.6 Breadcrumb Component

[](#56-breadcrumb-component)

**Properties:**

- Hierarchical navigation items
- Current page indicator (null href)
- Bootstrap breadcrumb styling

**Accessibility:** Includes `aria-label` and `aria-current` attributes.

---

6. Interactive Widgets & UI Components
------------------------------------------

[](#6-interactive-widgets--ui-components)

Each widget implements `Renderable` and can be placed in any content slot.

### 6.1 Widget Feature Matrix

[](#61-widget-feature-matrix)

ComponentBootstrap FeatureConfiguration OptionsTypical Slot**TabSet**Tabs / PillsStyle, orientation (horizontal/vertical), auto-generated IDsAny content slot**Accordion**Accordion / CollapseMultiple open sections, flush styling, auto-generated IDsAny content slot**Modal**Modal dialogSize variants, centered, scrollable, static backdropAny content slot**Carousel**Carousel / SlideControls, indicators, fade effect, auto-play intervalAny content slot**Form**Form controlsField types, validation, CSRF token placeholderAny content slot### 6.2 TabSet Component

[](#62-tabset-component)

**Purpose:** Organize related content sections within a single slot.

**Configuration:**

- Tab style: `tabs` or `pills`
- Orientation: `horizontal` or `vertical`
- Auto-generated unique IDs for accessibility

**Accessibility:** Full ARIA support with `role="tablist"`, `role="tab"`, `role="tabpanel"`, and `aria-selected` states.

### 6.3 Accordion Component

[](#63-accordion-component)

**Purpose:** Collapsible content sections with expand/collapse functionality.

**Configuration:**

- Allow multiple open sections
- Flush styling (edge-to-edge)
- Auto-generated unique IDs

### 6.4 Modal Component

[](#64-modal-component)

**Purpose:** Dialog overlays for focused interactions.

**Configuration:**

- Size variants: default, small, large, extra-large, fullscreen
- Centered positioning
- Scrollable content area
- Static backdrop (prevents dismissal on click outside)
- Trigger button helper method

### 6.5 Carousel Component

[](#65-carousel-component)

**Purpose:** Image/content sliders with optional captions.

**Configuration:**

- Show/hide navigation controls
- Show/hide dot indicators
- Slide vs. fade transition
- Auto-play interval (0 = disabled)

### 6.6 Form Component

[](#66-form-component)

**Purpose:** Basic form builder with Bootstrap styling.

**Supported Field Types:**

- Standard inputs (text, email, password, etc.)
- Textarea
- Select dropdown
- Checkbox

**Features:**

- Label and placeholder support
- Required field marking
- CSRF token hidden field placeholder

---

7. Grid System & Breakpoint Reference
-----------------------------------------

[](#7-grid-system--breakpoint-reference)

### 7.1 Bootstrap 5.3 Breakpoints

[](#71-bootstrap-53-breakpoints)

All responsive behaviors are governed by six tier breakpoints:

BreakpointInfixMin WidthTypical DeviceExtra small*(none)*$0\\text{px}$Phones (portrait)Small`-sm`$\\geq 576\\text{px}$Phones (landscape)Medium`-md`$\\geq 768\\text{px}$TabletsLarge`-lg`$\\geq 992\\text{px}$Laptops / small desktopsExtra large`-xl`$\\geq 1200\\text{px}$DesktopsExtra extra large`-xxl`$\\geq 1400\\text{px}$Large desktops / TVs### 7.2 Column Arithmetic

[](#72-column-arithmetic)

Bootstrap uses a **12-column grid**. The system enforces:

$$\\text{left} + \\text{main} + \\text{right} = 12$$

where $\\text{main} \\geq 1$ and $\\text{left}, \\text{right} \\geq 0$.

### 7.3 Responsive Class Generation

[](#73-responsive-class-generation)

ElementMobile ClassDesktop ClassVisibilityLeft sidebar—`col-{infix}-{width}``d-none d-{bp}-block`Main content`col-12``col-{infix}-{width}`Always visibleRight sidebar—`col-{infix}-{width}``d-none d-{bp}-block`For **STACKED** pattern, `order-{bp}-*` classes control visual order while keeping main content first in DOM for SEO.

---

8. Asset Management
-------------------

[](#8-asset-management)

### 8.1 AssetManager Capabilities

[](#81-assetmanager-capabilities)

 ```
graph LR
    subgraph "Asset Types"
        A[External CSS]
        B[External JS]
        C[Inline CSS]
        D[Inline JS]
    end

    subgraph "Positions"
        E[HEAD]
        F[BODY_START]
        G[BODY_END]
    end

    subgraph "Convenience Methods"
        H[addBootstrap]
        I[addBootstrapIcons]
    end

    A --> E
    B --> G
    C --> E
    D --> G

    H --> A
    H --> B
    I --> A

    style E fill:#4a90d9,color:#fff
    style G fill:#50c878,color:#fff
```

      Loading ### 8.2 Asset Registration Methods

[](#82-asset-registration-methods)

MethodPurposeDefault Position`addCss($href)`External stylesheetHEAD`addJs($src)`External JavaScriptBODY\_END`addInlineCss($css)`Inline style blockHEAD`addInlineJs($js)`Inline script blockBODY\_END`addBootstrap($version)`Bootstrap CSS + JS bundleHEAD + BODY\_END`addBootstrapIcons($version)`Bootstrap Icons CSSHEAD### 8.3 Default Asset Stack

[](#83-default-asset-stack)

Every PageMaker page should include at minimum:

AssetPositionPurposeBootstrap 5.3 CSSHEADGrid, utilities, componentsBootstrap Icons CSSHEADSidebar/navigation icons`pagemaker.css`HEADCustom CSS variables + overridesBootstrap 5.3 JS bundleBODY\_ENDOffcanvas, collapse, modal, etc.---

9. Template Specifications
--------------------------

[](#9-template-specifications)

### 9.1 Template Hierarchy

[](#91-template-hierarchy)

 ```
graph TD
    A[base.html.twig] --> B[layouts/holy_grail.html.twig]
    A --> C[layouts/offcanvas_left.html.twig]
    A --> D[layouts/offcanvas_right.html.twig]
    A --> E[layouts/stacked.html.twig]
    A --> F[layouts/fixed_sidebar.html.twig]
    A --> G[layouts/partially_collapsing.html.twig]
    A --> H[layouts/accordion_sidebar.html.twig]
    A --> I[layouts/overlay_drawer.html.twig]
    A --> J[layouts/mini_icon_sidebar.html.twig]

    B --> K[components/navbar.html.twig]
    B --> L[components/sidebar.html.twig]
    B --> M[components/footer.html.twig]

    style A fill:#daa520,stroke:#b8860b,color:#fff
    style B fill:#87CEEB
    style C fill:#87CEEB
    style D fill:#87CEEB
    style E fill:#87CEEB
    style F fill:#87CEEB
    style G fill:#87CEEB
    style H fill:#87CEEB
    style I fill:#87CEEB
    style J fill:#87CEEB
```

      Loading ### 9.2 Base Template Structure

[](#92-base-template-structure)

The base template provides:

- HTML document shell with configurable lang, charset, viewport
- Dynamic meta tags
- Title element
- HEAD assets injection point
- Header slot
- Main layout block (overridden by pattern templates)
- Footer slot
- BODY\_END assets injection point

### 9.3 Template Variable Reference

[](#93-template-variable-reference)

Every layout template receives these variables from `PageMaker::buildContext()`:

**Metadata Variables:**

- `title` — HTML `` content
- `lang` — `` attribute
- `charset` — Character encoding
- `viewport` — Viewport meta content
- `meta_tags` — Array of additional meta tags

**Layout Variables:**

- `pattern` — Layout pattern value
- `breakpoint` — Breakpoint infix value
- `breakpoint_infix` — Prefixed infix (e.g., `-lg`)
- `col_left` — Left sidebar column width (0–11)
- `col_main` — Main content column width (1–12)
- `col_right` — Right sidebar column width (0–11)

**Content Variables (pre-resolved to HTML strings):**

- `header`, `footer`, `left_sidebar`, `right_sidebar`
- `main_content`, `hero_section`, `breadcrumb`

**Configuration Variables:**

- `body_class` — Extra `` classes
- `container_id` — Wrapper div ID
- `fluid_container` — Boolean for fluid container

**Asset Variables:**

- `head_assets` — Pre-rendered ``/`` tags
- `body_start_assets` — Pre-rendered tags after ``
- `body_end_assets` — Pre-rendered `` tags

---

10. Usage Patterns
------------------

[](#10-usage-patterns)

### 10.1 Typical Implementation Flow

[](#101-typical-implementation-flow)

 ```
flowchart TD
    A[1. Set up Twig Environment] --> B[2. Create renderer closure]
    B --> C[3. Instantiate PageMaker]
    C --> D[4. Register assets via AssetManager]
    D --> E[5. Set layout pattern & breakpoint]
    E --> F[6. Configure column widths]
    F --> G[7. Create component instances]
    G --> H[8. Populate content slots]
    H --> I[9. Call render]
    I --> J[10. Output HTML]

    style C fill:#4a90d9,color:#fff
    style D fill:#50c878,color:#fff
    style I fill:#daa520,color:#fff
```

      Loading ### 10.2 Pattern Selection Quick Reference

[](#102-pattern-selection-quick-reference)

Use CaseRecommended PatternBreakpointColumn WidthsMarketing site / blog`HOLY_GRAIL``LG``[0, 9, 3]` or `[3, 6, 3]`Admin dashboard`OFFCANVAS_LEFT``LG``[3, 9, 0]`Documentation site`STACKED``MD``[3, 6, 3]`Email client / CRM`FIXED_SIDEBAR``LG`N/A (CSS-driven)Analytics dashboard`PARTIALLY_COLLAPSING``LG`N/A (CSS-driven)Mobile-first app`OVERLAY_DRAWER``LG``[3, 9, 0]`IDE / tooling UI`MINI_ICON_SIDEBAR``XL`N/A (CSS-driven)Content CMS with deep nav`ACCORDION_SIDEBAR``MD``[3, 9, 0]`Right-panel detail view`OFFCANVAS_RIGHT``LG``[0, 8, 4]`### 10.3 Content Slot Population Strategies

[](#103-content-slot-population-strategies)

**Static Content:** Pass raw HTML strings for simple, unchanging content.

**Reusable Components:** Create component instances (implementing `Renderable`) for consistent, reusable UI elements.

**Lazy Evaluation:** Use closures for expensive operations that should only execute when the page is actually rendered:

- Database queries
- API calls
- Complex template rendering

**Composing Widgets:** Multiple widgets can be combined in a single slot by concatenating rendered output.

### 10.4 Runtime Layout Switching

[](#104-runtime-layout-switching)

Layout patterns can be selected dynamically based on user preferences, device detection, or URL parameters. The enum-based system makes this straightforward and type-safe.

---

Appendix A: Accessibility Checklist
-----------------------------------

[](#appendix-a-accessibility-checklist)

All generated markup follows these ARIA and semantic rules:

- `` for site header
- `` for the primary content area
- `` for every sidebar
- `` for every navigation block (navbar, breadcrumb, sidebar nav)
- Offcanvas/modal elements include `aria-labelledby`, `aria-controls`, and `aria-expanded`
- Tab panels include `role="tablist"`, `role="tab"`, `role="tabpanel"`, and `aria-selected`
- Skip-to-content link recommended as first child of ``

Appendix B: CSS Custom Properties Reference
-------------------------------------------

[](#appendix-b-css-custom-properties-reference)

PropertyDefaultUsed By`--pm-sidebar-width``280px`All sidebar patterns`--pm-sidebar-mini-width``64px`FIXED\_SIDEBAR, PARTIALLY\_COLLAPSING, MINI\_ICON`--pm-transition-speed``0.25s`Sidebar expand/collapse animations`--pm-z-sidebar``1030`Fixed/sticky sidebars`--pm-z-header``1040`Sticky navbarOverride these at the `:root` level or on individual elements to customize dimensions without editing the source CSS.

---

Summary
-------

[](#summary)

PageMaker provides a robust, component-based architecture for building responsive web pages:

1. **Clear Separation of Concerns:** PHP classes handle logic, Twig templates handle presentation
2. **Type-Safe Configuration:** Enums ensure valid layout patterns and breakpoints
3. **Flexible Content Model:** Multiple content types (string, Renderable, callable) support various use cases
4. **Mobile-First Approach:** All patterns start with mobile and enhance for larger screens
5. **Extensible Component System:** New widgets can be added by implementing the Renderable interface
6. **Comprehensive Asset Management:** Centralized control over CSS/JS insertion points

###  Health Score

21

—

LowBetter than 19% of packages

Maintenance57

Moderate activity, may be stable

Popularity4

Limited adoption so far

Community6

Small or concentrated contributor base

Maturity15

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~1 days

Total

2

Last Release

708d ago

### Community

Maintainers

![](https://www.gravatar.com/avatar/eb912ae2c190f882d88f821d9c9029d79fe55151a25a5f46fdf098269072c4cf?d=identicon)[douglasgreen](/maintainers/douglasgreen)

---

Top Contributors

[![douglasgreen](https://avatars.githubusercontent.com/u/36788591?v=4)](https://github.com/douglasgreen "douglasgreen (28 commits)")

### Embed Badge

![Health badge](/badges/douglasgreen-pagemaker/health.svg)

```
[![Health](https://phpackages.com/badges/douglasgreen-pagemaker/health.svg)](https://phpackages.com/packages/douglasgreen-pagemaker)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)