Bootstrap Package for TYPO3
repository·master·Indexed 43 days ago
https://github.com/benjaminkott/bootstrap_packageA TYPO3 extension that provides a complete, Bootstrap-based frontend theme. It demonstrates modern, native TYPO3 templating techniques using TypoScript and the TypoScript Constant Editor.
What's inside Bootstrap Package
- Bootstrap Package is a theme for TYPO3 CMS built upon the Bootstrap CSS Framework. It provides a comprehensive set of tools for building responsive websites, including pre-configured TypoScript via Site Sets, adjustable settings, and built-in SCSS support. It is designed to be highly customizable through the TYPO3 backend.
Overview of the Bootstrap Package TYPO3 extension
masterThe Bootstrap Package provides a fully configured frontend theme for TYPO3 CMS based on the Bootstrap CSS Framework. It serves as an advanced implementation of modern TYPO3 templating without relying on third-party extensions.
Key features include:
- A fully configurable frontend via TypoScript.
- Support for the TypoScript Constant Editor for easy configuration.
- A robust theme structure that demonstrates best practices for TYPO3 templating.
What is scssphp?
masterscssphpis a compiler for SCSS written in PHP. It allows you to compile SCSS files into CSS directly within a PHP environment. For detailed usage instructions and API documentation, visit the official homepage: https://scssphp.github.io/scssphp.Overview of Bootstrap Package
masterBootstrap Package (bootstrap_package) is a TYPO3 extension that provides a fully configured frontend theme based on the Bootstrap CSS Framework. It is designed to demonstrate modern TYPO3 templating practices without relying on third-party extensions. The frontend is highly configurable through TYPO3's Site Settings.Features of Bootstrap Package
masterBootstrap Package includes several core capabilities for TYPO3 developers:
Core Infrastructure
- Site Sets: Provides a full, pre-configured TypoScript setup.
- Settings-driven: Almost all aspects of the package are completely adjustable via the TYPO3 backend settings.
- SCSS Support: Includes a built-in SCSS parser. All SCSS variables are configurable via Settings, and SCSS support is available in the
page.includeCSSproperty. - Responsive Images: Built-in rendering for multiple image variants.
Content Elements
The package provides several Bootstrap-specific content elements, including:
- Accordion, Card Group, Carousel (Fullscreen and Small variants)
- External Media, Icon Group, List Group, Panel
- Social Links, Tab, Text and Icon, Text Columns, Text Teaser, Timeline, Quote
Menu Elements
Specialized menu content elements are available, such as:
- Card Menu
- Thumbnail Menu
- Section Menu
Backend Layouts
Multiple backend layouts are available to structure pages, including:
- Default and Simple
- 2 Column (various variants) and 3 Column layouts
- Subnavigation (Left/Right)
- Special Feature and Special Start layouts
Avoid conflicts with fluid_styled_content
masterThe Bootstrap Package provides its own content rendering logic. It is incompatible with the core TYPO3 extensionfluid_styled_content. To prevent misconfiguration, the extension is explicitly marked as conflicting withfluid_styled_content.Understand Bootstrap Package Site Sets
masterBootstrap Package uses 'Site Sets' to group features and configurations. You can use these sets individually to add specific functionality or combine them to build a custom setup. The 'Full Package' is a pre-defined combination that includes all available sets for a complete, quick-start environment.
Available Site Sets include:
- Bootstrap Package: Full Package: Includes all sets for a complete setup.
- Bootstrap Package: Backend Layouts: Backend layout configurations.
- Bootstrap Package: Bootstrap 5: Bootstrap 5 framework with SCSS variables.
- Bootstrap Package: Content Elements: Content element templates and settings.
- Bootstrap Package: Cookie Consent: Cookie consent banner integration.
- Bootstrap Package: Google Font: Google Fonts integration.
- Bootstrap Package: Google Tag Manager: Google Tag Manager integration.
- Bootstrap Package: Pagination: Speaking URLs for paginated elements.
- Bootstrap Package: RTE: Rich Text Editor configuration.
- Bootstrap Package: Skiplink: Accessibility skip links.
How pagination routing works in bootstrap_package
masterPaginated content elements (like the built-in gallery) use two query arguments to manage state:
paginate[id]: The identifier for the specific pagination instance (e.g.,gallery-8793).paginate[page]: The current page number. This argument is omitted on the first page.
By default, only one pagination is addressed at a time. Every pagination link includes an anchor to the specific element being paged, ensuring the new page starts at that element rather than the top of the document.
If the
bootstrap-package/paginationsite set is active, these arguments are rewritten into a clean URL path:/gallery/tag-3/gallery-8793/page-2Without the site set, they remain in the query string, which includes a cache hash:
/gallery/tag-3?paginate%5Bid%5D=gallery-8793&paginate%5Bpage%5D=2&cHash=61450d52Add the Bootstrap Package site set
masterOnce a root page is created, TYPO3 generates a site configuration for it. To enable all features required for a quick start, you must assign the correct site set:
- Edit the site configuration associated with your root page.
- Add the "Bootstrap Package: Full Package" set to the configuration.
Configure Backend Layouts in TYPO3
masterThe
bootstrap-packageextension provides a set of backend layout configurations located inbootstrap-package/backend-layouts. You can manage these layouts by enabling or disabling them individually through the TYPO3 site settings. This is controlled via thebackend-layoutssettings set.# Configuration is managed via the 'backend-layouts' settings set # located in PROJECT:/Configuration/Sets/BackendLayouts/settings.definitions.yamlConfigure the Cookie Consent set
masterThebootstrap-package/cookie-consentset provides a configurable cookie consent banner. You can configure its behavior and appearance via the TYPO3 backend settings. The configuration schema is defined inPROJECT:/Configuration/Sets/CookieConsent/settings.definitions.yamlunder the namecookieconsent.Configure the Bootstrap Package in TYPO3
masterThe Bootstrap Package settings can be adjusted directly within the TYPO3 backend. Navigate toAdmin Tools > Settings > Extension Configurationto modify the available feature flags.