kaffeeringe.de

CSS Layouts mit YUI Library CSS Tools

Es ist kaum 1½ Jahre ist es her, da gal­ten mehr­spal­ti­ge CSS Designs no­ch als Heiliger Gral des Webdesign. Inzwischen hat si­ch in die­sem Gebiet ei­ni­ges ge­tan und nie­mand muss mehr selbst mit um­her­sprin­gen­den DIVs kämp­fen. Eine sehr schö­ne, mo­du­la­re Lösung bie­tet die Yahoo User Interface Bibliothek.Es steckt ei­ne Menge Erfahrung und no­ch mehr Arbeit in den StyleSheets, die Yahoo zum Erstellen ver­schie­de­ner Layoutgerüste an­bie­tet.

Reset
Als ers­tes stellt reset.css al­le brow­s­er­ei­ge­nen Einstellungen zu­rück – Kein HTML Element hat mehr Margins, Paddings und egal ob h1 oder p – al­le Schriften sind gleich groß.

Fonts
Dann stellt font.css al­le Fonts auf Standard Werte. Alle Ausgaben wer­den auf Arial ge­stellt und be­kom­men die glei­chen Zeilenabstände.

Base
Die base.css stellt dann wie­der ei­ni­ge Formatierungen her: Überschriften be­kom­men wie­der ver­schie­de­ne Größen usw. Dadurch aber wer­den al­le Elemente auf kon­sis­ten­te Werte ge­setzt, die über­all dann gleich aus­se­hen.

Grid
Der Clou des CSS-Paketes aber ist die grid.css – hier­mit läßt si­ch das Layout be­lie­big in Spalten und Zeilen auf­tei­len. Man kann da­mit fast be­lie­big ge­schach­tel­te Layouts er­stel­len, die mit ei­nem mi­ni­ma­len Aufwand an HTML-Tags aus­kom­men. Die YUI ist so­mit frei von „Divitis„.

Mit ei­nem ein­fa­chen Editor las­sen si­ch Grids zu­sam­menkli­cken, die schon au­to­ma­ti­sch ver­schie­de­nen Ansprüchen ge­nü­gen: Am wich­tigs­ten ist wohl, dass sie in al­len gän­gi­gen Browsern funk­tio­nie­ren. Daneben ent­spre­chen die Layouts in der Breite ent­we­der der 800er oder der 1024er Auflösung – es las­sen si­ch aber auch 100% Grids er­stel­len. Bei den fes­ten Breiten ent­spre­chen dann die Spalten gleich den gän­gi­gen Werbeformaten: Banner, Halfbanner, Skyscraper usw. 

So kann man si­ch in kür­zes­ter Zeit die Basis für ein neu­es Layout er­stel­len. Die Grids sind recht ro­bust und las­sen al­le mög­li­chen Veränderungen zu – nur mit den Breiten soll­te man si­ch ab­fin­den. Sonst hat man das Problem mit den sprin­gen­den DIVs schnell wie­der an den Hacken.

Um die wei­te­ren Anpassungen zu ver­ein­fa­chen, soll­te man den ver­schie­de­nen Spalten IDs zu­wei­sen und sie dar­über an­spre­chen.

Vorteile
Das schö­ne an der Yahoo User Interface Bibliothek ist die Modularität. Wer nur die reset.css be­nut­zen will, kann das ma­chen 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 er­stel­len will, braucht nur das nö­ti­ge JavaScript la­den. Im Gegensatz zu Bibliotheken wie Prototype und jQue­ry, bei de­nen man im­mer gleich al­les neh­men muss.

Warum macht Yahoo das?
Wie je­des an­de­re Open Source Projekt er­scheint die Yahoo User Interface Bibliothek (YUI) un­ter ei­ner of­fe­nen Lizenz (BSD Lizenz) und sie wir bei SourgeForge ge­hos­tet. Dort gibt es ei­nen Bugtracker, in den je­der Benutzer Fehler ein­tra­gen kann. Die Fehler wer­den dann in den in­ter­nen Yahoo Bugtracker über­nom­men und von Yahoo Mitarbeitern ge­löst.

Für Yahoo ist die Pflege der Bibliothek ein Nebenprodukt. Es müs­sen si­ch oh­ne­hin Mitarbeiter dar­um küm­mern, dass al­le Yahoo-Dienste funk­tio­nie­ren. Der Vorteil für Yahoo, die YUI frie­zu­ge­ben ist, dass es in­zwi­schen ei­ne rich­ti­ge Community gibt, die zu­sätz­li­che Tools ent­wi­ckelt, die Probleme mel­det und Ideen ein­bringt. So pro­fi­tie­ren am Ende bei­de Seite von der Bibliothek. 

Alternativen
Schon län­ger ar­bei­tet Dirk Jesse an sei­nem YAML, für das es jetzt auch ei­nen Builder gibt. Postnuke war das er­s­te CMS, das YAML in ein Theme um­ge­wan­delt hat. Damals aber gab es da­durch ei­ne Menge Probleme – ich kann mir aber nicht vor­stel­len, dass es die in YAML 3 im­mer no­ch gibt.

Mit BluePrintCSS ha­be ich per­sön­li­ch no­ch nicht ge­ar­bei­tet – der Vollständigkeit hal­ber woll­te ich es aber er­wäh­nen.

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 benachrichtigt werden, wenn Dir hier jemand antwortet?