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 |
| Toast Notification | Notification messages | Auto-dismiss, ARIA live region |
| Back to Top | Scroll-to-top button | Visibility threshold, smooth scroll |
Implementation Convention
Each pattern follows the same structure:
- Fluid template -- Markup with semantic HTML and ARIA attributes
- TypeScript plugin -- Behavior with
DOMContentLoadedinitialization - SCSS partial -- Styling with Bootstrap integration
- Vite entrypoint -- Code splitting via
*.entry.ts
References
references/patterns-sticky-header.md-- Scroll-triggered fixed header with IntersectionObserverreferences/patterns-lazy-loading.md-- Deferred component initialization with placeholder contentreferences/patterns-animations.md-- Scroll animations with prefers-reduced-motion supportreferences/patterns-breadcrumb.md-- Breadcrumb navigation with JSON-LD structured datareferences/patterns-language-switcher.md-- Multi-language navigation with b13/menus LanguageMenureferences/patterns-scroll-to-anchor.md-- Smooth scroll with sticky header offset compensationreferences/patterns-skeleton-loading.md-- CSS placeholder animations for content loadingreferences/patterns-toast-notification.md-- Auto-dismiss notifications with ARIA live regionreferences/patterns-back-to-top.md-- Scroll-to-top button with visibility threshold