Dieter Petereit 2. März 2010

Das aktuelle YUI 3 CSS Framework im Praxistest

YUI – dahinter verbirgt sich die Yahoo! User Interface Library – ist wahrscheinlich vielen von Ihnen bekannt. Sicherlich werden Sie dabei hauptsächlich an ein Javascript-Framework denken. Und in der Tat ist YUI, das mittlerweile in der Version 3 vorliegt, ein Bolide auf diesem Gebiet. Fast unscheinbar und möglicherweise unbemerkt, verbirgt sich in YUI auch ein kleines, aber nicht unfeines CSS Grid Framework, dem ich diesen Artikel widmen will.

Mitautor Rene Schmidt sprach bereits vor einigen Jahren von einem AJAX-Riesen, als er sich YUI ausführlich anschaute. Mittlerweile wurde nahezu der gesamte Core neu programmiert und als Version 3 im September 2009 in die freie Wildbahn gebracht. Die Änderungen sind so weitgehend, dass man erneut eine mehrteilige Artikelserie zum Thema auflegen könnte. YUI, die Yahoo! User Interface Library steht unter einer BSD-Lizenz (Berkeley Software Distribution), was sogar das Forking erlaubt. Und sie ist die Bibliothek, die das Yahoo-Webangebot motorisiert.

Die YUI 3 CSS Komponenten

Nach Entwickleraussage wurde mehr der Vollständigkeit halber in YUI ein CSS Framework integriert. Irgendwo gehört es halt zum ganzheitlichen Anspruch der Library. Das CSS Framework besteht aus vier Komponenten: Base, Reset, Fonts und Grids.

Base ist optional, wird also nicht unbedingt benötigt, um die anderen Komponenten zu verwenden. Dennoch ist der Einsatz sinnvoll, sorgt Base doch für ein konsistentes Grundstyling der HTML-Elemente. Umgekehrt ist Base von Fonts abhängig, da es die dort definierten Proportionen übernimmt.

Reset bereitet den Boden für Base, respektive jedes andere customed styling und gehört in der ein oder anderen Form ohnehin zum Fundament eines jeden CSS. Anstelle des CSS Reset aus dem YUI kann prinzipiell auch das bekannte CSS Reset von Eric Meyer eingesetzt werden. Wer darauf schwört, bitte.

Fonts ist das Stylesheet, auf dem alles basiert. Fonts wird für Base, vor allem aber für Grids benötigt, damit dem Layout die korrekten Breiten für em zugrundegelegt werden können. Fonts definiert eine Standardschriftart (Arial) mit einer Standardschriftgröße (13px) und setzt so den Indexwert für etwaige Umrechnungen, die dann in % angegeben werden müssen. So wären 11px entsprechend als 85% zu deklarieren.

Grids bietet einen rasterorientierten Gestaltungsrahmen, vom Ansatz her vergleichbar mit 960.gs oder Blueprint. Zwar wird diese Komponente als deprecated, nicht weiterentwickelt bezeichnet, wofür es auch eine wenig aussagekräftige Begründung gibt. Dennoch findet sie sich, entgegen den Ankündigungen, in deutlich veränderter Form zwar, aber jedenfalls im finalen YUI 3 Downloadpaket wieder und die ebenso angekündigte komplette technische Neuentwicklung ist auch weiterhin nicht in Sicht. Aus diesen Gründen und auch aufgrund der zuverlässigen Funktionalität spricht nichts gegen einen Einsatz von Grids.

Grids unterstützt das Standardlayout heutiger Wald- und Wiesen-Websites mit seiner Unterteilung in wrapper, header, body und footer, bewältigt aber auch anspruchsvollere Aufgaben. Innerhalb des body kann eine Sidebar mit dem Effekt, dass das Div die gesamte Höhe des Body belegt und/oder Content-Divs definiert werden.

Dabei ist es möglich, inklusive Sidebar bis zu fünf Spalten pro Reihe zu erstellen. Durch das Hinzufügen weiterer Zeilen (Rows) mit anderer Spaltenaufteilung lassen sich so auch komplexeste Gridlayouts basteln. Dies realisiert Grids durch entsprechend vordefinierte Klassen, worin sich letztlich auch die Limitierungen des Frameworks zeigen.

Dafür, dass diese im Standardlayout vermutlich kaum spürbar werden, sorgt  das flexible Konzept der Seitenaufteilung. Anders als bei anderen Frameworks ist man hinsichtlich der Gesamtbreite der Seite nicht auf fixe Größen oder den gesamten Screen beschränkt. Vielmehr akzeptiert YUI CSS alle Werte zwischen 0 und 100 Prozent sowie entsprechende Pixelangaben. Weiterhin ist es möglich, innerhalb der Spaltendivs weitere Spalten zu definieren, was zwar zu einer erheblichen und schwer zu pflegenden Verschachtelungshierarchie führt, aber zumindest möglich ist.

Letztlich ist zu sagen, dass mit YUI CSS fast jedes denkbare Gridlayout erzeugt werden kann. Worauf das Framework allerdings nicht out of the box vorbereitet ist, sind Layouts mit mehreren Sidebars, wie sie beispielsweise bei manchen 3-spaltigen Layouts üblich sind. Zwar können entsprechende Container definiert werden, jedoch kann es nur eine sich über den gesamten Body erstreckende Sidebar geben. Das Problem tritt allerdings nur dann auf, wenn Sie im Layout mehr als eine Zeile (Row) benötigen und lässt sich durch Anpassungen im Markup natürlich auch beheben, wozu solide Kenntnisse vonnöten sind. Im Grunde werden hier bereits die Grenzen des Frameworks überschritten. Anfänger lassen von solchen Versuchen am Besten die Finger.

In nur geringfügig eingeschränkter Art und Weise lassen sich mit dem YUI CSS Grid Builder Layouts visuell zusammen klicken. Aus meiner Sicht ein prinzipiell gutes Werkzeug, unabhängig von den Vorkenntnissen. Immerhin lassen sich so die wesentlichen Grobteile des Rasterlayouts in ansonsten nicht zu erreichender Geschwindigkeit bauen.

yui-toolbox.png

Die Toolbox des Grid Builder

Um überhaupt einen einigermaßen zuverlässigen Eindruck vom Ergebnis erhalten zu können, fügt der Grid Builder den obligatorischen Lorem Ipsum ein, bietet jedoch beim Codeexport die Möglichkeit, den Blindtext raus zu lassen und stattdessen einen „your data goes here“-Kommentar zu erhalten, was sicherlich das Erkennen der Strukturen erheblich vereinfacht.

Achtung: Im Umgang mit dem Grid Builder ist zu beachten, dass dieser auf YUI 2.x basiert. Wollen Sie den Grids Builder verwenden, müssen Sie sich auch das YUI 2 CSS Framework herunter laden. Von 2 nach 3 wurde bereits an der Grids-Basis gearbeitet, so dass der durch den Builder erzeugte Code nicht mit den CSS-Files aus YUI 3 funktioniert, auch wenn der Builder-Link durch die Verwendung einer 3 anderes suggeriert: http://developer.yahoo.com/yui/3/cssgrids/builder/

Um zu schauen, ob das wirklich alles so einfach und prima funktioniert, baue ich folgend die Startseite des Dr. Web Magazin unter Verwendung des YUI CSS nach.

Praxistest: Dr. Web Optik mit dem YUI CSS Framework

Unter der URL http://yui.akuefi.de/ steht das zugegebenermaßen ziemlich unspektakuläre Ergebnis meiner folgenden Bemühungen zur Ansicht bereit. So bin ich vorgegangen:

Zunächst erstelle ich einen Projektordner. Ich nenne ihn yuicss und verknüpfe ihn mit der Subdomain „yui.ahuefi.de“. In diesem Verzeichnis lege ich eine index.html, sowie die Ordner css, img und js an. Js brauchen wir für das Beispiel nicht, aber vielleicht wollen Sie sich im Nachgang unbedingt auch noch in die YUI Javascript Komponenten stürzen.

sites-yui-dw.png

Hernach lade ich von Dr. Web ein paar Grafiken herunter und speichere sie in das Verzeichnis img. Der Einfachheit halber habe ich den Plus-Login rechts oben, sowie die rechte Sidebar per Screenshot als Grafik gesichert und ebenfalls dort abgelegt.

Das YUI CSS, namentlich die vier Dateien fonts-min.css, reset-min.css, base-min.css und grids-min.css, lege ich im Unterordner 960 innerhalb des Ordners yuicss ab, mein eigenes Stylesheet drweb.css eine Ebene höher. So kann man nicht versehentlich an den Originalen des YUI CSS rumfummeln.

In der index.html verknüpfe ich nun im Head die Stylesheets.

linkrel-head.png

Gridbuilder – Mit YUI 3 CSS unbrauchbar

Um zu schauen, inwieweit es vielleicht einfacher ist, den generierten Code auf YUI2-Basis an 3 anzupassen, anstatt alles von Hand zu schreiben, baue ich mir nun mit dem YUI CSS Grid Builder ein Layout zusammen, dass in etwa passend sein müsste.

yui-beispiellayout-w500.png

Zunächst macht der Grid Builder einen hervorragenden Eindruck. Wenn er nur nicht auf YUI 2 basierte…

Allerdings tritt schnell Ernüchterung ein. Yahoo hat nicht nur die Bezeichner umbenannt, sondern ist auch komplett von IDs auf Klassen umgestiegen und hat verschiedene Elemente komplett entfernt beziehungsweise teils durch andere ersetzt. Der Code aus dem Builder ist total unbrauchbar. Sehen wir es positiv: Man arbeitet offenbar bereits aktiv an einer Änderung der Grids-Komponente …

Gehen wir das Layout grob konzeptionell an. Wir benötigen einen Header mit dem Logo und dem Login rechts. Dann brauchen wir einen Container mit der Hauptnavigationsleiste über die gesamte Screenbreite, woran sich drei Container mit dem dreispaltigen Hauptlayout anschließen. Unten schließt ein Footer die Seite ab.

Das YUI CSS Framework ist vom Ansatz her vergleichbar mit der Vorgehensweise beim Layouten eines Printproduktes wie mit InDesign. Zunächst wird die Seite eingerichtet, dann wird ein Grobtemplate eingerichtet und danach werden die Inhaltsblöcke auf der Seite verteilt und – soweit nötig – ineinander verschachtelt.

Auf diese Weise entstehen im Grunde unnötig viele Container, die lediglich dem Zweck dienen, Eigenschaften auf die untergeordneten Container zu vererben. Kritiker werden nicht zu Unrecht sagen, dass diese Verwendung von p sich nicht sonderlich von der mittlerweile verpönten Verwendung von Tabellen als Layoutelement unterscheidet. In der Tat wird es in einem komplexen Layout schon nach kurzer Zeit unübersichtlich. Ohne Editor mit Codecollapsing sind Sie verloren.

Positiv zu erwähnen ist die Umstellung der Layoutdefinitionen im Framework von ID auf Class. Nicht nur, dass eine ID pro Seite nur einmal vorkommen darf und so wiederholte Verwendungen desselben Layouts unnötig erschwert bis unmöglich waren. Auch ein einigermaßen semantisches Markup ist natürlich nicht möglich, wenn das Framework IDs mit kryptischen Buchstabenkombinationen vorgibt. Abgesehen davon, dass der Code deutlich besser lesbar ist, wenn man der linken Sidebar auch die ID sidebar_links verpassen kann.

Die wesentlichen Klassen des YUI CSS

Bevor wir nun Dr. Web ins YUI CSS zwingen, schauen wir uns die wesentlichen Klassen an, mit denen wir es im weiteren Verlauf zu tun bekommen werden.

.yui-d: Diese Klasse definiert die Gesamtseitenbreite, wird daher logischerweise direkt zu Beginn des Body gesetzt und erst am Ende wieder geschlossen. Es sei denn, man wollte mit mehreren Seitenbreiten auf der gleichen Seite arbeiten, was auch geht, aber nur in den wenigsten Anwendungsfällen wohl Sinn machen dürfte. -d steht übrigens für Document. Ganz so kryptisch ist das Markup also nicht.

yui-docdefinition.png

.yui-t: YUI verfügt über verschiedene vorgefertigte Templates, die im Wesentlichen dazu dienen, die Position und Größe der Sidebar zu definieren. Da die klassische Sidebar über die gesamte Seitenhöhe gehen soll, muss YUI eine außerhalb des Gridkonzeptes liegende Lösung anbieten. Ansonsten sind Gridunits nämlich immer nur so hoch wie der höchste Content in der jeweiligen Row. – t steht, Sie ahnen es bereits, für Template. yui-t kann zur Anwendung kommen, auch mehrmals pro Seite, muss aber nicht.

yui-templates.png

.yui-b und .yui-main: Mit der Klasse yui-b werden die Inhaltsblöcke versehen. Das -b steht entsprechend für Block. Über yui-main wird innerhalb des Grids gesteuert, welcher Block den größeren Layoutanteil ausfüllen soll. Auf diese Weise ist es nicht erforderlich, in einem 2/3 zu 1/3 Grid den Teil, der 2/3 einnehmen soll, auch im Markup zuvorderst zu stellen.

.yui-g: -g steht für Grid und stellt zusammen mit yui-u den Kern des Gridsystems dar. yui-g bezeichnet einen Container, der im Standard zwei Units (yui-u) enthalten kann. Ohne Zusätze führt die Verwendung von yui-g dazu, dass sich zwei Units in einem -g den Platz hälftig teilen. Ähnlich wie bei -d und -t gibt es hier Weiterungen, mit deren Hilfe man unproblematisch asymmetrische Teilungen hinbekommt. So führt .yui-gc beispielsweise zu einer 2/3 zu 1/3 Teilung. Nutzt man yui-g direkt als Inhaltscontainer, erstreckt er sich über die volle definierte Seitenbreite.

yui-grids.png

.yui-u: Innerhalb der yui-g Divs existieren die Units, die Inhaltseinheiten. Ähnlich wie in der Blockdefinition kann man hier außerhalb der Markupreihenfolge Units unter Verwendung des Attributs first (div.yui-u first) den ersten Platz in der Reihe zuweisen. Anders als bei -main ist das Setzen von yui-u first verpflichtend, da sich ansonsten immer die größere Unit nach vorn setzt. Units können auch wieder Grids enthalten, allerdings mit der weiter unten genannten Einschränkung.

Der Seitenaufbau

Diese wenigen Kenntnisse reichen aus, um ans Layout zu gehen. Das Musterprojekt können Sie unter http://yui.akuefi.de/ besuchen. Den Quelltext der Beispielseite können Sie hier als Rar-komprimiertes File herunter laden.

Nach der Philosophie des YUI CSS beginnen wir also mit der Definition der Gesamtseitenbreite. Dazu legen wir im Body ein Div mit einer Class entsprechend der folgenden Tabelle an:

yui-docdefinition.png

Dr. Web verwendet eine 100%-Breite. Ich verwende im Beispiel daher die korrespondierende Klasse yui-d0. Um sicher zu stellen, dass der Header und die Hauptnavigation korrekt dargestellt werden, setze ich nun die Klasse yui-main, einen ersten Block, sowie ein erstes Grid über die gesamte Breite. Das wiederhole ich für die obere Navigationsleiste und schließe die Blocks, sowie das Main-Div ab.

header-hauptnavi.png

Da ich eine linke und rechte Sidebar benötige, überlege ich zunächst, auf ein Template zu verzichten und stattdessen mehrere yui-g ineinander zu verschachteln. Schnell stelle ich fest:

Ein Nesting dergestalt, dass man zunächst in der Div yui-u first ein Div yui-gf (1/4 zu 3/4) definiert, um dann in der zweiten Unit (yui-u) ein Div yui-ge (3/4 zu 1/4) anzulegen und so in Summe ein 1/4 zu 1/2 zu 1/4 zu erreichen ist nicht möglich. Das Nesting von yui-gx in yui-gx führt dazu, dass immer die Eigenschaften des ersten yui-gx auf alle weiteren vererbt werden. Verschachteln der yui-g ist also möglich, um beispielsweise vierspaltige Layouts zu erreichen, aber immer nur unter Beibehaltung der zuerst gewählten Konvention. Auf diese Weise kann das dreispaltige Dr. Web Layout also nicht erstellt werden.

Damit wird klar, dass das Dr. Web Layout mit YUI CSS nicht sachgerecht umgesetzt werden kann, bräuchte es doch zwei Sidebars. So kann das Layout nur existieren, wenn keine weiteren Rows erforderlich würden. Diese würden nämlich die rechte Sidebar kappen, respektive inhaltslos bleiben.

Um wenigstens optisch das Layout nachzubilden, setze ich das Template .yui-t1 ein, was eine Sidebar links mit einer Größe von 160 Pixeln definiert. Danach definiere ich einen Inhaltsblock mit dem Sidebarcontent. Den verbleibenden Platz teile ich unter Verwendung von .yui-ge in 3/4 zu 1/4 auf. Dabei erhält der Textpart den Zusatz .yui-u first.

3-spaltenlayout-code.png

Zu guter Letzt verwende ich noch ein .yui-g als Inhaltscontainer für den Footer.  Fertig ist das Grundlayout.

drweb-mit-yui-w500.png

Fazit: Das Gridskonzept im neuen YUI 3 CSS unterscheidet sich grundlegend von YUI 2 CSS und ist dabei relativ rudimentär dokumentiert. Zwar ist das Prinzip leicht zu erfassen, jedoch werden genau so schnell auch die Limitierungen offenbar, will man nicht tief in die CSS-Kiste greifen.

Als Gridsystem eignen sich daher, nicht zuletzt aufgrund eingängigerer Konzepte, andere Frameworks, wie etwa Blueprint oder 960.gs besser. Allerdings würde man YUI unrecht tun, wenn man es auf die Gridkomponente, die überdies als deprecated bezeichnet wird, reduzierte. YUI ist in vorderster Linie als Javascript-Framework gedacht und besitzt in seinem CSS auch typografische Komponenten, die anderen Systemen wiederum abgehen.

(sl), (mm),

Dieter Petereit

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.
Dr. Webs exklusiver Newsletter
Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.

4 Kommentare

  1. Ach gottchen, sehr guter Artikel, aber ich bleib lieber beim 960.gs :P

Schreibe einen Kommentar

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

Kennst du schon unseren Newsletter?

Hinweise zum Datenschutz, also dem Einsatz von Double-Opt-In, der Protokollierung der Anmeldung, der Erfolgsmessung, dem Einsatz von MailChimp als Versanddienstleister und deinen Widerrufsrechten findest du in unseren Datenschutzhinweisen.