Yet Another Multicolumn Layout | Ein (X)HTML/CSS Framework

1.1 Was ist YAML?

YAML wurde als Basis für die Entwicklung flexibler Layouts entworfen. Einer der Schwerpunkte liegt damit bei den Anforderungen, die sich aus der Arbeit mit variablen Größenangaben und der Verwendung unterschiedlicher Maßeinheiten ergeben. Daraus entwickelte sich ein Framework, welches folgende grundlegende Funktionen bietet:

Die wichtigsten Features:

Mit der grundlegenden, spaltenbasierten Quelltextstruktur lassen sich Designs mit ein bis drei Spalten (mit fixen oder flexiblen Breiten) innerhalb sehr kurzer Zeit entwickeln. Über Subtemplates (flexible Grid-Bausteine) lässt sich das Spaltensystem nahezu beliebig erweitern oder alternativ zur Erstellung von Grid-Layouts verwenden. Das über den standardmäßig vorgegebenen Quelltext definierte Basislayout enthält ebenfalls Container, welche die Festlegung der Layoutbreite vereinfachen und z.B. grafische Umrandungen des Layouts ermöglichen. Wozu all diese vordefinierten Container?

Generell lassen sich zwei grundsätzliche Arbeitsweisen bei der Erstellung eines Layouts unterscheiden:

Das Bottom-Up-Prinzip

Der Seitenersteller beginnt mit dem Bau des Layouts quasi bei Null. Die im Layout benötigten Container werden erstellt und per CSS positioniert und gestaltet. Ein Basislayout ist in diesem Fall also nicht vorhanden. Während der Erstellung des Layouts müssen alle ggf. auftretenden Browserbugs gefunden und in der Regel individuell beseitigt bzw. umgangen werden.

Das Top-Down-Prinzip

In diesem Fall steht dem Seitenersteller ein browserübergreifend funktionstüchtiges, modular aufgebautes Basislayout zur Verfügung, welches alle häufig benötigten Layoutelemente enthält. Der Webdesigner modifiziert dieses Basislayout nach seinen Vorstellungen und optimiert anschließend den XHTML- und CSS-Code, indem er nicht benötigte Elemente aus dem Layout entfernt.

YAML wurde für die Arbeit nach dem Top-Down-Prinzip entworfen. Die Begriffe »Baukasten-System« oder »Framework« bezeichnen YAML daher wohl am treffendsten.

1.2 Was ist YAML nicht?

YAML ist kein Fertiglayout. Dies zu behaupten, widerspräche dem Entwurfsgedanken des Top-Down-Prinzips. Ohne eine Optimierung auf die jeweiligen Layoutanforderungen erzeugen nicht benötigte Elemente (HTML/CSS) unnötigen Ballast.

Anmerkung des Autors: Das YAML-Framework stellt als technische Grundlage ein browserübergreifendes Basislayout sowie zahlreiche hilfreiche CSS-Bausteine zur Verfügung, so dass dem Webdesigner wieder mehr Zeit und Raum für die kreative Gestaltung bleibt.

Nichts liegt mir ferner, als die monotone Optik von Reihenhäusern im Bereich des Webdesigns zu fördern, indem YAML als Fertiglayout angepriesen wird.

Natürlich ist es nicht verboten, YAML samt seiner zusätzlichen Bausteine als »ready to use« Layout einzusetzen. Bei der Verwendung sollten Sie jedoch neben der individuellen Gestaltung des Webauftritts immer auch dem Anspruch folgen, möglichst einfachen und schlanken Code zu erzeugen. Wartung und Fehlersuche im Code werden dadurch stark vereinfacht. Nicht benötigte Elemente im XHTML-Quelltext oder den CSS-Bausteinen sollten daher - nachdem das Layout steht - entfernt werden.

1.3 Vorteile des Frameworks

YAML ist mehr als ein einfaches mehrspaltiges Layout. Es ist ein praxisorientiertes Layout-Framework mit einem hohen Grad an Flexibilität. YAML stellt verschiedenste Bausteine für die Layouterstellung bereit und sorgt für deren reibungsloses Zusammenspiel. Daraus ergeben sich folgende Vorteile:

Browserkompatibilität

Die Grundbausteine von YAML garantieren eine browserübergreifend korrekte Darstellung des Layouts. Alle für die fehlerfreie Darstellung des Layouts erforderlichen Browser-Anpassungen sind in den Grundbausteinen bereits integriert. Der während der Layouterstellung üblicherweise erforderliche Zeitaufwand für umfangreiche Kompatibilitätstests zu verschiedensten Browsern kann auf ein Minimum reduziert werden.

Baukasten-Prinzip

Das Baukasten-Prinzip ermöglicht eine besonders effiziente Nutzung des vorhandenen Codes bei der Layouterstellung.

Mit den Grundbausteinen wird ein Basislayout mit voller Funktionalität bereitgestellt. Durch zusätzliche Bausteine kann diese Basis ergänzt oder modifiziert werden. Diese CSS-Bausteine sind universell einsetzbar. Einmal geschrieben und gestestet, können sie bei Bedarf eingebunden werden und stehen für zukünftige Projekte zum Einsatz bereit.

Zwei Beispiele dafür sind einfache Variationsmöglichkeiten eines Screenlayouts mittels der basemod-Dateien oder auch die vorgefertigten Druck-Stylesheets.

Flexibilität in der Layoutgestaltung

Die Gestaltungsmöglichkeiten des Frameworks gehen weit über ein einfaches 3-Spalten-Layout hinaus. Die flexible Basis ermöglicht eine beliebige Anordnung der Inhaltsspalten am Bildschirm. Der dynamische Charakter der verwendeten float-Umgebungen ermöglicht die Modifikation hin zu 1- oder 2-Spalten-Layouts mit nur wenigen Handgriffen. Spalten- und Layoutbreiten können in beliebigen Maßeinheiten definiert werden. Die Mischung unterschiedlicher Einheiten bei den Spaltenbreiten ist dabei problemlos möglich.

Robuster Code

Der Aufbau der XHTML- und CSS-Struktur der Grundbausteine garantiert eine fast vollständige Unabhängigkeit vom Aufbau der später eingefügten Inhalte. Die Kapselung der Hauptelemente der Webseite in separaten DIV-Containern sichert die korrekte Positionierung der Elemente am Bildschirm, unabhängig von der Art der späteren Nutzung der Container.

Weiterentwicklung / Updates

Das YAML-Framework wird beständig weiterentwickelt. Alle Änderungen/Erweiterungen jeder neuen Version werden im Changelog zusammengefasst, ggf. wird auf weiterführende Informationen innerhalb der Dokumentation verwiesen.

Im Rahmen der Um- oder Neugestaltungen YAML-basierter Websites - oder falls die erweiterte Funktionalität neuerer YAML-Version innerhalb bestehender Seiten benötigt werden, sind Updates der Framework-Basis dank der funktionellen Gliederung der CSS-Bausteine jederzeit möglich. Die Trennung von YAML- und Nutzer-CSS erlaubt im Idealfall ein unproblematisches Update der Framework-Version.

Wichtig: YAML basiert seit langem auf robusten und stabilen Grundbausteinen. Von der prinzipiellen Updatemöglichkeit sollte bei bestehenden Webseiten dennoch nicht zum Selbstzweck Gebrauch gemacht werden. Ein fehlerfrei funktionierendes CSS-Layout benötigt keine monatlichen Sicherheitspatches!

Ein Update der Framework-Basis ist dann empfehlenswert, wenn sich bekannte CSS-Probleme einer bestehenden Webseite durch eine neue YAML-Version beseitigen lassen.