YAML Grids in SilverStripe leicht gemacht
Wenn ein Mensch Programmcode lieben kann, dann liebe ich YAML. Man kann das CSS-Framework von seiner Wirkung her mit einem Apple Computer vergleichen: Es ist da ohne aufzufallen und nimmt einem Arbeit ab, indem es keine Arbeit macht. Seit wir unsere Webdesigns YAMLn, haben wir nie wieder Zeit auf das Beseitigen von Browserbugs verwendet. Gekostet hat uns das einmalig 120 und für jedes Design dauert die Einbindung des Frameworks ca. 30 Minuten.
Jetzt komm mal zur Sache!
Das schönste Framework bringt allerdings nichts, wenn man es falsch bedient. BeiYAML gibt es da ein paar Feinheiten zu beachten. Ich will heute über den richtigen Umgang mit Grids erzählen.
Mit YAML-Grids kann man eine Layoutspalte in weitere Spalten und Zeilen unterteilen, indem man einem Blockelement eine bestimmte Klasse gibt. Die Klasse c33l sorgt zum Beispiel dafür, dass das Blockelement 33% der Breite der umgebenden Layoutspalte hat.
Will man jetzt eine Layoutspalte in drei Spalten teilen, so muss man drei Blockelemente erzeugen:
[html]
<div class="c33l"></div>
<div class="c33l"></div>
<div> class="c33r"></div>
Der Klassennamen der Spalte am rechten Rand hat jetzt statt dem "l" ein "r". Diese Klasse unterscheidet sich durch ein negatives Margin von der anderen, das irgend einen dummen IE Bug behebt, über den ich nicht nachdenken will und auch nicht muss. Ich muss nur wissen, dass es so ist und fertig.
Wie setzt man das bitteschön dynamisch um?
Ich hatte schon öfter den Fall, dass ich eine variable Anzahl von Blockelementen auf einer Seite darstellen wollte, und zwar immer drei pro Zeile. Mit folgendem Kunstgriff weist man jetzt in SilverStripe immer jedem dritten Blockelement die Klasse "c33r" zu:
<% control MyDataObjectSet %>
<div <% if MultipleOf(3) %>class="c33r"<% else %>class="c33l"<% end_if %>
Some Content...
</div>
<% end_control %>
MultipleOf(3) ist eine Methode aus ViewableDate und überprüft, ob die Position des Objekts ein vielfaches von 3 im DataObjectSet ist.
Diese Funktionalität gibt es seit SilverStripe 2.4, viel Spass!