Flexibilität mit YAML

Bei der Erstellung eines CSS-Layouts gibt es viel zu berücksichtigen: von der prinzipiellen Aufteilung der Seitenelemente über eine suchmaschinenoptimierte Anordnung der Inhalte im Quelltext, die passende Navigation und grundsätzliche Anforderungen der Barrierefreiheit bis hin zum Print-Layout.Und dann machen noch die schlechte CSS Unterstützung im Internet Explorer und die vielen Bugs dem Webprogrammierer das Leben schwer. Aber warum das Rad neu erfinden? Die meisten Layouts lassen sich auf ein Mehrspalten- oder Gridlayout zurückführen und sich damit über das CSS-Framework YAML von Dirk Jesse erstellen.

Eine flexible Basis

Ein über YAML erstelltes Basislayout besteht aus Kopf- und Fußzeile, einer Haupt und einer sekundären Navigation und drei Spalten. Es passt sich der Breite des Bildschirms an, begrenzt durch eine Minimalund Maximalbreite, für die es im Internet Explorer vor Version 7 einen Workaround gibt.Dieses Grundlayout lässt sich aber fast beliebig variieren und selbstverständlich kann man feste Einheiten verwenden, einzelne Bereiche wie Kopf- oder Fußzeile weglassen, das Ganze zu einem Zweispaltenlayout umfunktionieren, die Spaltenreihenfolge beliebig ändern oder auch ganz auf Spalten verzichten und ein sogenanntes Gridlayout erstellen.YAML ist äußerst flexibel und zudem hat man die Sicherheit, dass viele Bugs gar nicht erst auftreten oder man zumindest genaue Anweisungen bekommt, um sie zu beheben. Berücksichtigt wird dabei sogar noch der Internet Explorer 5.YAML hat sich bereits auf ganz unterschiedlichen Seiten bewährt - von der Webseite einfach-fuer-alle.de , die noch einen Sticky Footer ergänzt hat, über das Stadtportal von Wien und viele mehr. Häufig sind es Seiten, die bei der Barrierefreiheit punkten. Von Haus aus gibt es bei YAML Skiplinks, über die Tastaturnutzer direkt zum Hauptbereich oder zur Navigation springen können.Die einzelnen Bereiche sind mit WAI-ARIA-Rollen versehen, die die Navigation für Nutzer von Screenreadern erleichtern. YAML beinhaltet darüber hinaus auch Vorlagen für Printstylesheets, unterschiedliche Navigationsmuster, einen Formularbaukasten etc. Auch für Content-Management- Systeme oder gängige Shopsysteme gibt es YAML-Templates, unter anderem auch für Typo3, Joomla, Wordpress, xt:Commerce oder Drupal.YAML dürfen Sie sowohl auf privaten wie kommerziellen Sites verwenden, müssen allerdings einen Backlink auf die YAML-Website in der Fußzeile oder im Impressum einfügen (Creative Commons Lizenz CC-A 2.0). Alternativ kann man auch eine Lizenz erwerben. Eine einfache Lizenz für ein Projekt kostet 59,50 Euro, eine generelle Lizenz das Doppelte.

Der richtige Einstieg

Die Flexibilität von YAML und sein Reichtum an Komponenten bringt es natürlich mit sich, dass Sie eine gewisse Einarbeitungszeit einplanen sollten, die Ihnen jedoch gleichzeitig tiefere Einblicke in CSS beschert, da YAML in vielen Punkten Best-Practice- Lösungen beinhaltet.Um ein eigenes Layout zu erstellen, muss man erst einmal die empfohlene Projektstruktur erstellen, die benötigten Dateien kopieren und in die korrekten Ordner verschieben und die Pfade anpassen. Es stehen mehrere Vorlagendateien zur Verfügung, die durch draft gekennzeichnet sind, wie etwa markup_draft.html für die grundlegende HTML-Datei. Einfacher gelingt der Einstieg mit der Projektvorlage Simple Project, wie Sie nun sehen werden.

Die HTML-Datei

Die mit YAML erstellten Layouts basieren auf einer HTML-Grundstruktur. Beim Simple Project ist das die Datei my_layout.html. Wenn Sie nicht mit dem Simple Project arbeiten, finden Sie diese Datei in Ihrem yaml-Ordner mit dem Namen markup_draft.html.Sehen wir uns an, wie sie aufgebaut ist: Die HTML-Datei benötigt am Anfang eine gültige Dokumenttypangabe, die dafür sorgt, dass Browser in den Standardmodus schalten. Beim Simple Project wird hier die in HTML5 vorgesehene vereinfachte Dokumenttypangabe benutzt:

In der Entwurfsvariante steht hingegen der klassische XHTML 1.0 Transitional Doctype:

Welchen Sie verwenden, ist nicht relevant. Dann erfolgt die Einbindung der zwei Haupt-CSS-Dateien: my_layout.css gilt für alle Browser. patch_my_layout.css beinhaltet die für den Internet Explorer notwendigen Bugfixes und wird über konditionale Kommentare eingebunden. Diese sorgen dafür, dass die Datei nur vom Internet Explorer kleiner oder gleich Version 7 (lte IE 7) geladen wird.

Innerhalb des body-Elements stehen zuallererst die Skiplinks:

Skiplinks helfen Tastaturnutzern, die darüber direkt zur Navigation oder zum Inhalt gelangen können. Die Skiplinks sind standardmäßig über CSS versteckt und damit nicht sichtbar. Sie werden erst aktiviert, wenn ein Besucher mittels Tabulatortaste von Link zu Link springt.Dann beginnt der eigentliche Inhalt. Umschlossen wird nun das gesamte Layout von zwei mit Klassen versehenen div-Containern: