Einfache Template Entwicklung mit TYPO3 – Step by Step zum eigenen Sitepackage Teil 1

Als ich 2011 bei Mittwald angefangen habe, hatte ich noch keine Ahnung davon, wie man ein Template erstellt, geschweige denn eine Extension schreibt. Ich musste dafür die TYPO3 Sprache TypoScript lernen. Einige Zeit später bin ich auf Fluid umgestiegen. Alles gar nicht so easy. Doch seitdem es das Bootstrap Package von Benjamin Kott gibt, ist die Erstellung relativ einfach. Der Funktionsumfang und die Möglichkeiten haben mich so sehr begeistert, dass ich es dir gerne im Detail vorstellen möchte.

Wie der Name des Sitepackage verrät, basiert das komplette Frontend des Themes auf dem Bootstrap Framework. Das gibt dir die Möglichkeit, es sehr einfach (um vorhandene Funktionen) zu erweitern und Veränderungen vorzunehmen.

Screenshot: www.bootstrap-package.com

Im ersten Teil der Reihe möchte ich dich von meinen Highlight-Funktionen des Packages begeistern. Denn das Bootstrap Framework hält über 600 Konfigurationsmöglichkeiten für dich bereit. Die ganzen Einstellungsmöglichkeiten machen es Einsteigern leicht, schnell Erfolge zu sehen und eine Seite aufzubauen. Ebenso erfahren Fortgeschrittene eine enorme Arbeitserleichterung.

An dieser Stelle sei schon mal ein großer Dank an Benjamin Kott für seine ganze Arbeit, die in das Sitepackage geflossen ist, ausgesprochen!

Mit dem Bootstrap Package kannst du über das Backend Layout mehrere Spalten auf einer Seite anlegen und für mehr Übersicht deiner Seite sorgen. Über die Seiteneigenschaften > Erscheinungsbild kannst du die gewünschten Spalten für die jeweilige Seite auswählen.

Für mich als ehemaliger Redakteur ein richtiges Hidden Feature: Redakteure können den Footer mit Inhalten füllen und verändern. Denn: Der Footer wird immer von der Hauptseite vererbt oder eben von einer Unterseite, die ebenfalls Inhalte in der Footer-Section hat.

Ein weiteres Highlight: Für die Startseite gibt es ein spezielles Backend-Layout, das noch weitere Bereiche enthält, die du später mit Inhalten füllen kannst und so flexibler bist als nur mit Spalten.

Kommen wir zu den Content Elementen (CE). Zu den üblichen hält das Bootstrap-Framework noch weitere bereit, z. B. Cards, Carosul, Accordion, Tab oder Panel. Um den Rahmen des Blog-Beitrags nicht völlig zu sprengen, werde ich auf diese jedoch nicht weiter eingehen.

Was ich dir aber mitgeben möchte: Du kannst bei jedem Content Element die Hintergrundfarbe oder ein Hintergrundbild hinterlegen. Bei den Farben wird direkt auf die im Theme verwendeten Farben wie primary, secondary, light und dark zugegriffen. Weitere Effekte wie Parallax, Filter oder Fade sind ebenso möglich.

Über die Rahmen und Abstände kannst du ein CE vollflächig auf einer Seite ausspielen. So wurde beispielsweise das Carousel auf der Startseite der Demo realisiert. ;)

Neben den vielen Einstellungsmöglichkeiten, die du bei den Content Elementen hast, gibt es auch welche für das Theme. Beispielsweise kannst du mit dem Konstanten-Editor über 120 Optionen konfigurieren und das Layout deiner Website verändern – von der Navigation (Menü) über das Logo bis hin zum Header sind dir so gut wie keine Grenzen gesetzt. 

Das war's erst mal. Wenn du nun auch so begeistert bist wie ich und ein Projekt mit dem Bootstrap Package umsetzten möchtest, verschafft dir die Demo einen Überblick über den massiven Funktionsumfang. ;-) Möchtest du einen tieferen Blick in das Package werfen, kannst du dir über den Extensionmanager in einer leeren TYPO3 Installation das Introduction Package installieren. 

Doch vielmehr lohnt es sich, bis zu meinem nächsten Artikel am 28.10.20 zu warten. Dort zeige ich dir, wie genau du dein eigenes Sitepackage erstellest, das auf dem Bootstrap Package basiert.