Gantry Template Framework (Joomla/Wordpress/Gravity) Know-How / Tutorials

Gantry ist eine Template-Framework von RocketTheme. Es liegt aktuell vor in der Version 5. Auch die Version 4 war schon sehr beliebt und verbreitet und wird genau wie Version 5 von RocketTheme in Ihren Templates eingesetzt. Gantry 5 ist als Template-Framework sowohl in Joomla und Wordpress nutzbar und nun auch in dem von RocketTheme entwickelten CMS GRAV bzw. gravity.

Das Framework nutzt viele neue moderne Technologien wie YAML, TWIG, SCSS, Mark Down und auch ein sauberes Override.

Bewertung: 5 / 5

Stern aktivStern aktivStern aktivStern aktivStern aktiv

Sie haben es sicher schon gesehen, dass es bei SASS (scss) manche Style-Scripte mit einem Unterstrich im Dateinamen beginnen, andere wiederum nicht. Bei der Import-Einbindung dieser Scripte aber scheint die Schreibweise egal. Was hat das damit aussich?

 

Der Sinn der Underscore-Syntax

...ist, daß hierüber dem SASS-Compiler mitgeteilt werden kann, ob man eine importierte Scriptdatei wirklich mit ihrem Inhalt in eine aufrufende Scriptdatei einbetten will, es also am Ende nur eine einzige Scriptdatei entsteht in der alle so importierten Unterscripte mit ihrem Inhalt enthalten sind. Ohne Unterstrich demgegenüber sagt man jedoch dem Compiler, dass diese so importierte scss-Datei als eine eigenständige css-Datei compiliert erhalten bleibt und klassisch per @import in der fertigen css-Hauptscript aufgerufen wird. D.h., in diesem Fall entstehen ggf. nicht eine einzige CSS-Datei, sondern sehr viele einzelne.

Bewertung: 4 / 5

Stern aktivStern aktivStern aktivStern aktivStern inaktiv

Zielstellung:

Über den Template-Manager von Gantry 5 ist es sehr einfach Fonts in das Template einzubinden, ganz besonders dann, wenn man einfach nur einen Font vom Google-Font-Server einbinden möchte. Hierfür wird von Gantry 5 im Template-Manager ein Font-Selector-Tool angeboten Base-Outline > Register Styles > Gruppe Font Families. Das wäre ein Methode.

Eine weitere Methode, aber ein klein wenig komplizierter, wäre es, wenn man z.B. für Kundenprojekte eine CI-Schrift einbinden soll, die nicht aus dem Google-Fundus kommt. Zunächst sind hier natürlich die Urheber- und Lizenzrechte für die Schrift zu beachten! Nicht jede Schrift darf einfach über eine Webseite eingebunden werden. Das wäre eine unzulässig Verbreitung, denn jede so eingebundene Schrift ist dann für jedermann downloadbar. Es gibt aber neben den Google-Fonts weitere Seiten die auch kostenlose Schriften anbieten - z.B. fontfabric.com oder fontsquirrel.com. Hier allerdings werden diese nicht als Dienst bereitgestellt, sondern man muss diese als ZIP-Archiv herunterladen und selbst hosten und entsprechend als Font-Family einbinden. Diese Methode soll nun beschrieben werden.

Bewertung: 4 / 5

Stern aktivStern aktivStern aktivStern aktivStern inaktiv

Wie passt man für Gantry 5 das Layout nach eigenen Bedürfnissen an - Erstellung eigener Outlines

Eigene Outline anlegen.

Outlines sind die Vorlagen für Gantry-Layouts. Von diesen können Layouts abgeleitet werden in dem ein Layout erstellt wird und dann über den load-Button dieses Outline auf das neue Layout angewendet wird. Das Layout erhält dann die vollst. Struktur wie im Outline angelegt, allerdings kann man für späteteres Überschreiben eines Layouts mit einem Outline festlegen, wie konsequent das Überschreiben erfolgen soll. So können z.B. bereits vorgenommene Modifikationen im Layout erhalten bleiben und trotzdem neue oder geänderte Strukturen aus dem Outline geladen werden.

Um nun ein eigenes Outline anzulegen, geht man in den Ordner templates/g5_helium/layouts. Die hier vorhandenen YAML-Scripte beschreiben die vorhandenen Outlines. Entweder kopiert man sich eine als Ausgangsbasis geeignete Vorlage mit eigenem Namen oder man erstellt von grundauf per Editor seine eigenen Vorlage.

Häufig findet man als Vorlagen die default.yaml, welche die Standardvorlage (Base-Outline) ist, welche meist auf alle Projektseiten angewendet wurde. Dann gibt es häufig eine home_-_particle.yaml, welche beispielhaft eine Layout mit Particeln für die HomePage liefert. Das trifft so meist bei fertigen RocketTheme-Templates für Joomla, Wordpress oder Grav zu. Weitere Outlines sind für die Error- und Offline-Page bestimmt.

Bewertung: 4 / 5

Stern aktivStern aktivStern aktivStern aktivStern inaktiv

In Gantry 5 Templates kann man unter dem Menü-Button Styles grundsätzliche Einstellungen und Parameter für seine Templates vornehmen. Dort werden z.B. die CI-Farben hinterlegt, die Hauptschriften, Sectionsfarben oder Hintergrundbilder etc.

Dieser Artikel beschreibt, wie Sie das Set an Konfigurationsparametern in Ihrem Gantry-5-Template projektabhängig verändern oder erweitern können am zwei Beispielen:

  1. Sie wollen weitere CI-Farben hinzufügen
  2. Sie wollen für eine selbst erstellte Section Hauptfarben und Hintergrundbilder definieren.

 

Beispiel A: Hinzufügen und bereitstellen weiterer CI-Farben

Entscheidend für alle Erweiterungen und Änderungen im Set der Styles-Konfigurationsformulare ist das Verzeichnis templates/g5_helium/blueprints/styles. Hier gilt die Regel, jede dort abgelegt YAML-Datei erzeugt eine neue Formulargruppe. Die accent.yaml ist z.B. für die Konfigurationsparameter der Akzent-Farben veranwortlich. Diese hat typischerweise folgenden Aufbau:

Bewertung: 3 / 5

Stern aktivStern aktivStern aktivStern inaktivStern inaktiv

Das Gantry5 YAML-Dateisystem - Datenspeicherung

Wer mit Gantry 5 arbeitet wird früher oder später auf die Frage stoßen, wo das Gantry5-Template seine Konfiguraitonsdaten speichert. Hierbei geht es zum einen um die Daten die beim Konfigurieren des Layouts, der Style und auch der Particle-Inhalte abgelegt werden. In der Datenbank speichert Gantry5 so gut wie gar nichts, maximal die Einstellungen die Joomla als Schnittstelle benötigt, um das Template ins Framework einzubinden. Für alle sonstigen Einstellungen und Daten arbeitet Gantry5 konsequent mit seinem YAML-Dateisystem.

 

Ein Totalcrash nach SVG-Logo-Speicherung - Grund für notwendige manuelle Dateimanipulation

Ich selbst musste mich mit der Analyse beschäftigen, als ich im Logo-Template des "Base Outline"-Layouts (=Default) mal eine relatives großes SVG als Logo abgelegt hatte (ca. 23KB). Infolge dessen war das komplette Projekt vollst. unerreichbar - sowohl im Backend als auch im Frontend. Es gab keine Möglichkeit mehr das Projekt wieder zum Laufen zu bringen, außer mir die Datei zu suchen, die für die Speicherung dieser Logo-Daten verantwortlich ist und diese manuell zu korrigieren.