Teil 3: CSS-Frameworks für flexible Layouts

Im Beispiel sehen Sie, dass das umfassende Element neben der Klasse container noch showgrid enthält. Dadurch wird ein Raster als Hintergrundbild eingeblendet, was beim Entwurf eine nützliche Hilfestellung ist. Kopf- und Fußbereich erstrecken sich im Beispiel über die gesamte Breite von 24 Spalten (span-24).

Der dazwischen liegende Bereich wird in drei Bereiche unterteilt mit span-4, span-16 und span-4, deren Summe sich wieder auf 24 aufaddiert. Wichtig ist außerdem, dass bei einer solchen Unterteilung die letzte Spalte zusätzlich die Klasse last erhält.

Damit haben Sie rasch eine Basisstruktur geschaffen. Verfeinern lässt sich diese zum einen, indem Sie Container weiter aufteilen. Zum anderen gibt es viele weitere vordefinierte Klassen, über die sich Elemente im Raster verschieben lassen: Über append-X können Sie X leere Spalten rechts von einer Spalte einfügen, über prepend-X entsprechend links von einer Spalte, über push-X lässt sich ein Element in die X-te nächste Spalte bewegen, über pull-X um X Spalten vor.

Mit border oder colborder ergänzen Sie Rahmen, mit box können Sie einen Bereich mit padding in einer Spalte platzieren und vieles mehr.

Natürlich sind Sie bei Blueprint nicht auf eine Breite von 950px festgelegt, Sie können schmalere Layouts erstellen, indem Sie mit weniger Spalten arbeiten. Wenn Sie beispielsweise 19 Spalten verwenden, so ist das Layout 750px breit.

Und Ihr ganz individuelles Raster können Sie mithilfe des Online-Builder definieren: Spaltenbreite, Abstand und Gesamtbreite geben Sie nach Belieben vor - die modifizierte CSS-Datei wird Ihnen dann automatisch generiert. Das geht übrigens auch über ein nützliches Ruby-Skript, das im Blueprint-Paket im Unterordner lib zu finden ist.

Dieses erlaubt es zudem, die rein präsentationsbezogenen Klassennamen wie span-4 am Schluss in semantisch sinnvolle umzuwandeln, beispielsweise in navigation oder Ähnliches.

Allgemein lässt sich über Blueprint CSS sagen: Wer beim Entwurf mit einem ähnlichen Raster arbeitet, wird das Framework zu schätzen lernen.

Kurzreferenz: Blueprint CSS

Zur Erstellung von Layouts benötigte Klassen: append-X: Anfügen von X leeren Spalten rechts append-bottom: Abstand nach unten border: Rahmen rechts box: für einen von Zwischenraum umgebenen Bereich clear wendet clear:both auf ein Element an. clearfix: zum Clearen von Floats ohne Markup colborder: Rahmen rechts, benötigt eine Spalte Platz container für das umfassende Element last für die letzte Spalte in einer Reihe von Spalten prepend-top: mehr Abstand nach oben prepend-X: Anfügen von X leeren Spalten links pull-X fügt einen Inhalt in die X-te Spalte links ein. push-X fügt einen Inhalt in die X-te Spalte rechts ein. showgrid blendet Hintergrundgrafik mit Raster ein. span-X: für Bereich, der über X Spalten geht.

Layouts mit YAML

Yet Another Multicolumn Layout - kurz YAML - ist unter der Creative Commons Attribution 2.0 Lizenz publiziert. Das heißt, Sie müssen einen Backlink auf die Website des Projekts einfügen, wenn Sie YAML nutzen wollen. Soll dieser Backlink entfallen, können Sie auch eine kommerzielle Lizenz erwerben.

Yet Another Multicolumn Layout - kurz YAML - ist unter der Creative Commons Attribution 2.0 Lizenz publiziert. Das heißt, Sie müssen einen Backlink auf die Website des Projekts einfügen, wenn Sie YAML nutzen wollen. Soll dieser Backlink entfallen, können Sie auch eine kommerzielle Lizenz erwerben.

Um ein Layout zu erstellen, bestücken Sie die XHTML-Datei mit Ihren Texten und erstellen zusätzliche CSS-Dateien mit Ihren Angaben. Dadurch können Sie das Standardlayout von YAML überschreiben, beispielsweise die Anordnung und Breite der Spalten verändern.

Da YAML eine Projektvorlage ist, besteht es aus mehreren, auf eine bestimmte Art organisierte Dateien. Am einfachsten gelingt der Einstieg in YAML mit dem vorgefertigten Projekt Simple Project, bei dem die notwendigen Schritte zum Einsatz von YAML und zur Anpassung schon beispielhaft durchgeführt sind. Weiter hilft dann das Online-Tool YAML Builder.

Simple Project enthält eine Menge Dateien. Um es an Ihre Bedürfnisse anzupassen, müssen Sie allerdings nur fünf verändern:

• my_layout.html ist das HTML-Gerüst. • css/my_layout.css bindet alle benötigten CSS-Dateien ein. • css/screen/basemod.css ist für die Anpassungen am Layout gedacht. • css/screen/content.css: Hier können Sie die HTML-Elemente, etwa Überschriften,formatieren. • patches/patch_my_layout.css beinhaltet Bugfixes für den Internet Explorer.

Die wichtigsten Dateien, die Sie editieren müssen, sollen nun im Detail betrachtet werden.

Kurzreferenz: YAML

Ordnerstruktur des Simple Project, die wichtigsten Dateien: my_layout.html - HTML-Basis Der Unterordner css beinhaltet Ihre CSS-Dateien mit den gewünschten Anpassungen: css/my_layout.css bindet die benötigten Dateien ein, css/screen/basemod.css ändert das Hauptlayout, css/screen/content.css die allgemeine Formatierung der Elemente. css/patches/patch_my_layout.css bietet für den Internet Explorer korrigierte Angaben. Der Ordner js beinhaltet eine Javascript-Lösung für Mindest- und Maximalbreite im Internet Explorer < 7. Im Unterordner yaml stehen die YAML-Dateien: yaml/core/base.css - das Herzstück des Frameworks mit den grundlegenden Formatierungen. Hier gibt es auch slim-Varianten für den produktiven Einsatz. yaml/debug: Dateien zum Debuggen yaml/navigation: Navigationsvorlagen yaml/print: Print-Stylesheets