Wichtig Links zur Gantry-Dokumentation
| LESS CSS | Auf dieser Seite steht beschrieben, wie LESS prinzipiell funktioniert, das Compilen, diverse konzeptionelle und syntaktische Prinzipien, wie die Einbindung im Gantry-Template erfolgt usw. |
| Adding a Custom Stylesheet | Auch dieser Text beschreibt wie mit Custom-Style die Gantry-Styles überschrieben werden können. Interessant ist hier die Verwendung von Browser-Weichen |
Einbinden einer eigenen CSS-Datei ins Template - ohne LESS
Um eine eigene CSS-Datei im Gantry-Template einzubinden, muss lediglich im Gantry-Template-Verzeichnis und hier im Unterverzeichnis ~/css/ eine Scriptdatei mit dem Name gantry-custom.css abgelegt werden. Der Dateiname ergibt sich aus dem Namen für das Template also gantry plus dem Zusatz custom. Diese Variante erzeugt eine CSS-Datei, die dann so unkomprimiert zusätzlich ins Template geladen wird.
Einbinden von Style-Dateien ins Template - mit LESS
Die eigentlich bessere Alternative ist es das Gantry-Konzept beizubehalten und Styles über die ~.less-Dateien zu formatieren. Dazu kann zu jeder ~.less-Datei im Verzeichnis ~/less/ eine "Ergänzungsdatei" erzeugt werden. Hierbei handelt es sich nicht um ein Overriding, denn bei entsprechender Namesgebung wird die neue Ergänzungsdatei zusätzlich zur entsprechenden Originaldatei geladen. Natürlich ist es Ziel, dass in der neuen LESS-Datei die Styles überschrieben werden die aus der Originalen zu modifizieren sind.
Das erfolgt durch Anfügen von -custom in den Dateinamen. D.h. am Beispiel: Die variables.less (definiert einen Satz von Templatestyle-abhängigen Designkonstanten*) wird kopiert nach variables-custom.less. Durch den Less-Compiler wird dann zunächst die variables.less verarbeitet und dann die variables-custom.less in die Master-CSS-Datei bzw. ihrer Cachingversion kompiliert (adäquat für die menu-Cachingversion).
* Nach meinem Verständnis ist die Bezeichnung variables eben nicht ganz korrekt. Eigentlich werden hier Konstanten verwendet, also fest definiert und Templateweit konstant verwendet. Für Variablen ist eher typisch, dass sich diese im Programmablauf ggf. dynamisch verändern.
Laden von LESS-Dateien abhängig von Template-Konfigurationsparametern
Im Gandry-Original-Template gibt es Presets die einen dunklen Headerhintergrund nutzen. Entsprechend wird durch diese Presets der Template-Parameter Headerstyle im Tab Style auf dark statt auf light gesetzt. Hiermit wird eine Template-Variable belegt @{headerstyle} welche so in allen LESS-Dateien abgerufen und verwendet werden kann um z.B. dynamisch davon abhängige weitere LESS-Dateien einzulinken. Das macht speziell Sinn für Hintergründe, denn z.B. auf dunklem Hintergrund möchte man bevorzugt helle Schriften verwenden, auf hellen Hintergründen eher dunkle, sowie weitere evtl. davon abhängige Formateigenschaften.
Die Vewendung dieser Parameter in den LESS-Datei sieht dann beispielhaft so aus: @import "menu-@{headerstyle}.less"; .Hiermit wird dann also entweder die menu-dark.less oder menu-light.less geladen.