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!

Tags:


Fügen Sie Ihren Kommentar hinzu

Kommentare

  • Es gibt auch eine Funktion Modulus($mod, $startIndex = 1), die ist aber umständlicher zu bedienen und schwerer zu verstehen.

    Geschrieben von Roland Lehmann, 02/09/2010 10:31 Uhr (vor 4 Jahre)

  • Super, das ist doch wesentlich eleganter als die herkömmliche Umsetzung über Modulo (Division mit Rest).

    Geschrieben von Ramon, 02/09/2010 09:53 Uhr (vor 4 Jahre)

RSS Feed für Kommentare auf dieser Seite | RSS Feed für alle Kommentare