MP-Core

MP Core is a TYPO3 13.4 or 14.x site package that offers a complete solution for building modern websites. 

It is based on Bootstrap 5 and Vue.js 3 and combines pre-built content elements, container layouts and a Vite-based front-end toolchain into a development framework. It will receive all future updates, for example to Bootstrap 6 or Vue.js 4. I endeavour to keep the package and all its extensions up to date (Swiper Slider, Jarallax, etc.)

System requirements

• TYPO3 13.4 or 14.x
• PHP 8.2 or higher
• Node.js 20+ and npm 10+ for frontend builds

Modern frontend stack

The extension integrates:

• Vite – Lightning-fast build tool with Hot Module Replacement
• Bootstrap 5.3 – Responsive UI framework with custom light and dark themes
• Vue.js – Progressive JavaScript framework for interactive components
• Sass/SCSS – Advanced CSS preprocessing with ITCSS architecture
• PostCSS – Autoprefixing and px-to-rem conversion
• ESLint and Stylelint – Code quality enforcement

Content elements

MP Core offers a wide range of ready-made content elements with fluid templates:

Media elements

• Gallery – Responsive image galleries with lightbox functionality
• Audio & Video Player – WCAG-compliant player with playlist functionality (only with the mpc-vidply extension)
• RSS Feeds – Display external feeds (only with the mpc-rss extension)

Layout elements

• Stage – Hero sections with image backgrounds
• Banner – Customisable banner areas
• Single teaser – Content teasers with images and links

Container elements

• Accordion – Collapsible content areas
• Tabs – Content fields with tabs
• Slider – Swiper-based carousels
• Grid – Flexible grid layouts
• Container – Generic content container

Interactive elements

• TodoList – Vue.js 3 to-do list with localStorage persistence as a simple example
• Menu subpages – Advanced navigation menus for subpages
• Definition List – Structured definition lists using content blocks

Modular Site Sets

The extension uses the TYPO3 13.4 / 14.x Site Sets system for modular configuration:

1. mpc/mp-core – Core functionality (required)
2. mpc/mp-core-container – Configuration of the container element
3. mpc/mp-core-news – Integration of the News extension
4. mpc/mp-core-form – Configuration of the form framework
5. mpc/mp-core-seo – SEO optimisation settings

Backend-editable website settings

Extensive configuration options that can be managed via the TYPO3 backend:

• PIDs – Page IDs for navigation, categories and supplements
• Content – Text/media settings, lightbox, headings, links
• Performance – JS/CSS compression, concatenation, lazy loading
• Design – colours, fonts, breakpoints, container widths
• Navigation – Menu depth, breadcrumbs, hidden pages
• Meta – Viewport, Robots, Google verification
• SEO – Open Graph, Twitter Cards, Sitemap, canonical URLs

Extension integrations

MP Core offers ready-made templates and configurations for popular TYPO3 extensions:

• Fluid Styled Content – Custom templates in Bootstrap 5 style
• EXT:news – Templates for list and detail views with pagination
• EXT:form – Bootstrap-style form elements and YAML configuration
• EXT:indexed_search – Search form and results templates
• EXT:seo – Open Graph meta tags, Twitter Cards, Schema.org markup

Custom PHP classes

• SvgInlineViewHelper – Inline SVG rendering with attributes
• Json DecodeViewHelper – JSON decoding in Fluid templates
• ColorPickerValueItems – Dynamic colour selection from the website configuration
• FilesControlContainer – Advanced file field container for the backend

JavaScript functions

Integrated JavaScript modules for common frontend functions:

• Theme switcher with support for dark mode
• Sticky header navigation
• Back-to-top button with scroll progress
• Modal galleries
• Jarallax parallax effects
• Pagination handling
• Accordions and tabs with deep links
• Teaser hover states

SCSS architecture

Organised according to the ITCSS methodology:

1. Settings – variables, fonts, colours
2. Tools – Mixins and functions
3. Generic – Reset, Normalise
4. Elements – Basic HTML elements
5. Objects – Layout patterns
6. Components – UI modules
7. Utilities – Helper classes

Accessibility features

• Keyboard navigation support
• Screen reader announcements
• ARIA labels and roles
• Skip links
• Focus management
• High-contrast mode support
• Semantic HTML structure

Performance optimisations

• Vite-optimised asset bundling with code splitting
• Tree shaking for minimal bundle sizes
• CSS and JavaScript minification
• Image optimisation
• Support for lazy loading
• Asynchronous script loading
• Font subsetting with WOFF2 format

Installation

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

Licence and author

MP Core is released under the GPL v2.0 or later licence. Developed by Matthias Peltzer.