MP-Core

MP Core ist ein TYPO3 13.4 oder 14.x Site-Paket, das eine Komplettlösung für die Erstellung moderner Websites bietet. 

Es basiert auf Bootstrap 5 und Vue.js 3 und kombiniert vorgefertigte Inhaltselemente, Container-Layouts und eine Vite-basierte Frontend-Toolchain zu einem Entwicklungsframework. Es wird in Zukunft alle Aktualisierungen zu z.B. Boostrap 6 oder Vue.js 4 erhalten. Ich bemühe mich das Paket mit all seinen Erweiterungen aktuell zu halten (Swiper Slider, Jarallax, usw.)

Systemanforderungen

• TYPO3 13.4 oder höher
• PHP 8.2 oder höher
• Node.js 20+ und npm 10+ für Frontend-Builds

Moderner Frontend-Stack

Die Erweiterung integriert:

• Vite 7.3 – Blitzschnelles Build-Tool mit Hot Module Replacement
• Bootstrap 5.3 – Responsives UI-Framework mit benutzerdefinierten hellen und dunklen Designs
• Vue.js 3.5 – Progressives JavaScript-Framework für interaktive Komponenten
• Sass/SCSS – Erweiterte CSS-Vorverarbeitung mit ITCSS-Architektur
• PostCSS – Autoprefixer und px-zu-rem-Konvertierung
• ESLint und Stylelint – Durchsetzung der Codequalität

Inhaltselemente

MP Core bietet eine Vielzahl vorgefertigter Inhaltselemente mit Fluid-Vorlagen:

Medienelemente

• Galerie – Responsive Bildergalerien mit Lightbox-Funktionalität
• Audio & Videoplayer – WCAG konformer Player mit Playlist-Funktionalität (nur mit Extension: mpc-vidply)
• RSS Feeds – Externe Feeds anzeigen (nur mit Extension: mpc-rss)

Layout-Elemente

• Bühne – Hero-Bereiche mit Bildhintergründen
• Banner – Anpassbare Bannerbereiche
• Einzelner Teaser – Inhalts-Teaser mit Bildern und Links

Containerelemente

• Akkordeon – Zusammenklappbare Inhaltsbereiche
• Tabs – Inhaltsfelder mit Registerkarten
• Slider – Swiper-basierte Karussells
• Grid – Flexible Rasterlayouts
• Container – Generischer Inhaltscontainer

Interaktive Elemente

• TodoList – Vue.js 3-Aufgabenliste mit localStorage-Persistenz als ein einfaches Beispiel
• Menü-Unterseiten – Erweiterte Navigationsmenüs für Unterseiten
• Definitionsliste – Strukturierte Definitionslisten über Inhaltsblöcke

Modulare Site Sets

Die Erweiterung nutzt das TYPO3 13.4 / 14.x Site Sets-System für die modulare Konfiguration:

1. mpc/mp-core – Kernfunktionalität (erforderlich)
2. mpc/mp-core-container – Konfiguration des Container-Elements
3. mpc/mp-core-news – Integration der News-Erweiterung
4. mpc/mp-core-form – Konfiguration des Formular-Frameworks
5. mpc/mp-core-seo – Einstellungen zur SEO-Optimierung

Backend-bearbeitbare Website-Einstellungen

Umfangreiche Konfigurationsoptionen, die über das TYPO3-Backend verwaltet werden können:

• PIDs – Seiten-IDs für Navigation, Kategorien und Ergänzungen
• Inhalt – Text-/Medieneinstellungen, Lightbox, Überschriften, Links
• Leistung – JS/CSS-Komprimierung, Verkettung, Lazy Loading
• Design – Farben, Schriftarten, Breakpoints, Containerbreiten
• Navigation – Menü-Tiefe, Breadcrumbs, versteckte Seiten
• Meta – Viewport, Robots, Google-Verifizierung
• SEO – Open Graph, Twitter Cards, Sitemap, kanonische URLs

Erweiterungsintegrationen

MP Core bietet vorgefertigte Vorlagen und Konfigurationen für beliebte TYPO3-Erweiterungen:

• Fluid Styled Content – Benutzerdefinierte Vorlagen im Bootstrap 5-Stil
• EXT:news – Vorlagen für Listen- und Detailansichten mit Paginierung
• EXT:form – Formularelemente im Bootstrap-Stil und YAML-Konfiguration
• EXT:indexed_search – Suchformular und Ergebnisvorlagen
• EXT:seo – Open Graph-Meta-Tags, Twitter Cards, Schema.org-Markup

Benutzerdefinierte PHP-Klassen

• SvgInlineViewHelper – Inline-SVG-Rendering mit Attributen
• Json DecodeViewHelper – JSON-Decodierung in Fluid-Vorlagen
• ColorPickerValueItems – Dynamische Farbauswahl aus der Website-Konfiguration
• FilesControlContainer – Erweiterter Dateifeldcontainer für Backend

JavaScript-Funktionen

Integrierte JavaScript-Module für gängige Frontend-Funktionen:

• Theme-Umschalter mit Unterstützung für Dunkelmodus
• Sticky-Header-Navigation
• Zurück-zum-Anfang-Schaltfläche mit Scroll-Fortschritt
• Modale Galerien
• Jarallax-Parallax-Effekte
• Paginierungshandhabung
• Akkordeon und Tabs mit Deep Links
• Teaser-Hover-Zustände

SCSS-Architektur

Organisiert nach der ITCSS-Methodik:

1. Einstellungen – Variablen, Schriftarten, Farben
2. Tools – Mixins und Funktionen
3. Generisch – Zurücksetzen, Normalisieren
4. Elemente – Basis-HTML-Elemente
5. Objekte – Layoutmuster
6. Komponenten – UI-Module
7. Dienstprogramme – Hilfsklassen

Barrierefreiheitsfunktionen

• Unterstützung der Tastaturnavigation
• Ankündigungen des Bildschirmleseprogramms
• ARIA-Labels und -Rollen
• Links überspringen
• Fokusverwaltung
• Unterstützung des Hochkontrastmodus
• Semantische HTML-Struktur

Leistungsoptimierungen

• Vite-optimierte Asset-Bündelung mit Code-Aufteilung
• Tree Shaking für minimale Bündelgrößen
• CSS- und JavaScript-Minimierung
• Bildoptimierung
• Unterstützung für Lazy Loading
• Asynchrone Skriptladung
• Font-Subsetting mit WOFF2-Format

Installation

composer require mpc/mp-core
vendor/bin/typo3 extension:activate mp_core
cd Build && npm ci
npm run build

Lizenz und Autor

MP Core wird unter der GPL-2.0-oder-später-Lizenz veröffentlicht. Entwickelt von Matthias Peltzer.