CSS-Spaltentechnik mit YAML

Geübte Webdesigner schütteln ein-, zwei- oder gar dreispaltige CSS-Layouts oft noch aus dem Ärmel. Einfache „Fixed Width“-Layouts, also Layouts mit fester Breite, lassen sich für alle gängigen Browser relativ einfach umsetzen, wenn man die Tücken um die Browserbugs und typische Problemstellungen kennt. Der bekannte Box-Modell-Fehler des Internet Explorer gilt hier als Paradebeispiel.

YAML als CSS-Framework für Spaltentechnik

Sollen Webseiten-Layouts vielspaltig werden und möglichst mit der Fenstergröße skalierbar sein, wird es schon komplizierter. Bei großen Webprojekten kommt man hier als „Professional“ meist wohl nicht um eine Individualentwicklung des Seitenrasters herum.
Aber gerade die Umsetzung kleinerer Projekte müssten sich doch mit fertigen Bausteinen oder gar Frameworks beschleunigen lassen. Und in der Tat gibt es ein ausgereiftes und praxiserprobtes CSS-Framework, das hierbei helfen soll. Viele werden YAML („Yet Another Multicolumn Layout“) zumindest vom Namen kennen. Es stammt von dem mittlerweile recht bekannten Webworker und Hobby-Fotograf namens Dirk Jesse, der eigentlich wissenschaftlicher Mitarbeiter der Universität Dresden im Bereich Maschinenbau ist. Diesen kennt man neben YAML von seinem Webdesign-Blog „High Resolution“ oder seinem Fotoweblog „Staring at the Sun„. Beides für den eigenen Feedreader rechts empfehlenswert.

Da YAML eine liebevolle deutsche Produktion ist, findet sich auf der zugehörigen Website eine umfangreiche und gut bebilderte Dokumentation zur Verwendung des CSS-Frameworks. YAML gilt dabei wirklich als Framework, nicht als fertiges Template. Der Benutzer ist selbst angehalten mittels der CSS-Bibliothek ein eigenes Layout aufzubauen. Völlige CSS-Laien lassen besser die Finger davon und beschäftigen sich besser zunächst mit CSS selbst. Dirk Jesse selbst hat auch ein Buch über CSS-Layouts mit YAML herausgebracht, das im Galileo Press Verlag erschienen ist. Sicherlich nicht unnötig, wenn man sich intensiver mit dem Framework beschäftigen will.

Nachteile von YAML

Mich selbst hat die Verwendung dieses CSS-Frameworks immer abgeschreckt, da ich keine Lust und Zeit hatte mich in ein Framework einzuarbeiten, nur um das Grundraster meines Weblayouts zu realisieren. Ich war der Meinung, in weit weniger Zeit das Layout bereits händisch umgesetzt zu haben. Zudem wollte ich mich nicht mit undurchsichtigen Fehlern eines Drittframeworks herumschlagen, wenn ich oft schon an den Fehlern von CSS und den Browserbugs verzweifle.
Jedoch sehe ich dies mittlerweile etwas relativiert, da bei großen Projekten eine Einarbeitung gegenüber einem sauberen und funktionalen Layout gerechtfertigt ist, und bei kleinen und damit meist einfachen Layouts die Fehlerwahrscheinlichkeit unter Verwendung eines Frameworks gering ist.

YAML per WYSIWYG

Noch besser ist allerdings ein kleiner Online-Baukasten, der mir eine ausgiebige Einarbeitung in YAML zu ersparen scheint. YAML Builder ist ein WYSIWYG-Editor zum Bauen von YAML-Layouts. Das nötige Markup und CSS wird automatisch generiert und sieht nach einer ersten Sichtkontrolle auch sehr sauber aus. Der Builder bietet alle notwendigen Angaben, wie Anzahl an Spalten, Flusskontrolle, Breite, Min- und Max-Größen, Trennbereiche und -Linien, sowie einen vollständigen DOM-Inspektor zum Inspizieren des erzeugten Layouts. Direkt und ohne Anmeldung oder Installation nutzbar. Beim nächsten Webprojekt mit ausreichend Zeit wird es ausprobiert.

YAML ist unter der Creative Common License veröffentlicht und darf für private und kommerzielle Websites genutzt werden, solange im Footer oder im Impressum auf YAML verwiesen wird.