Responsive Templates mit Joomla! 3
JUI verstehen und anwenden

Joomla! 3 bietet dem Templateentwickler mit LESS, dem Twitter Bootstrap Framework und Icon-Fonts ein Set von Tools und Frameworks, die die Entwicklung responsiver, moderner Templates sehr einfach und effektiv machen. Ein erster Schritt diese für die eigene Templateentwicklung effektiv einsetzten zu können besteht darin zu verstehen, wie die Teile zusammenarbeiten.

Moderne CSS3 Designelemente können eine Menge CSS-Code erfordern, damit sie in allen Browsern ordentlich dargestellt werden

Die CSS3 Spezifikation umfasst viele ansprechende Designelemente wie, z.B. abgerundete Ecken, semitransparente Hintergründe, Farbgradienten. Aber, wie könnte es anders sein, die Umsetzung der Spezifikation für unterschiedliche Browser ist unterschiedlich weit fortgeschritten, so dass man bei Verwendung von CSS3 Featuren immer mit entsprechenden Fallback-Lösungen arbeitet. CSS-Code, der abgerundete Ecken in möglichst vielen Browsern richtig darstellt, umfasst deshalb eine ganze Menge Codezeilen.

LESS ermöglicht es CSS-Code mit wesentlich weniger Schreibarbeit zu erstellen.

Wenn Sie in Ihrem Template nun an vielen Stellen abgerundete Ecken verwenden, kann das ganzschön viel Schreibarbeit sein. An dieser Stelle kommt das erste Feature ins Spiel, dass Joomla! 3 verwendet - das LESS Framework. LESS erweitert CSS um Parameter, Funktionen und ähnliches und bietet einen Preprozessor, der aus dem LESS Code CSS generiert, bevor dieses vom Browser gelesen wird. Mit LESS können Sie einen Parameter definieren, der den gesamten CSS3-Code für browserübergreifend funktionierende abgerundetet Ecken enthält. Im LESS Ihres Templates tippen Sie dann nur diesen Parameter überall dort ein, wo abgrundete Ecken entstehen sollen, und nachdem der Prozessor die LESS Datei zu CSS kompiliert hat, haben Sie überall den vollständigen Code stehen.

Das Bootstrap Framework

Interaktives und responsives Design ohne Kenntnisse in JavaScript

Wenn Sie CSS3 Feature browserübergreifend kompatibel einsetzen wollen und den LESS-Code hierfür selbst schreiben, müssen Sie aber immer noch wissen, wie dieser browserübergreifend kompatible CSS-Code für all die schönen CSS3 Feature aussieht. Und hier kommt das zweite Framework der JUI ins Spiel, das Twitter Bootstrap Framework. Bootstrap ist ein LESS, JavaScript und JQuery basiertes Framework, das es ermöglicht ohne Kenntnisse von JavaScript und JQuery über eine HTML-Attribut basierte API interaktiven und responsiven Webseiten-Code zu erstellen.

Was bedeutet das? Wenn Sie das Frameworks in Ihrem Template eingebunden haben, können Sie allein durch die Verwendung der richtigen HTML-Struktur und das Einfügen der richtigen Attribute wie "class" oder "data-toggle" mit den richtigen Attribut-Werten fix und fertig formatierte Designelemente wie z.B. eine vertikale Button-Gruppe in Ihrer Webseite anzeigen - ohne eine Zeile CSS- oder JavaScript-Code zu schreiben.

Und das Beste ist, dass Komponenten und Module des Joomla! 3 Core eine HTML-Code und -Attribut Struktur liefern, die genau auf das Bootstrap Framework abgestimmt sind.

Das Bootstrap Framework bringt bereits alle LESS-Dateien mit, die all den Code enthalten um browserkompatibles CSS sogar mit Fallback zu erzeugen. Hier ist das Wissen vieler Webentwickler eingeflossen und die Qualität ist sehr hoch.

Ein weiterer Trick des Bootstrap Frameworks ist etwas, das ich als geschachtelte Funktionalität bezeichnen möchte. Eine Navigation wird beispielsweise durch class="nav" definiert, die im Joomla! Modul Menü immer automatisch mit ausgegeben wird. Wie die Navigation genauer aussieht wird dann durch einen zweiten Wert im class-Attribut gesteuert (z.B. class="nav nav-tabs" für eine Tab-Navigation oder class="nav nav-pills" für eine pillenformige Navigation) und das können Sie in Joomla! natürlich über die Option Module-Class-Suffix prima eingeben.

Das Bootstrap Framework hat darüber hinaus ein einfach zu nutzen und anzupassendes Grid-System für responsives Webdesign. Auch dieses wird über Attribute im HTML-Code gesteuert.

Protostar - Beipieltemplate und Vorlage für Templateentwickler

Weiterhin finden Sie in Joomla! 3 mit den Template Protostar ein Beispieltemplate, das die Feature des Bootstrap Frameworks verwendet. Sie können es wunderbar als Vorlage verwenden, wenn Sie ein eigenes responsives Template erstellen wollen. Nutzen Sie hierbei die LESS-Dateien des Bootstrap Frameworks. Sie werden staunen, wie wenig Code Sie schreiben müssen.

Die letzte Neuerung für Templateentwickler im Rahmen des Joomla! 3 JUI ist die Verwendung von Icon-Fonts anstelle von Icons. Dies ist ebenfalls ein Bestandteil des Bootstrap Framework.

Lesen Sie die Dokumentationen

Alle von der Joomla! 3 JUI verwendeten Tools und Frameworks sind auf Ihren jeweiligen Webseiten (Links siehe unten) ausgezeichnet dokumentiert. Ich empfehle Jedem, diese Dokumentationen aufmerksam durchzulesen. Investieren Sie wenige Stunden ins Lesen es zahlt sich bei der Templateentwicklung auf jeden Fall aus.

Wie man die Frameworks nutzen kann

LESS

Es gibt verschiedene LESS-Kompiler auf JavaScript oder PHP-basis. Für Entwicklungsumgebungen empfiehlt es sich die JavaScript-Version zu verwenden. Dann wird der LESS-Code jedesmal neu kompliert, wenn die Webseite aktualisiert wird und man bekommt Fehler im LESS-Code direkt angezeigt.

Für die JavaScript-Version den eigenen LESS-Code in die Datei template.less schreiben und diese ins Template einbinden. Datei less.js von lesscss.org herunterladen (bzw. den Code in eine Text-Datei kopieren und diese als less.js speichern) und ins Template einbinden.

Für Produktivumgebungen ist es sinnvoll die LESS-Datei vorab einmal zu einer CSS-Datei kompilieren und diese CSS-Datei ins Template einbinden. Das geht z.B. mit dem PHP-basierten LESS-Kompiler den man bei leafo.net/lessphp herunterladen kann (aktuelle Version lessphp-0.3.9.tar.gz). Das Archiv enthält eine sehr gute Dokumentation, die beschreibt, wie der Kompiler zum Laufen gebracht werden kann.

Bootstrap Framework

Die Dateien des Bootstrap Frameworks finden Sie in Ihrer Joomla! Installation in den Verzeichnissen unter media/jui. Interessant ist hier vor allem das less-Verzeichnis, das die LESS-Dateien des Bootstrap Frameworks enthält. Im Beispieltemplate Protostar sind die Dateien template.less, die variables.less und die icomoon.less der Einstiegspunkt für die Verwendung des Bootstrap LESS-Code. template.less bindet alle LESS-Dateien des Bootstrap Frameworks aus medie/jui/less ein und enthält den individuellen LESS-Code des Template,s während die Defaultwerte für LESS-Variablen in der variables.less festgelegt sind.

Framework einbinden

Mit dem Befehl
JHtml::_('bootstrap.framework');
in der index.php des Templates wird das JavaScript des Frameworks ins Template integriert.

Am einfachsten ist es, wenn Sie das Template Protostar als Basis verwenden und die oben genannten Dateien adaptieren, um Ihr individuelles Template zu entwicklen.

Links

Dokumentation Bootstrap Framework
Dokumentation LESS
Icon-Font IcoMoon

Zur Beitragsliste