Steffen Voß - Technologie & Gesellschaft

CSS Layouts mit YUI Library CSS Tools

Steffen Voß

Es ist kaum 1½ Jahre ist es her, da galten mehrspaltige CSS Designs noch als Heiliger Gral des Webdesign. Inzwischen hat sich in diesem Gebiet einiges getan und niemand muss mehr selbst mit umherspringenden DIVs kämpfen. Eine sehr schöne, modulare Lösung bietet die Yahoo User Interface Bibliothek.Es steckt eine Menge Erfahrung und noch mehr Arbeit in den StyleSheets, die Yahoo zum Erstellen verschiedener Layoutgerüste anbietet.

Reset
Als erstes stellt reset.css alle browsereigenen Einstellungen zurück – Kein HTML Element hat mehr Margins, Paddings und egal ob h1 oder p – alle Schriften sind gleich groß.

Fonts
Dann stellt font.css alle Fonts auf Standard Werte. Alle Ausgaben werden auf Arial gestellt und bekommen die gleichen Zeilenabstände.

Base
Die base.css stellt dann wieder einige Formatierungen her: Überschriften bekommen wieder verschiedene Größen usw. Dadurch aber werden alle Elemente auf konsistente Werte gesetzt, die überall dann gleich aussehen.

Grid
Der Clou des CSS-Paketes aber ist die grid.css – hiermit läßt sich das Layout beliebig in Spalten und Zeilen aufteilen. Man kann damit fast beliebig geschachtelte Layouts erstellen, die mit einem minimalen Aufwand an HTML-Tags auskommen. Die YUI ist somit frei von „Divitis„.

Mit einem einfachen Editor lassen sich Grids zusammenklicken, die schon automatisch verschiedenen Ansprüchen genügen: Am wichtigsten ist wohl, dass sie in allen gängigen Browsern funktionieren. Daneben entsprechen die Layouts in der Breite entweder der 800er oder der 1024er Auflösung – es lassen sich aber auch 100% Grids erstellen. Bei den festen Breiten entsprechen dann die Spalten gleich den gängigen Werbeformaten: Banner, Halfbanner, Skyscraper usw.

So kann man sich in kürzester Zeit die Basis für ein neues Layout erstellen. Die Grids sind recht robust und lassen alle möglichen Veränderungen zu – nur mit den Breiten sollte man sich abfinden. Sonst hat man das Problem mit den springenden DIVs schnell wieder an den Hacken.

Um die weiteren Anpassungen zu vereinfachen, sollte man den verschiedenen Spalten IDs zuweisen und sie darüber ansprechen.

Vorteile
Das schöne an der Yahoo User Interface Bibliothek ist die Modularität. Wer nur die reset.css benutzen will, kann das machen und er muss das restliche CSS nicht mitladen. Genauso funktionieren die JavaScript-Bibliotheken: Wer nur Menüs mit dem YUI erstellen will, braucht nur das nötige JavaScript laden. Im Gegensatz zu Bibliotheken wie Prototype und jQuery, bei denen man immer gleich alles nehmen muss.

Warum macht Yahoo das?
Wie jedes andere Open Source Projekt erscheint die Yahoo User Interface Bibliothek (YUI) unter einer offenen Lizenz (BSD Lizenz) und sie wir bei SourgeForge gehostet. Dort gibt es einen Bugtracker, in den jeder Benutzer Fehler eintragen kann. Die Fehler werden dann in den internen Yahoo Bugtracker übernommen und von Yahoo Mitarbeitern gelöst.

Für Yahoo ist die Pflege der Bibliothek ein Nebenprodukt. Es müssen sich ohnehin Mitarbeiter darum kümmern, dass alle Yahoo-Dienste funktionieren. Der Vorteil für Yahoo, die YUI friezugeben ist, dass es inzwischen eine richtige Community gibt, die zusätzliche Tools entwickelt, die Probleme meldet und Ideen einbringt. So profitieren am Ende beide Seite von der Bibliothek.

Alternativen
Schon länger arbeitet Dirk Jesse an seinem YAML, für das es jetzt auch einen Builder gibt. Postnuke war das erste CMS, das YAML in ein Theme umgewandelt hat. Damals aber gab es dadurch eine Menge Probleme – ich kann mir aber nicht vorstellen, dass es die in YAML 3 immer noch gibt.

Mit BluePrintCSS habe ich persönlich noch nicht gearbeitet – der Vollständigkeit halber wollte ich es aber erwähnen.

Links:
YUI Homepage
Grids Editor
Video Einführung

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Möchtest Du per E-Mail benachrichtigt werden, wenn Dir hier jemand antwortet?