typo3-frontend-patterns
TYPO3 Frontend Patterns
Reusable implementation patterns for TYPO3 v13 and v14.3 LTS sitepackage development. Each pattern provides a complete implementation with Fluid template, TypeScript plugin, SCSS partial, and accessibility considerations.
v14 heads-up: the core no longer concatenates or compresses frontend CSS/JS (Breaking #108055). Pair these patterns with an external build tool — see typo3-vite-skill. Fluid 5 (v14) enforces strict ViewHelper typing (#108148): all VHs in pattern templates must have typed arguments +
render(): string. Camino (v14.1+, #108539) is the v14 core's default theme alternative to bootstrap-package — patterns stay theme-agnostic.
These patterns solve common frontend problems that every TYPO3 sitepackage encounters. Instead of building from scratch, use these proven implementations that handle edge cases (scroll performance, reduced-motion, keyboard navigation, ARIA live regions) correctly from the start.
Available Patterns
| Pattern | Description | Key Features |
|---|---|---|
| Sticky Header | Scroll-triggered fixed header | IntersectionObserver, CSS transitions |
| Lazy Loading | Deferred component initialization | IntersectionObserver, placeholder content |
| Breadcrumb | Breadcrumb navigation | JSON-LD structured data, Schema.org |
| Language Switcher | Multi-language navigation | b13/menus LanguageMenu, flag icons |
| Animations | Scroll-triggered animations | prefers-reduced-motion support |
| Scroll to Anchor | Smooth scroll with offset | Header height compensation |
| Skeleton Loading | CSS placeholder animations | Content layout stability |