PHPackages t3sbs/t3sbootstrap-builder - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. t3sbs/t3sbootstrap-builder ActiveTypo3-cms-extension[Templating & Views](/categories/templating) t3sbs/t3sbootstrap-builder ========================== Visual Bootstrap 5.3 theme builder for TYPO3 with Bootswatch presets and SCSS export. Compiles via EXT:t3sbootstrap. v1.0.0(today)00GPL-2.0-or-laterSCSSPHP >=8.2 Since Jun 20Pushed todayCompare [ Source](https://github.com/t3solution/t3sbootstrap_builder)[ Packagist](https://packagist.org/packages/t3sbs/t3sbootstrap-builder)[ RSS](/packages/t3sbs-t3sbootstrap-builder/feed)WikiDiscussions main Synced today READMEChangelog (1)Dependencies (5)Versions (3)Used By (0) T3SB Builder ============ [](#t3sb-builder) [![TYPO3](https://camo.githubusercontent.com/4aa5b21351d910d7a90f7a36291ef075e7c453c13e59659748717fb7d009f6a4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31342d4646383730303f6c6f676f3d7479706f33266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/4aa5b21351d910d7a90f7a36291ef075e7c453c13e59659748717fb7d009f6a4/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5459504f332d31342d4646383730303f6c6f676f3d7479706f33266c6f676f436f6c6f723d7768697465)[![PHP](https://camo.githubusercontent.com/ccaa43fc634d348cffccb1d8db7b55d9f17c5d46944bc99a15c3c982724b387d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322532422d3737374242343f6c6f676f3d706870266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/ccaa43fc634d348cffccb1d8db7b55d9f17c5d46944bc99a15c3c982724b387d/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f5048502d382e322532422d3737374242343f6c6f676f3d706870266c6f676f436f6c6f723d7768697465)[![Bootstrap](https://camo.githubusercontent.com/e789291534a12edcece8197e3984e3405902f0e4b4ef886047d0a2b7755bb3c0/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f426f6f7473747261702d352e332d3739353242333f6c6f676f3d626f6f747374726170266c6f676f436f6c6f723d7768697465)](https://camo.githubusercontent.com/e789291534a12edcece8197e3984e3405902f0e4b4ef886047d0a2b7755bb3c0/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f426f6f7473747261702d352e332d3739353242333f6c6f676f3d626f6f747374726170266c6f676f436f6c6f723d7768697465)[![License](https://camo.githubusercontent.com/470005a6bb909933bf68d30708da728cd049ec730e5a4ba46f46c048bbacd895/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d47504c2d2d322e302d2d6f722d2d6c617465722d626c7565)](https://camo.githubusercontent.com/470005a6bb909933bf68d30708da728cd049ec730e5a4ba46f46c048bbacd895/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d47504c2d2d322e302d2d6f722d2d6c617465722d626c7565)[![Donate](https://camo.githubusercontent.com/604e3db9c8751116b3f765aad0353ec7ded655bbe8aaacbc38d8c4a6b784b3ed/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f446f6e6174652d50617950616c2d677265656e2e737667)](https://www.paypal.me/t3sbootstrap) > **Visual Bootstrap 5.3 theme builder for TYPO3 v14.** Design Bootstrap themes *per site*in the backend — start from a Bootswatch preset, fine-tune ~200 variables with a live preview, then publish or export clean SCSS. All compilation runs through **`EXT:t3sbootstrap`**. The backend module is fully localized (English source, German translation) and follows the editor's backend language. Contents -------- [](#contents) - [Features](#features) - [Requirements](#requirements) - [Installation](#installation) - [Quick start](#quick-start) - [Preview, Publish & Export](#preview-publish--export) - [How it works](#how-it-works) - [Editor features](#editor-features) - [SCSS export](#scss-export) - [Per-site themes](#per-site-themes) - [Localization](#localization) - [Tips & troubleshooting](#tips--troubleshooting) - [Third-party](#third-party) - [License](#license) Features -------- [](#features) - **Visual theme editor** in the TYPO3 backend — no hand-written SCSS required. - **~200 Bootstrap 5.3 variables** across 24 collapsible groups. - **26 Bootswatch presets** as ready-made starting points. - **Interactive component preview** — real Bootstrap components (dropdowns, tabs, modal, carousel …) rendered live from your compiled CSS. - **Live frontend preview** — see unpublished changes on your real site, risk-free. - **Separate Preview and Publish** — nothing goes live until you say so. - **Standalone SCSS export** — clean, portable `.scss` files, no lock-in. - **Per-site themes** and full **English / German** localization. Requirements ------------ [](#requirements) ComponentRequirement**TYPO3**v14**PHP**8.2+**`EXT:t3sbootstrap`**Installed, with a config record on each site's root page and **`customScss` enabled** (CDN disabled), so the outsourced SCSS files are used.**Bootstrap SCSS sources**Present at `EXT:t3sb_package/Resources/Public/T3SB-Bootstrap/Bootstrap/scss/` (created by t3sbootstrap; required for compilation).Installation ------------ [](#installation) ### Composer (recommended) [](#composer-recommended) ``` composer require t3sbs/t3sbootstrap-builder ``` ### Classic (non-Composer) [](#classic-non-composer) 1. Download and unpack into `typo3conf/ext/t3sbootstrap_builder/`. 2. Activate the extension in the **Extension Manager**. 3. Run **Analyze Database Structure** to create `tx_t3sbootstrapbuilder_theme`. ### After installing (either way) [](#after-installing-either-way) Flush caches: ``` php typo3/sysext/core/bin/typo3 cache:flush ``` The module then appears under **Content → T3SB Builder** (icon shared with t3sbootstrap). Quick start ----------- [](#quick-start) 1. Open **Content → T3SB Builder** and pick the site you want to theme. 2. *(Optional)* Choose a **Bootswatch preset** as a starting point and load its values. 3. Adjust colors, typography, spacing and component variables in the grouped editor. 4. Hit **Preview** to compile and check your changes — safely, without touching the live frontend. 5. Hit **Publish** to make the theme live, or **Export SCSS (.zip)** to download it. Preview, Publish & Export ----------------------------- [](#preview-publish--export) The builder is the **single source of truth** for the variables it manages: on every save the variable files are fully overwritten (with a timestamped backup), never merged or appended. Three actions sit at the bottom of the editor: ActionColorWhat it doesAffects frontend?**Preview**greenWrites a *separate* preview track and compiles **only** the backend preview (`bb-preview-{id}.css`). Runs via AJAX and refreshes only the preview iframe — no page reload, so open groups, scroll position and field state are preserved. Falls back to a normal submit if JS is off.No**Publish**primaryWrites the live frontend files, keeps the t3sbootstrap config record in sync and recompiles. A confirmation dialog is shown first.**Yes****Export SCSS (.zip)**greySaves the current values and downloads a ZIP (see [SCSS export](#scss-export)).NoBoth Preview and Publish also refresh the in-backend component preview. Your edits are stored either way (and pre-filled when reopening) — only **Publish** goes live. How it works ------------ [](#how-it-works) 1. The editor exposes a catalog of Bootstrap 5.3 variables (`$primary`, `$card-border-radius`, `$enable-rounded`, …) in collapsible groups. 2. On save, the builder writes a complete variables SCSS file from all field values (defaults overlaid with your edits). 3. Compilation uses the scssphp engine shipped with `EXT:t3sbootstrap` (`Contrib/scssphp`), importing `custom-variables → bootstrap → custom`. The backend preview is written to `typo3temp/assets/t3sbootstrap/css/bb-preview-{id}.css`. 4. **Publish** additionally writes t3sbootstrap's live SCSS files and config record, so the frontend recompiles with the new theme. 5. **Preview** uses a backend AJAX route (`ajax_t3sbootstrap_builder_preview`, handled by `AjaxController`) that compiles the preview track and returns the CSS URL as JSON, so the editor swaps the preview iframe's `srcdoc` in place instead of reloading the page. Editor features --------------- [](#editor-features) **~200 variables across 24 collapsible groups:** Theme colors, Body, Text colors, Links, Typography, Grid & Spacing, Border radius, Buttons, Forms, Options & Toggles, Cards, Carousel, Navbar, Nav, Dropdowns, Alerts, Badges, List groups, Tables, Modals, Accordion, Progress, Pagination, Tooltips & Popovers. - **Collapsible groups** (native ``) as an exclusive accordion: opening one closes the others, and the component preview scrolls to the matching section. - **Boolean options** (the `enable-*` flags) render as on/off switches. - **Color inputs:** - *Theme colors* group — color picker + text field. - All other color groups — color picker + text field + a **theme-color reference select** that writes an SCSS reference (`$primary`, `$success`, …) into the field. - The text field always stays editable for `rgba()` or `$variable` references. - **Bootswatch presets** — pick a base preset and load its values into the fields client-side (no reload). Your own edits stay on top. **Two-tab preview:** TabWhat you see**Components**An interactive component gallery rendered from the compiled CSS in an isolated iframe. Bootstrap's bundle JS runs inside, so dropdowns, tabs, accordion, tooltips, popovers, modal and carousel actually work. Resizable by dragging the bottom-right corner; translucent section backgrounds let a theme's body background (e.g. Quartz's gradient) show through.**Frontend**Your real frontend root page in an iframe (loaded on demand). After **Preview**, the stylesheet is swapped for the freshly compiled preview CSS *in this iframe only*, so you see unpublished changes without affecting the live site. An **Open** link opens the frontend in a new tab.A spinner is shown while each preview renders. SCSS export ----------- [](#scss-export) **Export SCSS (.zip)** saves the current editor values and downloads a ZIP named `{site}-{YYYY-MM-DD-HHMMSS}.zip` containing exactly two files: - `scss/_variables.scss` — the pre-Bootstrap variables (your builder values). - `scss/_custom.scss` — the Bootswatch component overrides, followed by your additional custom SCSS (the *Additional custom SCSS (after Bootstrap)* field). Per-site themes --------------- [](#per-site-themes) One `tx_t3sbootstrapbuilder_theme` record per site (keyed by site identifier), stored at root level (`pid 0`). The TCA sets `ignorePageTypeRestriction`, so the record never blocks page doktype changes. Localization ------------ [](#localization) UI strings live in `Resources/Private/Language/`: - `locallang.xlf` / `de.locallang.xlf` — module UI and flash messages - `locallang_mod.xlf` / `de.locallang_mod.xlf` — backend module label English is the source language; German is provided as a translation. The backend follows the user's language, falling back to English. Variable group names stay in English (they mirror the Bootstrap SCSS variable names). Tips & troubleshooting -------------------------- [](#tips--troubleshooting) Tip `$enable-rounded` (group *Options & Toggles*) is a global Bootstrap switch: when off, **all** border-radius values (including `$card-border-radius`) are forced to `0`. Turn it on for radii to take effect. Important The **Frontend** preview tab embeds the real site in an iframe and swaps in the preview CSS, which requires backend and frontend on the **same origin**. If the frontend forbids embedding (`X-Frame-Options` / CSP `frame-ancestors`) or is cross-origin, use the **Open** link instead. Note Backups of the live variable files are kept as `_{timestamp}-custom-variables-{id}.scss` next to the originals in `EXT:t3sb_package/Resources/Public/T3SB-SCSS/` (old backups are auto-pruned). Third-party ----------- [](#third-party) - **Bootstrap bundle JS** (`Resources/Public/JavaScript/vendor/bootstrap.bundle.min.js`, v5.3.3, MIT) — shipped to power the interactive component preview. - **Bootswatch presets** — MIT-licensed (). The 26 presets are pre-cached in `Resources/Public/Presets/` (each as `_variables.scss` + `_bootswatch.scss`) and loaded at runtime; no download happens at runtime. License ------- [](#license) GPL-2.0-or-later — see [`LICENSE.txt`](LICENSE.txt). --- Maintained by **T3Solution** · [t3solution.de](https://t3solution.de) · part of the [t3sbootstrap](https://www.t3sbootstrap.de) ecosystem. ### Health Score 40 — FairBetter than 86% of packages Maintenance100 Actively maintained with recent releases Popularity0 Limited adoption so far Community6 Small or concentrated contributor base Maturity47 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~0 days Total 2 Last Release 0d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/364ed6595e83984b6af793de447b897c833e490c22686473372fcc79c40e0191?d=identicon)[t3solution](/maintainers/t3solution) --- Top Contributors [![t3solution](https://avatars.githubusercontent.com/u/5745943?v=4)](https://github.com/t3solution "t3solution (5 commits)") --- Tags scssthemebootstraptypo3bootswatch ### Embed Badge ![Health badge](/badges/t3sbs-t3sbootstrap-builder/health.svg) ``` [![Health](https://phpackages.com/badges/t3sbs-t3sbootstrap-builder/health.svg)](https://phpackages.com/packages/t3sbs-t3sbootstrap-builder) ``` ### Alternatives [friendsoftypo3/content-blocks TYPO3 CMS Content Blocks - Content Types API | Define reusable components via YAML 101466.4k45](/packages/friendsoftypo3-content-blocks)[pagemachine/typo3-formlog Form log for TYPO3 23233.9k7](/packages/pagemachine-typo3-formlog)[bk2k/bootstrap-package Bootstrap Package delivers a full configured frontend theme for TYPO3, based on the Bootstrap CSS Framework. 354939.0k93](/packages/bk2k-bootstrap-package)[netresearch/rte-ckeditor-image Image support in CKEditor for the TYPO3 ecosystem - by Netresearch 611.0M6](/packages/netresearch-rte-ckeditor-image)[wazum/sluggi TYPO3 extension for URL slug management with inline editing, auto-sync, locking, access control, and redirects 41515.2k](/packages/wazum-sluggi)[web-vision/wv_deepltranslate DeepL Translate (CORE) - This extension provides option to translate content element, and TCA record texts to DeepL supported languages. 33296.7k](/packages/web-vision-wv-deepltranslate) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)