Nach der Installation von TYPO3 gibt es unzählige Wege, Deiner Website Aussehen und Funktionalität zu verpassen. Das Bootstrap-Package ist einer davon.

Das Bootstrap-Package von Benjamin Kott ist eine Erweiterung (Extension) für TYPO3. Es dient dazu, Websites schnell und einfach mit einem modernen, responsiven Design zu erstellen. Das Bootstrap-Package nutzt das populäre Frontend-Framework Bootstrap, welches eine Sammlung von Werkzeugen für Webdesign und -entwicklung bietet. Es enthält vorgefertigte Design-Vorlagen und Komponenten, wie Navigationselemente, Schaltflächen und Formulare, die sich automatisch an verschiedene Bildschirmgrößen und Geräte anpassen.

Die Extension bietet eine gute Grundlage für die Entwicklung responsiver Websites mit TYPO3 und ermöglicht es Webentwicklern und Designern, Zeit zu sparen, indem sie auf ein robustes Set an Design-Elementen und Layouts zurückgreifen können. Zusätzlich ist das Bootstrap-Package hoch konfigurierbar, sodass es sich leicht an spezifische Designanforderungen anpassen lässt. Es unterstützt auch die neuesten Webtechnologien und SEO-Praktiken, um die Sichtbarkeit und Performance der Website zu verbessern.

Erstelle vom Wurzelverzeichnis Deiner Installation aus das Verzeichnis packages und dort hinein ein Verzeichnis extensions. In dieses Verzeichnis kopierst Du das heruntergeladene und entpackte Sitepackage. Dein Verzeichnisbaum sieht (gekürzt) dann so in etwa aus:

meinProjekt/
├── .ddev/
├── config/
├── packages/
|   └── extensions/
|       └── sitepackage/
├── public/
├── var/
└── vendor/

In der Datei composer.json fügst Du diesen Schnipsel ein und machst damit Dein eben erstelltes Verzeichnis bekannt:

"repositories": [
	{
		"type": "path",
		"url": "packages/extensions/*"
	}
],

Die Installation schließt Du – ausgehend vom Wurzelverzeichnis Deines Projektes – mit diesem Befehl ab. Ersetze dabei vendor und name durch die von Dir gemachten Angaben.

ddev composer require vendor/name:@dev

Falls Du noch keine Seite in Deinem Projekt angelegt hast, wäre jetzt ein guter Zeitpunkt dafür. Lege zuerst eine Root-Seite als Startseite an und dort hinein einige Unterseiten. Die Unterseiten können auch weitere Unterseiten beinhalten.

In der Datei /Resources/Public/Scss/Theme/_variables.scss können Angaben gemacht werden, die dann für die Anzeige herangezogen werden. Diese Datei ist zu Beginn – vom Kommentar abgesehen – leer.
Beispiele für Variablen sind z. B.:

$primary: #bada55;
$dark: #ff0000;
$font-size-base: 1.15rem;

In der Datei /Configuration/TypoScript/constants.typoscript können Werte als Konstanten gesetzt werden. Hier sind z. B. die Angaben für das Logo und das Favicon zu finden.
Hier können jedoch auch Werte für die SCSS Variablen gesetzt werden. Dies geschieht das nach dem Muster:

plugin.bootstrap_package.settings.scss {
    primary = #ff0000
    secondary = #013859
}

Die Werte in den Konstanten werden jedoch von den Werten in der _variables.scss überschrieben.

Startseite mit Transition-Navigationsleiste?

[tree.level === 0]
    page.theme.navigation.style = default-transition
[end]

Viel Spaß beim Ausprobieren und der Umsetzung.