Das Highlight des CSS-Pakets aber ist die Bibliothek „grid.css“. Mit der nur 4 KByte großen Datei lässt sich das Layout einer Webseite beliebig in Spalten und Zeilen aufteilen. Damit können fast beliebig geschachtelte Layouts erstellt werden, die mit einem minimalen Aufwand an HTML-Tags auskommen und trotzdem barrierefrei sind.
Ein weiteres sehr nützliches Tool des YUI ist der YUI Compressor [5], eine Erzeugerkomponente zum Minimieren der JavaScript- und CSS-Dateien.
Konkrete Anwendung des YUI
Am einfachsten lernt man den Umgang mit YUI, indem man die beigefügten YUI-Beispiele direkt ausprobiert, anschließend den Quellcode analysiert und dann modifiziert. Yahoo empfiehlt den Einstieg über die Event-Utility-Sammlung. Dort gibt es einfache Beispiele, die sich exzellent zu ersten Experimenten eignen, aber auch komplexere Anwendungen. Vor allem mit den Utilities zu Drag & Drop wird es auch für JavaScript-erfahrene Programmierer interessant. Aus dieser Auswahl wollen wir ein Beispiel konkret modifizieren.
YUI-Skripte und CSS-Dateien lassen sich sowohl aus Ihrer lokalen YUI-Installation (aus dem Verzeichnis build) oder direkt von den Yahoo-Servern einbinden. Das YUI-Loader-Utility unterstützt Sie dabei als ein clientseitiges Ladepaket, das dynamisch alle benötigten YUI-Ressourcen liefert.
Über den Link [6] bzw. im lokalen Installationsverzeichnis von YUI gelangt man zu einer Website mit Beispielen zu Drag & Drop. Wir wählen Drag & Drop – Resizable Panel als unsere Basisapplikation aus, die wir analysieren und anpassen. Sie sehen bei diesem Beispiel zwei ineinander verschachtelte Rahmen (div-Container mit CSS-Formatierung), die Sie als Gesamtes per Drag & Drop verschieben können. Wenn Sie das Rechteck rechts unten mit der Maus anpacken, können Sie die Größe des äußeren Rechtecks verändern.
Unterhalb der Beispielapplikation sehen Sie in der Webseite die entscheidenden Quelltextpassagen. Ein Klick auf den Link „View example in new window“ öffnet die Applikation in einem eigenständigen Browserfenster. Das ist deshalb sinnvoll, weil so der vollständige Quelltext der Webseite für die Beispielapplikation besser analysiert werden kann.
Am Beginn des Quelltextes setzt ein internes Stylesheet alle margin- und padding-Werte für den Body auf „0“. Solche Werte führen in verschiedenen Situationen zu Fehlern und werden daher als Grundprinzip von YUI-CSS-Anweisungen immer ausgeschaltet. Im nächsten Schritt werden die CSS-Bibliothek „fonts-min.css“ und die JavaScript-Bibliotheken „yahoo-dom-event.js“ und „dragdrop.js“ eingebunden. Die folgenden CSS-Definitionen der IDs sind individuelle Formatierungen der beiden verwendeten div-Elemente.
