kaffeeringe.de - Internet und Kreativität

startseite | archiv | bilder | abonnieren

Feierabend auf der Baustelle

CSS Layouts mit YUI Library CSS Tools

Samstag, 22. September 2007

Es ist kaum 1½ Jahre ist es her, da gal­ten mehrspaltige CSS Designs noch als Heiliger Gral des Web­de­sign. Inzwis­chen hat sich in diesem Gebiet einiges getan und nie­mand muss mehr selbst mit umher­sprin­gen­den DIVs kämpfen. Eine sehr schöné, mod­u­lare Lösung bietet die Yahoo User Inter­face Bibliothek.

ornament

Es steckt eine Menge Erfahrung und noch mehr Arbeit in den StyleSheets, die Yahoo zum Erstellen ver­schiedener Lay­out­gerüste anbietet.

Reset
Als erstes stellt reset.css alle browsereige­nen Ein­stel­lun­gen zurück — Kein HTML Ele­ment hat mehr Mar­gins, Paddings und egal ob h1 oder p — alle Schriften sind gle­ich groß.

Fonts
Dann stellt font.css alle Fonts auf Stan­dard Werte. Alle Aus­gaben wer­den auf Arial gestellt und bekom­men die gle­ichen Zeilenabstände.

Base
Die base.css stellt dann wieder einige For­matierun­gen her: Überschriften bekom­men wieder ver­schiedene Größen usw. Dadurch aber wer­den alle Ele­mente auf kon­sis­tente Werte gesetzt, die überall dann gle­ich aussehen.

Grid
Der Clou des CSS–Paketes aber ist die grid.css — hier­mit läßt sich das Lay­out beliebig in Spal­ten und Zeilen aufteilen. Man kann damit fast beliebig geschachtelte Lay­outs erstellen, die mit einem min­i­malen Aufwand an HTML–Tags auskom­men. Die YUI ist somit frei von „Divi­tis“.

Mit einem ein­fachen Edi­tor lassen sich Grids zusam­men­klicken, die schon automa­tisch ver­schiede­nen Ansprüchen genü­gen: Am wichtig­sten ist wohl, dass sie in allen gängi­gen Browsern funk­tion­ieren. Daneben entsprechen die Lay­outs in der Bre­ite entweder der 800er oder der 1024er Auflö­sung — es lassen sich aber auch 100% Grids erstellen. Bei den fes­ten Bre­iten entsprechen dann die Spal­ten gle­ich den gängi­gen Wer­be­for­maten: Ban­ner, Half­ban­ner, Sky­scraper usw.

So kann man sich in kürzester Zeit die Basis für ein neues Lay­out erstellen. Die Grids sind recht robust und lassen alle möglichen Verän­derun­gen zu — nur mit den Bre­iten sollte man sich abfinden. Sonst hat man das Prob­lem mit den sprin­gen­den DIVs schnell wieder an den Hacken.

Um die weit­eren Anpas­sun­gen zu vere­in­fachen, sollte man den ver­schiede­nen Spal­ten IDs zuweisen und sie darüber ansprechen.

Vorteile
Das schöné an der Yahoo User Inter­face Bib­lio­thek ist die Mod­u­lar­ität. Wer nur die reset.css benutzen will, kann das machen und er muss das restliche CSS nicht mit­laden. Genauso funk­tion­ieren die JavaScript-​Bibliotheken: Wer nur Menüs mit dem YUI erstellen will, braucht nur das nötige JavaScript laden. Im Gegen­satz zu Bib­lio­theken wie Pro­to­type und jQuery, bei denen man immer gle­ich alles nehmen muss.

Warum macht Yahoo das?
Wie jedes andere Open Source Pro­jekt erscheint die Yahoo User Inter­face Bib­lio­thek (YUI) unter einer offe­nen Lizenz (BSD Lizenz) und sie wir bei Sourge­Forge gehostet. Dort gibt es einen Bug­tracker, in den jeder Benutzer Fehler ein­tra­gen kann. Die Fehler wer­den dann in den inter­nen Yahoo Bug­tracker übernom­men und von Yahoo Mitar­beit­ern gelöst.

Für Yahoo ist die Pflege der Bib­lio­thek ein Neben­pro­dukt. Es müssen sich ohne­hin Mitar­beiter darum küm­mern, dass alle Yahoo-​Dienste funk­tion­ieren. Der Vorteil für Yahoo, die YUI friezugeben ist, dass es inzwis­chen eine richtige Com­mu­nity gibt, die zusät­zliche Tools entwick­elt, die Prob­leme meldet und Ideen ein­bringt. So prof­i­tieren am Ende beide Seite von der Bibliothek.

Alter­na­tiven
Schon länger arbeitet Dirk Jesse an seinem YAML, für das es jetzt auch einen Builder gibt. Post­nuke war das erste CMS, das YAML in ein Theme umge­wan­delt hat. Damals aber gab es dadurch eine Menge Prob­leme — ich kann mir aber nicht vorstellen, dass es die in YAML 3 immer noch gibt.

Mit Blue­PrintCSS habe ich per­sön­lich noch nicht gear­beitet — der Voll­ständigkeit hal­ber wollte ich es aber erwähnen.

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

Kommentare



Einen Kommentar hinzufügen





 

Werbefreies Blog

Steffen Voß | Steinstraße 5 | 24118 Kiel
Tel.: +49 431 88 88 683
E-Mail: kontakt@kaffeeringe.de
Skype: steffenvoss
Jabber: kaffeeringe@jabber.ccc.de
ICQ: 447639251