Ein Anwendungsbeispiel
Genug der grauen Theorie, lassen wir Taten sprechen. Von den vorgestellten Frameworks sind einzig Grids und YAML wirklich flexibel, universell und ausgereift. Deshalb schauen wir uns im Folgenden einmal an, wie man mit beiden Systemen eine Seite grundlegend aufbauen würde. Beide Frameworks geben eine Handlungsanweisung für den Aufbau einer Seite, an ihr orientieren wir uns. Die Beschreibung ist bei Grids sehr pragmatisch ausgefallen. Der Fokus liegt nicht auf „erklären“, sondern auf „Baukasten“. Dagegen kann man sich bei YAML schon einmal in den ausführlichen und interessanten Erklärungen und Begründungen verlieren. In einem ersten Schritt bauen wir anhand der Vorgaben der Frameworks die passende semantische Struktur auf und binden die zur Verfügung gestellten CSS-Dateien ein.Alle eigenen Layoutentscheidungen würden wir in einem eigenen Stylesheet treffen. Dadurch vermischen wir unsere Styles nicht mit denen der Frameworks und können so bei einem neuen Release viel leichter ein Update machen. Durch das Ausnutzen der Kaskade können wir in unserem eigenen Stylesheet jede schon einmal getroffene Definition überschreiben und neu definieren. Sollte es dabei einmal haken, helfen wir durch die Erhöhung der Spezifität nach. Die einfachste Methode ist dabei das Anfügen von „!important“ hinter die Eigenschaft, also zum Beispiel body {background-color: red !important;}
Eine Seite mit Grids
Eine Seite mit den yui Grids soll im Standardmodus erstellt werden. Eine Begründung liefert Yahoo! nicht und empfiehlt auch ohne Begründung strikt HTML 4. Wir können nur erahnen, dass der Grund dafür das kaputte Boxmodell des IE ist, das erst im Standardmodus des IE6 wieder korrekt arbeitet. Im Anschluss muss man die drei Basis-CSS-Dateien einbinden. Die Datei grids.css ist hierbei für den eigentlichen Aufbau des Rasters zuständig. In dieser Datei sind alle angedachten Rastervarianten definiert. In einem zweiten Schritt erwartet Grids eine Grundstruktur der Seite. Es gibt ein DIV, das die gesamte Site umfasst, das beispielsweise zur Zentrierung genutzt werden könnte. Es folgen Container für einen Header, den Contentbereich und einen Footer. Ob man Header und Footer auch weglassen kann, wenn nicht benötigt, ist in der knappen Dokumentation nicht verzeichnet (Listing 1).Listing 1: Die Grundstruktur für die Seite mit Grids----------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html><head><title>Zweispalter mit Grids</title><meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /><link rel="stylesheet" type="text/css" href="fonts.css" /><link rel="stylesheet" type="text/css" href="reset.css" /><link rel="stylesheet" type="text/css" href="grids.css" /></head><body><div id="doc"><div id="hd"></div> <!-- header --><div id="bd"></div> <!-- body --><div id="ft"></div> <!-- footer --></div></body></html>
Als nächstes bittet Yahoo! um die Auswahl eines „äußeren Templates“ für den Contentbereich. Wir wollen einen Zweispalter mit einer linken Navigation, also nehmen wir das Template „yui-t1“. Uns will dabei aber nicht in den Kopf, warum Yahoo! weiß (oder so tut), dass unsere Navigation 160 Pixel breit ist und noch 570 Pixel für den Inhalt übrig bleiben. Erst an diesem Punkt wird von Breiten gesprochen und uns beschleicht die Ahnung, dass wir nachher Mühe haben werden, andere Breiten durchzusetzen.
Das äußere Template besteht sinnvollerweise nicht aus weiteren DIVs, sondern ist eine Klasse, die wir dem DIV #doc zuweisen. Unser Wunsch führt also zu folgender Codeänderung:
<div id="doc" class="yui-t1">
Als nächstes unterteilen wir den Container #bd in zwei Bereiche, unsere spätere Navigation und den späteren Content. Beide bekommen die gleiche Klasse zugewiesen. Im nächsten Schritt definieren wir den „Hauptcontainer“, indem wir einen der beiden eben erstellten Container mit einem neuen Container mit der ID #yui-main umfassen. Dieser Container kann dann später auch mit weiteren Subcontainern unterteilt werden. Für den übrig gebliebenen Container (unsere Navigation) ist dies nicht vorgesehen. Jedenfalls nicht mittels Grids-Containern. Jetzt können wir unsere Container mit ein wenig Blindtext füllen. Wir sehen, die gewünschte Layoutform wird wiedergegeben, an den Details der Optik müssen wir noch feilen.
Wem eine solche breite Inhaltsspalte genügt, der kann sich jetzt schon ans Anhübschen machen. Alle anderen können aus dem Vollen des Frameworks schöpfen und den Inhaltsbereich in kleine Einzelbereiche unterteilen. Der Hauptcontainer kann in bis zu vier Subcontainer unterteilt werden. Dieses Raster kann zudem noch auf der Seite wechseln, sodass beispielsweise erst eine „Zeile“ mit einer „Spalte“ käme, dann eine mit drei, dann eine mit vier. Wir modifizieren unsere Seite nun soweit, dass sie zuerst mit einem „Einspalter“ beginnt und dann mit einem „Zweispalter“ fortfährt. Dafür müssen wir in den Hauptcontainer folgendermaßen erweitern:
<div id="yui-main"><div class="yui-b"><div class="yui-u"></div><div class="yui-g"><div class="yui-u first"></div><div class="yui-u"></div></div></div> <!-- ende .yui-b --></div> <!-- ende .yui-main -->
Das Konzept hinter Grids arbeitet mit den beiden Containerklassen yui-u („u“ steht offenbar für Unit, also „eine Einheit“) und yui-g („g“ steht wohl für „Grid“), erweitert durch die Zuweisung der Klasse first an den ersten Container in der Reihe. Befüllen wir unser neues Konstrukt wieder mit Blindtext und schauen es uns an. Ab diesem Zeitpunkt können wir uns genauer um die Optik unserer Seite kümmern, was nicht Gegenstand dieses Artikels sein soll.
Eine Seite mit YAML
Die Grundidee hinter YAML ist, eine komplette Struktur zu liefern, die man modifizieren kann. Dirk Jesse erläutert in seinem umfangreichen Tutorial die einzelnen Grundbestandteile von YAML und zeigt die Anwendung seines Konzeptes an Grundlayouts, wobei dort auch Designspezialitäten wie durchgehende Hintergründe hinter Spalten zur Sprache kommen. Wir gehen also vom gelieferten Dreispalter aus und streichen diesen auf zwei Spalten zusammen. Als Ausgangscode bekommen wir das Gerüst aus Listing 2.Listing 2: Die Grundstruktur für die Seite mit YAML-------------------------------------------------------------------------<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de"><head><title>Ein Zweispalter mit YAML</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/><link href="css/layout_2col_left.css" rel="stylesheet" type="text/css"/><!--[if lte IE 7]><link href="css/explorer/iehacks_2col_left.css" rel="stylesheet" type="text/css" /><![endif]--></head><body><div id="page_margins"><div id="page" class="hold_floats"><div id="header"></div><div id="main"><div id="col1"><div id="col1_content" class="clearfix"></div></div><!-- Ende #col1: diese Spalte floatet --><div id="col3"><div id="col3_content" class="clearfix" ></div><div id="ie_clearing"> </div><!-- Ende: IE Column Clearing --></div><!-- Ende #col3: Statische Spalte des Inhaltsbereiches --></div><!-- Ende #main --><div id="footer"></div> <!-- Ende #footer --></div></div></body></html>
Die von vornherein verschachtelte Struktur der Seite und das mittels Conditional Comments eingebundene spezielle Stylesheet zeugen davon, dass bei YAML viel Wert auf das Ausbügeln der unzähligen Parsingfehler des IE (egal in welcher Version) gelegt wird.
Die im Kopf verlinkte CSS-Datei layout_2col_left.css importiert ihrerseits weitere CSS-Dateien. Je nach angestrebter Grundstruktur sind dies unterschiedliche CSS-Dateien. Der Aufbau dieses cleveren Konzeptes wird in der Doku auch grafisch erläutert. Wenn man sich nun diese Datei ohne Inhalt anschaut, wird man verwunderlicherweise etwas sehen, denn YAML kommt mit einem Standardlayout. Auch hier gilt wieder: wegstreichen, was nicht benötigt wird. Die von uns verlinkte CSS-Datei importiert ihrerseits wieder sieben CSS-Dateien. Diese sind entweder für den Grundaufbau, die Zweispaltigkeit, Navigationen oder die Druckausgabe zuständig. Alle CSS-Dateien sind in sinnvolle Ordner sortiert: einer für die Behebung der IE-Bugs, einer für die Basisformatierungen und einer für die individuellen Modifikationen und Layoutdetails wie Navigationen. Alles wird über ein zentrale CSS-Datei gesteuert, die nur eine einzige Datei importieren muss: base.css(im Unterordner main). Des Weiteren gehören drei Dateien für IE-Hacks zur Ausstattung. Und obwohl diese per Conditional Comments (CCs) eingebunden werden, ist in ihnen der Code mittels Hack vor dem IE5-Mac versteckt. Sollte ein Anwender einmal Teile der CSS-Dateien außerhalb der CCs einsetzen wollen, wäre der Code korrekt vor dem IE5 Mac versteckt.
Ein erster Test mit dem Blindtext, den wir auch bei Grids genutzt haben, eröffnet ein etwas anderes Ergebnis als Grids, denn YAML macht erst einmal keine Unterscheidungen in der Schriftgröße zwischen den einzelnen Bereichen.
YAML bietet auch die Unterteilung des Hauptcontainers, gesprochen wird hier von „Subtemplates“. Einspaltiger Inhalt benötigt zumindest am Anfang des Containers kein Subtemplate, alle weiteren Unterteilungen des Inhaltes werden in Container mit der Klasse subcolumns gepackt. Die Klassenbenennung richtet sich nach der prozentualen Unterteilung des Inhalts und danach, ob links oder rechts platziert wird. Wir nehmen uns folgende Kombination:
<div class="subcolumns"><div class="c50l"><div class="subcl"></div></div><!-- linke Spalte --><div class="c50r"><div class="subcr"></div></div> <!-- rechte Spalte --></div>
Auch hier wird wieder mit zusätzlich verschachtelten Containern gearbeitet, damit der Boxmodell-Bug des IE ausgebügelt wird. Das Ergebnis beruhigt und lädt ein, ein richtiges Layout in Angriff zu nehmen.
Fazit
Keines der vorgestellten Frameworks bietet einen einfach zu bedienenden Baukasten an. Man sollte sich in der Materie auskennen oder sich diese spätestens mit der Nutzung des Frameworks aneignen. Viele dieser Ansätze sind reine theoretische Spielereien, einige haben auch gar nicht den Ehrgeiz, alle vorstellbaren Layoutvarianten zu erfassen. Einzig zwei Frameworks stechen aus der Menge heraus und lohnen eine genauere Beschäftigung: Zum einen ist das „Grids“ von Yahoo!, weil dahinter das Entwicklerpotenzial einer großen Firma steckt, weil es das Baukastenprinzip am konsequentesten durchzieht und weil es eine leichte Integration mit dem JavaScript/AJAX-Framework aus dem gleichen Hause verspricht. Und zum anderen ist es YAML von Dirk Jesse, weil es die mit Abstand beste Dokumentation hat und der Entwickler sich schnell um lästige Bugs einzelner Browser kümmert. Einzig YAML bietet übrigens einen intensiven und informativen Blick hinter die Kulissen, beschreibt detailliert den Aufbau des Codes. Bei den meisten anderen Ansätzen muss man durch genaues Quellcodestudium herausfinden, ob es sich beispielsweise um eine reine Float-Lösung handelt oder ob mit Positionierungen gearbeitet wird. Gerade für die Realisierung eines Footers und ähnliche Detailfragen kann dies eine entscheidende Information sein.YAML ist nicht wie Grids darauf ausgerichtet, sich in einem schnellen Verfahren ein Grundlayout zusammenzubasteln. Dirk Jesse erklärt die Idee hinter dem Framework ausführlich und interessant. Um ein Layout zu bekommen, muss man erst einmal dieses Tutorial durchgearbeitet haben. Das hat allerdings den großen Vorteil gegenüber Grids, dass man weiß, was man macht und erahnen kann, wo man selber noch ansetzen kann.
