Teil 4: CSS-Frameworks für flexible Layouts

HTML-Grundgerüst

Am besten rufen Sie my_layout.html im Browser auf, um sich einen ersten Überblick über die Grundstruktur zu verschaffen. Ein genauerer Einblick in die einzelnen Elemente und ihre Benennung gelingt dann über die Firefox-Erweiterung Firebug.

Am Anfang von my_layout.html werden zwei CSS-Dateien eingebunden - my_layout.css beinhaltet Styleangaben für alle Browser, die Datei patch_my_layout.css ist hingegen nur für den Internet Explorer und steht innerhalb von konditionalen Kommentaren.

Im Body von my_layout.html befinden sich mehrere verschachtelte div-Container mit vorgegeben IDs.

• #page_margins und #page umfassen den ganzen Bereich. • #header ist für den Kopfbereich gedacht. Darin befindet sich eine Zweitnavigation mit der ID #topnav. • In #nav wird die Hauptnavigation untergebracht. • #main beinhaltet die drei Spalten #col1, #col2 und #col3. • Zum Schluss folgt die Fußzeile #footer.

Weitere divs sind in den anderen verschachtelt und haben eine ID mit dem Zusatz _content, beispielsweise enthält #col1 noch #col1_content et cetera. Diese nehmen jeweils die eigentlichen Inhalte auf.

CSS-Dateien einbinden

In my_layout.html wird die Datei css/my_layout.css eingebunden. Diese wiederum lädt die anderen benötigten CSS-Dateien über @import-Anweisungen.

Soll statt der standardmäßig eingebundenen Navigationsvorlage Shiny Buttons die andere mitgelieferte - Sliding Doors - eingebunden werden, müssen Sie das hier angeben. Außerdem können Sie definieren, welches Print-Stylesheet verwendet wird.

Anpassungen am Layout

yaml/core/base.css legt die grundlegenden Formatierungen fest, Ihre Anpassungen am Layout nehmen Sie hingegen in css/screen/basemod.css vor. Sehen wir uns an, wie sich die Gesamtbreite des Layouts und die Breiten der Spalten ändern lassen. Die folgende Anweisung legt die Gesamtbreite fest:

Da keine Angabe bei width einer Gesamtbreite von 100% entspricht, erstreckt sich das Layout des Simple Project über das gesamte Browserfenster. Es wird aber über eine Mindest- und eine Maximalbreite beschränkt. Das können Sie hier beliebig ändern.

Weiter unten finden Sie die Definition der Spalten. Hierzu muss man wissen, dass in yaml/core/base.css bereits festgelegt wird, dass #col1 links und #col2 rechts gefloatet werden:

Prinzipiell werden bei YAML die Breitenangaben für #col1, #col2 und #col3 angegeben, die Innenabstände (padding) hingegen bei #col1_content, #col2_content et cetera. Diese Herangehensweise hat den Vorteil, dass die falsche Interpretation des Boxmodells des Internet Explorers 5.x keine Auswirkung hat.

Im Simple Project nehmen sowohl linke Spalte (#col1) als auch rechte Spalte (#col2) jeweils 25 Prozent des verfügbaren Platzes ein. Die mittlere Spalte (#col3) erhält den restlichen Platz. Dies geschieht dadurch, dass #col3 Außenränder (margin) in der Breite von #col1 und #col2 erhält.

Diese Breiten lassen sich jetzt uneingeschränkt ändern, möglich sind alle Einheiten: em, Prozent oder px. Eine linke Spalte von 200px Breite und eine rechte von 300px realisieren Sie über:

Patches für den Internet Explorer

In css/patches/patch_my_layout.css wird zuerst eine CSS-Datei mit den layoutunabhängigen Korrekturen für den Internet Explorer eingebunden. Dann folgen die für das jeweilige Layout benötigten individuellen Anpassungen. Beim Simple Project finden Sie hier Korrekturen des 3Pixel-Bugs im Internet Explorer 6 und kleiner.

Wenn Sie die Breite der Spalten geändert haben, so müssen Sie hier auch Änderungen beim margin von #col3 vornehmen, das heißt, für den rechten und linken margin vom gewünschten Wert drei Pixel abziehen - bei der Arbeit mit Prozentwerten sind natürlich wie hier nur Näherungswerte möglich.

In den Codezeilen darunter sehen Sie einen Workaround für die Mindest- und die Maximalbreite für den Internet Explorer in den Versionen kleiner als 7, den Sie natürlich nur brauchen, wenn Sie Mindest- und Maximalbreite einsetzen.

YAML Builder

Ein attraktives Feature von YAML ist, dass Sie die Anordnung der Spalten am Bildschirm frei bestimmen können, also beispielsweise die dritte Spalte (#col3) ganz links platzieren.

Dafür sind weitere Modifikationen notwendig, die Sie am besten den YAML Builder durchführen lassen. Bei diesem nützlichen Online-Tool bestimmen Sie, wie viele Spalten und in welcher Reihenfolge Sie diese haben möchten. Außerdem können Sie auch definieren, dass Spaltenhintergründe oder Spaltenbegrenzer eingesetzt werden sollen.

Im Bereich extended lassen sich auch eventuell nicht benötigte Bereiche wie die Topnavigation entfernen und feinere Aufteilungen der Spalten vornehmen.

Wenn Sie auf Get Code klicken, erhalten Sie den Code angezeigt. Der Builder generiert Ihnen die vier auch hier vorgestellten Dateien: my_layout.html, my_layout.css, basemod.css und patch_my_layout.css. Diese Dateien kopieren Sie dann an die richtige Stelle, das heißt, Sie ersetzen die gleichnamigen Dateien im Simple Project - und schon haben Sie eine solide Basis für Ihr Webprojekt.

Um die weiteren Features von YAML, wie die feinere Aufteilung der Spalten über Subtemplates oder die CSS-Dateien für den Ausdruck, nutzen zu können, sollten Sie sich die ausführliche deutschsprachige Dokumentation etwas genauer ansehen.

Unterschiedliche Ansätze

Die vorgestellten Frameworks sind recht unterschiedlich. Wenn Sie bei YAML etwas an einem bestehenden Layout ändern wollen, müssen Sie die CSS-Datei editieren. Anders ist das bei YUI Grids oder Blueprint CSS: Dort editieren Sie die HTML-Datei und passen die Klassennamen an, ändern class="yui-gb" in class="yui-gc" oder Ähnliches.

Da Sie bei YAML den CSS-Code selbst anpassen, benötigen Sie dafür auf jeden Fall solide CSS-Kenntnisse - bei YUI Grids und Blueprint CSS hingegen lässt sich relativ viel ohne tiefer gehende CSS-Kenntnisse zaubern.

Dafür bietet YAML mehr Flexibilität: So können Sie beispielsweise für Breitenangaben zwischen em, % oder Pixeln wählen. Blueprint CSS hingegen setzt durchgehend auf Pixel und YUI verwendet em oder Prozent. Seine Stärken zeigt YAML aber sicher gerade bei flexiblen Layouts in Prozent.

Durch Angabe von Mindest- und Maximalbreite werden typische Nachteile von flexiblen Layouts überwunden, mit integriertem Workaround für den IE. Eine zusätzliche Angabe einer Maximalbreite wäre auch bei den YUI-Layouts eine sinnvolle Ergänzung, damit ließen sich bei vergrößerter Schrift Scrollbalken vermeiden.

Die Unabhängigkeit von der Reihenfolge im Quellcode und bei der Ausgabe ist für die Suchmaschinenoptimierung ein wichtiger Punkt - das bietet YUI bis zu einem Grad und auch YAML, nicht hingegen Blueprint CSS.

Blueprint CSS wiederum spielt seine Stärken bei der Erstellung von Rasterlayouts aus. Und YUI liefert viele häufig benutzte mögliche Standardaufteilungen, die rasch und auch ohne tiefere CSS-Kenntnisse zu überzeugenden Resultaten führen. Bei Problemen oder weitergehenden Modifizierungen kommt man allerdings auch bei YUI und Blueprint CSS nicht ohne CSS-Kenntnisse aus.

Framework - ja, oder nein?

Der Hauptvorteil von Frameworks ist zweifellos, dass sich ein grundlegendes, browserübergreifend funktionierendes Layout rascher erstellen lässt, auch wenn Sie erst einmal in Einarbeitungszeit investieren müssen. Deswegen werden Sie besonders von der Zeiteinsparung profitieren, wenn Sie ein Framework mehrfach einsetzen. Hilfreich sind Frameworks auch und gerade bei der Arbeit im Team, weil dadurch alle dieselbe Basis verwenden.

Frameworks bringen als Preis für die relativ große Flexibilität immer einen gewissen Overhead mit sich. Das heißt, dass mehr CSS-/HTML-Code benutzt wird, als man bei der Programmierung eines einzelnen konkreten Projekts bräuchte.

Um dem etwas entgegenzuwirken, sollten Sie für den produktiven Einsatz immer eine komprimierte Version der Dateien nehmen, bei der die Kommentare entfernt sind und im Optimalfall auch mehrere Dateien zusammengefasst sind. YAML bietet im Core-Ordner die für den produktiven Einsatz geeigneten Dateien mit dem Zusatz slim, außerdem können Sie nicht benötigte div-Container in der HTML-Datei löschen.

Bei Yahoo UI gibt es die komprimierte Variante, die die drei Einzeldateien zusammenfasst, und bei Blueprint CSS steht zusätzlich auch ein Ruby-Skript für die Komprimierung bereit.

Noch eine Anmerkung zu Blueprint CSS: Gerade bei diesem Framework wird häufig kritisiert, dass es sich nicht an die vorgesehene Arbeitsteilung von HTML und CSS hält: Bei einem Redesign muss bei solchen Seiten nicht der CSS-Code, der ja eigentlich für die Präsentation zuständig ist, sondern der HTML-Code modifiziert werden.

Für diejenigen, für die die strenge Lehre der Trennung von Inhalt/Struktur (HTML) und Präsentation (CSS) im Vordergrund steht, sind Blueprint CSS - und in gewissem Maße auch YUI CSS - sicherlich nicht die erste Wahl.

Diese sind eher anwenderorientiert und versprechen möglichst schnelle Erfolge. Selbstverständlich gibt es auch Webseiten, die einem ganz anderen Aufbau folgen und bei denen der Einsatz von Frameworks nichts bringt.

Aber auch in diesem Fall kann der Einsatz einzelner CSS-Dateien der CSS-Frameworks hilfreich sein: Universal einsetzbar und häufig empfehlenswert sind wohl besonders die Reset-Dateien - aber einen Blick wert ist beispielsweise auch forms.css aus Blueprint CSS, das Standardformatierungen für Formulare vornimmt, und typography.css, das für eine Ausrichtung der Schrift an einer Grundlinie sorgt.

CSS-Frameworks sind auf jeden Fall ein wichtiges Tool im Werkzeugkasten des Webdesigners, das man kennen sollte, weil es einem möglicherweise eine Menge nervige Detailarbeit abnimmt.