CSS-Frameworks für flexible Layouts

Die drei vorgestellten Frameworks, YUI Grids, Blueprint CSS und YAML, haben einige Gemeinsamkeiten. So sollten Sie bei allen standardkonformes HTML beziehungsweise XHTML verwenden und auch die korrekte Dokumenttypangabe am Anfang des Dokuments angeben.

Was alle Frameworks ebenfalls gemeinsam haben ist, dass die CSS-Angaben auf mehrere Dateien aufgeteilt werden. Durch den modularen Aufbau können je nach Bedarf nur die benötigten Dateien eingebunden werden.

Layout mit YUI

Die Yahoo User Interface (YUI) Library ist eine große Javascript-Bibliothek, die nützliche Funktionen für Rich Internet Application inklusive AJAX enthält - und zudem vier CSS-Dateien zur einfachen Erstellung von 1.000 verschiedenen Layouttypen.

Dieses CSS-Framework wird auch bei Yahoo-Seiten selbst eingesetzt. Wenn Sie YUI herunterladen, finden Sie die CSS-Dateien in gleichnamigen Unterordnern des Ordners build.

Insgesamt gibt es vier CSS-Dateien: reset.css annulliert alle Browserstandardformatierungen und base.css vergibt dann auf dieser Basis sinnvolle Formatierungen. fonts.css setzt die Basisschrift auf Arial in der Größe von 13px. Schließlich dient grids.css zur Erstellung von CSS-Layouts - und das soll hier näher vorgestellt werden.

Zur Nutzung der Layoutkomponente, also YUI Grids, müssen Sie zuerst die benötigten CSS-Dateien in Ihr HTML-Dokument einbinden.

Da YUI Grids teilweise auf den anderen CSS-Dateien aufsetzt, binden Sie am besten die Datei reset-fonts-grids.css ein, eine komprimierte Version der drei genannten Dateien.

Dann fügen Sie in Ihre HTML-Datei div-Container mit vorgegebenen IDs ein. Damit haben Sie schon einmal ein zentriertes Layout von 950px Breite mit Kopfbereich und Fußzeile.

Üblicherweise soll der Hauptbereich weiter unterteilt werden. Hierfür legen Sie zuerst die Art der Aufteilung fest. Wenn Sie links eine Spalte von 180px Breite haben möchten, ergänzen Sie im umfassenden Container die Klasse yui-t2.

Zur Aufteilung des Hauptbereichs selbst brauchen Sie zwei weitere div-Elemente mit der Klasse yui-b. Außerdem sollte der Hauptbereich - üblicherweise der Bereich mit dem Inhalt - in einen weiteren div-Container mit der id="yui-main" eingebettet werden. Damit sieht die Grundstruktur für einen Zweispalter folgendermaßen aus:

Die Navigation ist bei unserem Beispiel in einem 180px breiten Bereich links angeordnet. Es sind auch andere Anordnungen und Aufteilungen möglich: Eine 180px breite rechte Spalte erreichen Sie zum Beispiel durch yui-t4 im umfassenden Element.

Ohne dass Sie im Quellcode die div-Container verschieben, bewirkt also eine Änderung der Klassen, dass der schmale Bereich links oder rechts angeordnet wird.

Diese Unabhängigkeit der Anordnung im Quellcode von der Anzeige am Bildschirm ist eine große Stärke des YUI-Frameworks: Denn für die Suchmaschinenoptimierung ist häufig erwünscht, dass der Inhaltsbereich vor der Navigation kommt - was sich mit YUI Grids leicht realisieren lässt.

Für einen Dreispalter sind weitere div-Container mit vordefinierten Klassen notwendig. Die Änderungen betreffen den Bereich mit yui-main, in den ein weiteres div-Element mit der Klasse yui-g eingefügt wird.

Die darin enthaltenen beiden div-Container bekommen die Klasse yui-u. Der erste wird zusätzlich noch mit der Klasse first versehen, erhält also class="yui-u first".

Mit yui-g wird der Bereich in zwei gleich große Spalten aufgeteilt, andere Aufteilungen - beispielsweise 2/3 zu 1/3 - sind durch weitere Klassen möglich.

Individuelle Breite

In den beiden Beispielen wurde immer ein 950px breites Layout erstellt; auch das lässt sich variieren. Durch id="doc3" im umfassenden Container erreichen Sie ein 100% breites Layout.

Ebenfalls möglich ist id="doc" für eine Breite von 750px oder id="doc4" für eine Breite von 974px. Sie können aber auch selbst eine Breite definieren. Dafür geben Sie zuerst dem umfassenden Element eine eigene ID:

Die Breite definieren Sie dann in einem eigenen Stylesheet in der Einheit em. Denn auch wenn bisher - ebenso wie in der Dokumentation von YUI Grids - immer von Pixeln die Rede ist: Intern verwendet YUI Grids die Einheit em für die Layoutbreite.

Das bedeutet, dass die Layouts bei größerer Schrift ebenfalls mitwachsen und breiter werden. Deswegen müssen Sie die gewünschte Pixelanzahl in em umrechnen. Dafür teilen Sie den Wert durch 13.