Der T3SB Builder ist ein visueller Bootstrap-5.3-Theme-Builder als Backend-Modul für TYPO3 v14. Du gestaltest dein komplettes Theme direkt im TYPO3-Backend – mit Farb-Pickern, Schaltern und einer interaktiven Live-Vorschau – statt SCSS-Dateien von Hand zu pflegen.

Über rund 200 Bootstrap-Variablen in 24 übersichtlichen Gruppen steuerst du Farben, Typografie, Abstände, Buttons, Cards, Formulare, Navbar und vieles mehr an einer einzigen, zentralen Stelle. Jede Site bekommt ihr eigenes Theme – sauber getrennt und jederzeit nachvollziehbar.

Backend-Modul Bootstrap Builder mit Anleitung und Website-Auswahl zur Theme-Gestaltung
Einstiegsseite des Bootstrap Builders im TYPO3-Backend

Theming per Live-Vorschau statt endloser Kompilier-Schleifen.

Visuell bedienbar – und für Profis mit vollem, exportierbarem SCSS-Output.

Vorschau und Veröffentlichen getrennt – live geht nur, was du bewusst freigibst.

Rund 200 Variablen, eine zentrale Quelle – alle Komponenten ziehen mit.

Keine Overrides-Hacks, kein Framework-Lock-in.

Pro Site ein Theme, direkt dort, wo es gebraucht wird.

  • TYPO3 ≥ v14
  • EXT:t3sbootstrap ≥ 5.3.47
    Mit Konfigurations-Datensatz auf der Root-Seite jeder Site und aktiviertem customScss (CDN deaktiviert), damit die ausgelagerten SCSS-Dateien genutzt werden.

Über Composer (empfohlen)

composer require t3sbs/t3sbootstrap-builder

Über das TYPO3 Extension Repository (TER)

Installiere über den TYPO3 Extension Manager:

  • Im Extension-Manager aktivieren.
  • “Analyze Database Structure” ausführen – legt die Theme-Tabelle an.
  • Caches leeren:  php typo3/sysext/core/bin/typo3 cache:flush

Das Modul erscheint anschließend unter Inhalt → T3SB Builder.

Ein Bootstrap-Theme anzupassen bedeutete bisher: die richtige Variable kennen, einen Wert erraten, kompilieren, im Frontend prüfen – und das Ganze in Schleife wiederholen. Der T3SB Builder dreht diesen Ablauf um: Du änderst einen Wert und siehst das Ergebnis sofort in der eingebauten Vorschau.

Das spart bei jedem einzelnen Projekt wertvolle Arbeitszeit.

Der Builder trennt das Ausprobieren strikt vom Live-Schalten – einer der größten Vorteile im Alltag:

  • Vorschau kompiliert eine eigene Vorschau-Spur und aktualisiert per AJAX nur das Vorschau-Fenster. Dein Live-Frontend bleibt unberührt; geöffnete Gruppen, Scroll-Position und Eingaben bleiben erhalten – ganz ohne Reload.
  • Veröffentlichen schreibt die echten Frontend-Dateien, hält den t3sbootstrap-Datensatz synchron und kompiliert neu. Erst dieser Schritt geht live – und nur nach einer Sicherheitsabfrage.
  • SCSS exportieren (.zip) sichert die aktuellen Werte und lädt sie als ZIP herunter.

Deine Eingaben werden in jedem Fall gespeichert und beim erneuten Öffnen vorbefüllt – live geht ausschließlich, was du bewusst publizierst.

Theme-Editor des Bootstrap Builders mit Bootswatch-Vorlage quartz, Farb-Pickern und Komponenten-Vorschau
Theme-Editor des Bootstrap Builders
Aufgeklappte Variablengruppe Cards im Bootstrap Builder mit Eingabefeldern, Farb-Picker und Karten-Vorschau
Eine aufgeklappte Variablengruppe im Bootstrap Builder am Beispiel "Cards"

Der Tab Komponenten zeigt eine interaktive Galerie aller wichtigen Bootstrap-Bausteine, gerendert aus dem frisch kompilierten CSS in einem isolierten iframe. Bootstrap-JavaScript läuft mit – Dropdowns, Tabs, Accordion, Tooltips, Popovers, Modal und Carousel funktionieren also wirklich, statt nur als Standbild zu erscheinen. Das Vorschau-Fenster lässt sich an der Ecke frei in der Größe ziehen, sodass du dein Theme auch auf unterschiedlichen Breiten prüfst.

Der Tab Frontend bettet deine echte Startseite ein. Nach einem Klick auf Vorschau wird dort – und nur dort – das Stylesheet gegen das frisch kompilierte Vorschau-CSS getauscht: Du siehst deine noch nicht veröffentlichten Änderungen am realen Inhalt, ohne das Live-Frontend anzurühren. Ein Öffnen-Link öffnet die Seite zusätzlich in einem neuen Browser-Tab.

Du musst nicht bei null anfangen: 26 Bootswatch-Themes sind direkt eingebaut. Wähle ein Preset als Basis, lade seine Werte client-seitig in die Felder – ohne Reload und ohne Download zur Laufzeit – und verfeinere es anschließend bis ins Detail. Deine eigenen Anpassungen bleiben dabei immer obenauf. Vom fertigen Preset zum individuellen Corporate Design in Minuten statt Tagen.

Der Editor stellt rund 200 Bootstrap-5.3-Variablen in 24 zusammenklappbaren Gruppen bereit: Theme-Farben, Body, Textfarben, Links, Typografie, Grid & Spacing, Border-Radius, Buttons, Formulare, Cards, Carousel, Navbar, Nav, Dropdowns, Alerts, Badges, List-Groups, Tabellen, Modals, Accordion, Progress, Pagination sowie Tooltips & Popovers – plus globale Optionen.

  • An/Aus-Schalter für alle enable-*-Optionen – kein Tippen von true oder false.
  • Farb-Picker mit Texteingabe – plus eine Theme-Farb-Referenz, die saubere SCSS-Verweise wie $primary oder $success einträgt; rgba()-Werte bleiben jederzeit möglich.
  • Exklusives Accordion: Öffnest du eine Gruppe, schließen sich die anderen – und die Komponenten-Vorschau springt automatisch zum passenden Abschnitt.

Per Klick lädst du dein Theme als ZIP herunter – benannt nach Site und Zeitstempel, mit genau zwei Dateien:

  • scss/_variables.scss – deine Builder-Werte als Pre-Bootstrap-Variablen.
  • scss/_custom.scss – die Bootswatch-Overrides plus dein eigenes „Additional custom SCSS“.

Das ist echter, wartbarer SCSS-Code auf Basis der offiziellen Bootstrap-Variablen – versionierbar, im Team teilbar und auch unabhängig vom Builder weiterverwendbar. Dein Theme bleibt 100 % Bootstrap-konform und gehört dir.

TER GitHub