MP-Core

MP Core is a TYPO3 13.4 site package that offers a complete solution for creating modern websites. 

It is based on Bootstrap 5 and Vue.js 3 and combines ready-made content elements, container layouts and a Vite-based frontend toolchain into a development framework.

System requirements

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

Modern frontend stack

The extension integrates:

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

Content elements

MP Core offers a variety 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 extension: mpc-vidply)
• RSS feeds – Display external feeds (only with extension: mpc-rss)

Layout elements

• Stage – Hero areas 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 task list with localStorage persistence as a simple example
• Menu subpages – Extended navigation menus for subpages
• Definition list – Structured definition lists via content blocks

Modular site sets

The extension uses the TYPO3 13.4 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 – Settings for SEO optimisation

Backend-editable website settings

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

• PIDs – Page IDs for navigation, categories and additions
• 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 result 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 – Extended file field container for 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
• Accordion 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 – Utility 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 minimisation
• 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 2.0 or later licence. Developed by Matthias Peltzer.