CSS Layouts mit YUI Library CSS Tools

Es ist kaum 1½ Jah­re ist es her, da gal­ten mehr­spal­ti­ge CSS Designs noch als Hei­li­ger Gral des Web­de­sign. Inzwi­schen hat sich in die­sem Gebiet eini­ges getan und nie­mand muss mehr selbst mit umher­sprin­gen­den DIVs kämp­fen. Eine sehr schö­ne, modu­la­re Lösung bie­tet die Yahoo User Inter­face Biblio­thek.Es steckt eine Men­ge Erfah­rung und noch mehr Arbeit in den Style­Sheets, die Yahoo zum Erstel­len ver­schie­de­ner Lay­out­ge­rüs­te anbietet.

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

Fonts
Dann stellt font.css alle Fonts auf Stan­dard Wer­te. Alle Aus­ga­ben wer­den auf Ari­al gestellt und bekom­men die glei­chen Zeilenabstände.

Base
Die base.css stellt dann wie­der eini­ge For­ma­tie­run­gen her: Über­schrif­ten bekom­men wie­der ver­schie­de­ne Grö­ßen usw. Dadurch aber wer­den alle Ele­men­te auf kon­sis­ten­te Wer­te gesetzt, die über­all dann gleich aussehen.

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­tel­te 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­men­kli­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 Brei­te 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 neu­es 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 soll­te 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, soll­te man den ver­schie­de­nen Spal­ten IDs zuwei­sen und sie dar­über ansprechen. 

Vor­tei­le
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. Genau­so funk­tio­nie­ren die Java­Script-Biblio­the­ken: Wer nur Menüs mit dem YUI erstel­len will, braucht nur das nöti­ge Java­Script laden. Im Gegen­satz zu Biblio­the­ken wie Pro­to­ty­pe und jQuery, bei denen man immer gleich alles neh­men muss.

War­um macht Yahoo das?
Wie jedes ande­re Open Source Pro­jekt erscheint die Yahoo User Inter­face Biblio­thek (YUI) unter einer offe­nen Lizenz (BSD Lizenz) und sie wir bei SourgeF­or­ge 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 Pfle­ge der Biblio­thek ein Neben­pro­dukt. Es müs­sen sich ohne­hin Mit­ar­bei­ter dar­um küm­mern, dass alle Yahoo-Diens­te funk­tio­nie­ren. Der Vor­teil für Yahoo, die YUI frie­zu­ge­ben ist, dass es inzwi­schen eine rich­ti­ge Com­mu­ni­ty gibt, die zusätz­li­che Tools ent­wi­ckelt, die Pro­ble­me mel­det und Ideen ein­bringt. So pro­fi­tie­ren am Ende bei­de Sei­te von der Bibliothek. 

Alter­na­ti­ven
Schon län­ger arbei­tet Dirk Jes­se an sei­nem YAML, für das es jetzt auch einen Buil­der gibt. Post­nu­ke war das ers­te CMS, das YAML in ein The­me umge­wan­delt hat. Damals aber gab es dadurch eine Men­ge Pro­ble­me – 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 woll­te ich es aber erwähnen.

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