Die Template-Extension

Die Template-Extension als Basis auch für mehrere TYPO3-Projekte

Wird für die TYPO3-Template-Integration eine Template-Extension verwendet, dann werden alle Templates der Webseite in einer Extension gelagert. Das gilt für alle Template-Typen: HTML-Templates, Fluid-Templates, TypoScrip-Templates, und damit die gesamte Liste der TypoScripte der Webseite. Auch alle CSS- und JavaScript-Dateien der Webseite befinden sich in der Template-Extension. Damit liegen alle Dateien für die Konfiguration der Webseite in einem Verzeichnis.

Das macht es für Entwickler sehr einfach eine bestehende Webseite weiterzuentwickeln oder zu modifizieren. Die Arbeit im Team wird dadurch erleichtert. Versionierung z.B. mit Git oder Subversion (auch für die TypoScripte) wird dadurch möglich. Änderungen einer Datei, und wer sie wann gemacht hat, können nachvollzogen werden. Eine Konsequenz dieser Methode ist, dass mit einem externen Editor gearbeitet werden muss, der idealerweise TypoScript unterstützt. Das können z.B. Editoren wie UltraEdit, phpStorm oder WebStorm sein.

Eine Template Extension ist damit auch eine ideale Basis für mehrere TYPO3-Projekte. In dieser Extension befinden sich dann alle Dateien, die sich in einer Projekt-Gruppe nicht ändern werden. Später läßt sich dann in einem spezifischen Projekt mit abweichenden Eigenschaften, eine Extension schreiben, die nur diese abbildet. Eine neue Website hätte dann eine Template-Extension mit den Kerneigenschaften und eine Extension für die neuen , abweichenenden Eigenschaften.

Fluid-Templates

Fluid-Templates werden auf der Basis von HTML-Templates erstellt. Anders als ein HTML-Template kann ein Fluid-Template aber auch Funktionen haben. Es können darin Fluid-Funktionen verwendet werden, in denen z.B. Varablen und Bedingungen sind. Fluid-Templates können auch kleine Teile der Webseite haben, die sich an verschiedenen Stellen wiederholen oder oft eingesetzt werden. Dies sind sogenannte Partials. Damit its es möglich den Spieraum der Design-Standards zu erhöhen.

Auch ein Partial basiert auf einer HTML-Vorlage und kann spezielle Funktionen haben. Mit Partials kann eine Website ein individuelles Aussehen bekommen, weil man damit das Design des Seiten-Template weiterführen kann.

Responsive Design

Es ist bekannt, dass die Eigenschaften des Adressaten und seiner zu erwartenden Geräte bei der Realisierung des Responsive Webdesigns sehr wichtig sind. Ein fertiges CSS-Framework kann einem das Leben bei der Realiserung einer responsiven Website erheblich vereinfachen, sind doch viele Parameter beim Gerät des Nutzers abzufragen und danach die richtigen Angaben zurückzuschicken. Ein solches Framework enthält eine Sammlung von Hilfsmitteln wie z.B. ein Rasterlayout (Grid) und fertige Elemente aus HTML5 und CSS3. Das Framework kümmert sich auch um die Mediaabfragen mittels JavaScript. Auch die Webtypografie oder der Einsatz graphischer Symbole ist ein wichtiger Bestandteil eines Frameworks.

Bootstrap ist ein beliebtes CSS-Framework. Es bringt sein CSS, seine Komponenten (Symbole, Menüs, Navigationen) und sein JavaScript mit. Genauer gesagt liefert Bootstrap jQuery-Erweiterungen mit. Bootstrap läßt sich sehr gut in TYPO3 7 und 8 integrieren und mit TypoScript verbinden. Es kann vorkommen, dass die Bootstrap-Komponenten kaum mehr zu erkennen sind, weil sie durch eigene HTML5, CSS3 und Fluid-Template-Komponenten ersetzt wurden. In der Tat ist es deswegen manchmal nicht einmal mehr notwendig Bootstrap zu installieren. Natürlich müssen stattdessen eigene Komponenten vorhanden sein, die mit jQuery oder eigenem JavaScript die gewünschten Inhalte liefern.