Einbindung von Subtemplate-Elementen

Das neue YAML-Framework ermöglicht die Verwendung sog. Subtemplates. So lassen sich an jeder Stelle einer Website Inhalte in nebeneinanderliegenden Blöcken darstellen, hnlich wie dies mit Tabellen möglich wäre. Da Tabellen zur optischen Anordnung von Inhalten die heutigen Anforderungen einer semantischen Website nicht mehr erfüllen, ist diese legante Methode mittels Subtemplates sehr nützlich und kann aufgrund der hervorragenden Browserkompatibilität des YAML-Frameworks uneingeschränkt empfohlen werden.

Folgender Code erzeugt zwei nebeneinanderliegende Boxen, die sich den vorhandenen vertikalen Platz zu je 50% teilen. Die Höhe der Boxen passt sich entsprechend an deren nhalt an. 

<div class="subcolumns">
 <div class="c50l">
   <div class="subcl">
    <!-- Inhalt linke Box -->
   </div>
 </div>
 <div class="c50r">
   <div class="subcr">
     <!-- Inhalt rechte Box -->
   </div>
 </div>
</div>

Anstatt 50/50-Teilung sind auch folgende andere Teilverhältnisse möglich: 20/80, 33/66, 25/75, 33/33/33, 38/62 (und jeweils umgekehrt). Dazu wird in "c50l" und "c50r" eweils die zweistellige Zahl entsprechend angepasst. Die Boxen lassen sich untereinander beliebig kombinieren und verschachteln. Für eine vollständige Beschreibung der Möglichkeiten und der Verwendung der Subtemplates siehe: offizielle Dokumentation von YAML.

Achtung: Subtemplates erfüllen in den Design-Vorlagen vorerst nur die Funktion der Einteilung von Inhalten in nebeneinanderliegenden Block-Elementen. Vorlagen für die optische Gestaltung der Elemente sind derzeit noch nicht vorhanden.

Beispiel

Linke Box (50% Breite)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Rechte Box (50% Breite)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Verwendung einer Subtemplate-Sidebar in zweispaltigen Designs

Die "Zusatzinformationen"-Sidebar der dreispaltigen Designs lässt sich in zweispaltigen Design-Versionen relativ einfach mit Subtemplates ersetzen. So lässt sich eine Spalte rechts des Content-Bereichs mit 20% Breite erzeugen. Diese passt sich außerdem zusammen mit dem Content-Bereich dynamisch an die Seitengröße an und lässt sich individuell gestalten. Die Möglichkeiten zur Verwendung von Subtemplates sind sehr vielseitig und lassen viel Spielraum für eigene Ideen.