kaffeeringe - Internet und Kreativität

Es steckt eine Menge Erfah­rung und noch mehr Arbeit in den Style­S­heets, die Yahoo zum Erstel­len ver­schie­de­ner Lay­out­ge­rüste anbietet.

Reset
Als ers­tes stellt reset.css alle brow­s­er­ei­ge­nen Ein­stel­lun­gen zurück — Kein HTML Ele­ment hat mehr Margins, Pad­dings und egal ob h1 oder p — alle Schrif­ten sind gleich groß.

Fonts
Dann stellt font.css alle Fonts auf Stan­dard Werte. Alle Aus­ga­ben wer­den auf Arial gestellt und bekom­men die glei­chen Zei­len­ab­stände.

Base
Die base.css stellt dann wie­der einige For­ma­tie­run­gen her: Über­schrif­ten bekom­men wie­der ver­schie­dene Grö­ßen usw. Dadurch aber wer­den alle Ele­mente auf kon­sis­tente Werte gesetzt, die über­all dann gleich aus­se­hen.

Grid
Der Clou des CSS–Pake­tes aber ist die grid.css — hier­mit läßt sich das Lay­out belie­big in Spal­ten und Zei­len auf­tei­len. Man kann damit fast belie­big geschach­telte Lay­outs erstel­len, die mit einem mini­ma­len Auf­wand an HTML–Tags aus­kom­men. Die YUI ist somit frei von „Divi­tis“.

Mit einem ein­fa­chen Edi­tor las­sen sich Grids zusam­menkli­cken, die schon auto­ma­tisch ver­schie­de­nen Ansprü­chen genü­gen: Am wich­tigs­ten ist wohl, dass sie in allen gän­gi­gen Brow­sern funk­tio­nie­ren. Dane­ben ent­spre­chen die Lay­outs in der Breite ent­we­der der 800er oder der 1024er Auf­lö­sung — es las­sen sich aber auch 100% Grids erstel­len. Bei den fes­ten Brei­ten ent­spre­chen dann die Spal­ten gleich den gän­gi­gen Wer­be­for­ma­ten: Ban­ner, Half­ban­ner, Sky­scra­per usw.

So kann man sich in kür­zes­ter Zeit die Basis für ein neues Lay­out erstel­len. Die Grids sind recht robust und las­sen alle mög­li­chen Ver­än­de­run­gen zu — nur mit den Brei­ten sollte man sich abfin­den. Sonst hat man das Pro­blem mit den sprin­gen­den DIVs schnell wie­der an den Hacken.

Um die wei­te­ren Anpas­sun­gen zu ver­ein­fa­chen, sollte man den ver­schie­de­nen Spal­ten IDs zuwei­sen und sie dar­über anspre­chen.

Vor­teile
Das schöne an der Yahoo User Inter­face Biblio­thek ist die Modu­la­ri­tät. Wer nur die reset.css benut­zen will, kann das machen und er muss das rest­li­che CSS nicht mit­la­den. Genauso funk­tio­nie­ren die JavaScript-​Bibliotheken: Wer nur Menüs mit dem YUI erstel­len will, braucht nur das nötige Java­Script laden. Im Gegen­satz zu Biblio­the­ken wie Pro­to­type und jQuery, bei denen man immer gleich alles neh­men muss.

Warum macht Yahoo das?
Wie jedes andere Open Source Pro­jekt erscheint die Yahoo User Inter­face Biblio­thek (YUI) unter einer offe­nen Lizenz (BSD Lizenz) und sie wir bei Sour­geForge gehos­tet. Dort gibt es einen Bug­tra­cker, in den jeder Benut­zer Feh­ler ein­tra­gen kann. Die Feh­ler wer­den dann in den inter­nen Yahoo Bug­tra­cker über­nom­men und von Yahoo Mit­ar­bei­tern gelöst.

Für Yahoo ist die Pflege der Biblio­thek ein Neben­pro­dukt. Es müs­sen sich ohne­hin Mit­ar­bei­ter darum küm­mern, dass alle Yahoo-​Dienste funk­tio­nie­ren. Der Vor­teil für Yahoo, die YUI frie­zu­ge­ben ist, dass es inzwi­schen eine rich­tige Com­mu­nity gibt, die zusätz­li­che Tools ent­wi­ckelt, die Pro­bleme mel­det und Ideen ein­bringt. So pro­fi­tie­ren am Ende beide Seite von der Biblio­thek.

Alter­na­ti­ven
Schon län­ger arbei­tet Dirk Jesse an sei­nem YAML, für das es jetzt auch einen Buil­der gibt. Post­nuke war das erste CMS, das YAML in ein Theme umge­wan­delt hat. Damals aber gab es dadurch eine Menge Pro­bleme — ich kann mir aber nicht vor­stel­len, dass es die in YAML 3 immer noch gibt.

Mit Blue­PrintCSS habe ich per­sön­lich noch nicht gear­bei­tet — der Voll­stän­dig­keit hal­ber wollte ich es aber erwäh­nen.

Links:
YUI Home­page
Grids Edi­tor
Video Ein­füh­rung