Die Haupt-CSS-Datei

In YAML-Versionen vor 3.1 (Januar 2009) waren hier noch ids eingesetzt. Dann folgt der header-Bereich mit der oberen Navigation, die im Beispiellayout Links auf Login, Contact und Imprint beinhaltet.

Es folgt der Hauptnavigationsbereich:

und schließlich der Hauptbereich mit den drei Spalten:

Wenn Sie das Beispiellayout im Browser ansehen, werden Sie feststellen, dass die Reihenfolge nicht mit der Reihenfolge im Quellcode übereinstimmt. In der Browseranzeige ist #col1 links, dann folgt #col3 in der Mitte und rechts steht #col2. Das liegt daran, dass für die Gestaltung der Layouts die CSS-Eigenschaft float eingesetzt wird. Dazu gleich mehr.Prinzipiell gilt aber - und das ist ein wichtiger Punkt bei YAML -: Es sind alle beliebigen Reihenfolgen der Darstellung der Spalten möglich. Das ist ein recht praktisches Feature. Das heißt, Sie können den Inhalt auf die Spalten verteilen, wie es Ihnen am besten passt, und unabhängig davon die Anordnung der Spalten am Bildschirm festlegen.Innerhalb jeder der drei Spalten steht ein weiterer div-Container, dessen id genauso lautet wie die zugehörige Spalte, aber mit dem Zusatz _content:

Innerhalb von #col1_content steht der eigentliche Inhalt. Per CSS wird die Breite #col1 zugewiesen, der Innenabstand (padding) hingegen an #col1_content. Dass Breite und Innenabstand nicht demselben Element zugewiesen werden, hat zwei Vorteile: Erstens wirkt sich dadurch die andere Interpretation des Boxmodells im Internet Explorer 5 nicht aus; der ebenfalls noch von YAML unterstützte Internet Explorer 5 interpretiert ja width fälschlicherweise als Gesamtbreite, wohingegen sich bei anderen Browsern die Gesamtbreite aus width plus padding und gegebenenfalls borderwidth berechnet.Zweitens ist es so möglich, mit gemischten Einheiten zu arbeiten. Beispielsweise kann man für die Breitenangabe Prozent verwenden, das padding hingegen in Pixeln angeben. Schließlich folgt noch ein div-Container für die Fußzeile:

Am Schluss wird eine JavaScript-Datei eingebunden, die ein Problem mit den Skiplinks in Webkit-basierten Browsern wie folgt behebt:

Die Haupt-CSS-Datei

Als wichtigste CSS-Datei wird im HTML- Code die Datei css/my_layout.css eingebunden. my_layout.css bindet die von YAML benötigten CSS-Dateien über @import-Befehle ein. Sehen wir uns das wieder beim Simple Project an: Zunächst wird base.css eingebunden, das Herzstück von YAML, das Sie immer benötigen:

Es folgt die CSS-Datei für die Navigation:

Das Simple Project setzt die Shinybuttons- Navigation ein, daneben gibt es noch nav_slidingdoor.css oder nav_vlist.css. Wenn Sie eine der anderen Navigationen einsetzen möchten, so können Sie das hier angeben.Zwei Dateien sind für Ihre individuellen Anpassungen bei einem Projekt notwendig: Während basemod.css die allgemeinen Layoutanpassungen enthält ...

ist content.css für die Formatierung der Inhalte zuständig, also für das konkrete Aussehen beispielsweise von Überschriften oder Absätzen

Nun wird ein Print-Stylesheet eingebunden:

Es stehen insgesamt acht verschiedene Print-Layouts zur Verfügung. Sie unterscheiden sich darin, welche Spalte beim Ausdruck ausgeblendet wird, was durch den Dateinamen gekennzeichnet ist: Bei print_003_draft.css wird nur die Spalte 3 ausgedruckt, Spalte 1 und 2 hingegen nicht. Hingegen würde bei print_103_draft.css die 1. und die 3. Spalte ausgedruckt.Diese Print-Stylesheets sorgen nicht nur dafür, dass manche Spalten ausgeblendet werden, sondern enthalten auch weitere sinnvolle Angaben für den Ausdruck: etwa Punkt als Einheit für die Schrift, das Aufheben der Floats und auch die Auflösung von Abkürzungen oder die Ergänzung der URLs hinter Links. Die beiden letzten Punkte sind allerdings standardmäßig nicht aktiviert und Sie müssen die Kommentare entfernen, damit sie wirksam werden.

YAML-Dateien und eigene Dateien

Ein wichtiges Grundprinzip von YAML ist die Unterscheidung zwischen den eigentlichen YAML-Dateien und den bei einem Layout modifizierten Dateien. Die YAML-Dateien sorgen für die Grundfunktionalität, die man möglichst nicht verändert. Im Beispiel sind dies die Basisdatei yaml/core/base.css, die Navigationsdatei yaml/navigation/ nav_shinybuttons.css sowie yaml/print/print_003_draft.css.

Die individuellen Anpassungen für ein konkretes Projekt sollen hingegen in den eigenen Dateien stehen. Im Beispiel sind dies my_layout.css für die Einbindung der benötigten Dateien, screen/basemod.css für Anpassungen an der Spaltenanordnung und screen/content.css für die Formatierung der Inhalte. Wenn man sich an diese Trennung hält, ist ein Update auf eine neue YAML-Version leicht möglich.Tipp: Sie können sich gut mithilfe des YAML-Debug- Tools veranschaulichen, für welche Formatierungen die einzelnen Dateien zuständig sind. Das YAML-Debug-Tool ist ein Bookmarklet, das Sie installieren, indem Sie es in Ihre Lesezeichenleiste ziehen. Wenn Sie es aufrufen, erhalten Sie allgemeine Informationen zu Ihrem Dokument.Beim Tab Stylesheets sehen Sie die im aktuellen Dokument eingebundenen Stylesheets. Durch einen Klick lässt sich ein Stylesheet deaktivieren, die Auswirkungen werden dann sofort sichtbar. Außerdem lassen sich die Stylesheets hierüber direkt anzeigen oder validieren.

Flicken für den Internet Explorer

Einer der großen Vorteile von YAML ist, dass die meisten CSS-Bugs des Internet Explorer bereits behoben sind. Dafür ist die Datei patch_my_layout.css zuständig, die in der HTML-Grunddatei innerhalb von konditionalen Kommentaren eingebunden wird.