Entwicklung & Design

Layout-Frameworks für Webentwickler: CSS- und Grid-Frameworks erleichtern professionelle Webentwicklung

Seite 3 / 5

Der dritte Vertreter ist YUI Grids [6]. Der CSS-Ableger von Yahoos umfangreicher JavaScript-Bibliothek YUI wurde bereits im Februar 2006 veröffentlicht. Das System basiert auf insgesamt sechs zweispaltigen Template-Varianten, deren Gesamtbreite auf 750, 950, 974 Pixel oder einen wählbaren Prozentwert festgelegt werden kann. Mit YUI Grids kann man daher sowohl fixe als auch fluide Layouts erstellen. Erst die weitere Unterteilung der beiden Spalten erfolgt durch Grid-Bausteine, die eine Unterteilung in zwei bis vier Teilbereiche erlaubt. Zudem können diese Bausteine ineinander verschachtelt werden, womit auch komplexe Layouts einfach realisiert werden können. Auch YUI Grids beschränkt sich auf die Unterstützung bei der Erstellung des Screenlayouts und stellt darüber hinaus neben einer Reset-Komponente keine weitere Funktionalität (z. B. für die Druckausgabe) bereit.

Darüber hinaus finden sich im Netz zahlreiche Ableger (Clones) von Blueprint CSS und 960.gs. Hierbei handelt es sich mehrheitlich um geringfügig modifizierte Varianten der vorgestellten Frameworks mit weitgehend identischem Funktionsprinzip (z. B. Boilerplate, Typogridphy oder Emastic).

Zusammenfassung: Grid-Frameworks
Sinn und Zweck eines Grid-Frameworks sind schnelle Ergebnisse in
der Anwendung in den Grenzen des Vorgegebenen.

CSS-Frameworks

Der zweite Weg, den Anwender bei der Layouterstellung zu unterstützen, besteht darin, ihm ein funktionales Layoutgerüst zur Verfügung zu stellen, das er unter Einhaltung eines Regelwerks frei gestalten und erweitern kann. Auf diese Weise entsteht eine Entwicklungsumgebung, innerhalb derer sich der Webentwickler gestalterisch frei entfalten kann.

Ein solches Layoutgerüst beinhaltet oft benötigte Seitenelemente (z. B. Header, Footer, Inhaltsbereich, Sidebar). Als Anwender positioniert man Container, definiert Breiten, Höhen und Abstände per CSS und fügt auf diese Weise die einzelnen Bausteine in immer wieder neuen Variationen zusammen. Aufgabe des Frameworks (und zugleich die große Kunst) ist es, dafür ein möglichst vielseitig einsetzbares HTML-Gerüst sowie sinnvolle CSS-Klassen (Float-Clearing, Positionierung usw.) zu dessen Gestaltung bereitzustellen. Die eigentliche Erstellung eines Screenlayouts besteht also in der Anwendung dieses Regelwerks, um das vorhandene HTML-Grundgerüst nach den eigenen Wünschen per CSS zu gestalten.

Und damit ist der entscheidende Unterschied zwischen den beiden Ansätzen benannt. Denn die zuvor besprochenen Grid-Frameworks setzen auf die reine Anwendung des vorgegebenen Rasters zur Layoutgestaltung. Die Raumaufteilung der Seitenelemente wird durch ihre Position im Quelltext und der ihnen zugewiesenen CSS-Klasse bestimmt. Layouterstellung bedeutet also in erster Linie die Erstellung eines HTML-Dokuments, das CSS des Grids bleibt hingegen unberührt. Die Markup-Struktur eines solchen Layouts ist dem zeilen- und spaltenweisen Aufbau eines Tabellenlayouts sehr ähnlich.

Erstmals wurde der gedankliche Ansatz eines CSS-Frameworks im Mai 2005 von Mike Stenhouse in seinem Artikel „A CSS Framework“ [7] beschrieben. Dem Artikel liegt eine beispielhafte Implementierung zu Grunde, die unter der BSD-Lizenz veröffentlicht wurde und auf der Webseite heruntergeladen werden kann. Leider wurde dieses vielversprechende Projekt nicht weiterentwickelt und verharrt daher bis heute mehr oder weniger auf dem Stand eines „proof of concept“.

Das in Deutschland bekannteste CSS-Framework ist YAML (Yet Another Multicolumn Layout) [8], das im Herbst 2005 veröffentlicht wurde und nach über drei Jahren stetiger Weiterentwicklung mittlerweile in der Version 3.1 vorliegt.

YAML ist ein umfangreiches CSS-Framework zur Erstellung flexibler Layouts. Das System ist speziell darauf ausgerichtet, dem Anwender einerseits größtmögliche Freiheit in der Gestaltung seines Layouts zu geben und andererseits das Auftreten zahlreicher CSS-Bugs verschiedener Browser zuverlässig abzufangen. Ermöglicht wird diese Eigenschaft durch ein besonders robust angelegtes HTML-Grundgerüst für die Erstellung 2- und 3-spaltiger Layouts mit Kopf- und Fußbereich. Zusätzlich stellt YAML ein flexibles Grid-System zur Verfügung, das mit dem Spaltenkonzept kombiniert wird und somit auch komplexen Layoutaufgaben gewachsen ist.

Ein weiterer Schwerpunkt liegt auf der Barrierefreiheit. Das Framework beinhaltet bereits zahlreiche wichtige Elemente, wie beispielsweise Skiplinks, Formularbausteine und Navigationsbeispiele, die den technischen Anforderungen der Barrierefreiheit entsprechen und in der Praxis eine Erleichterung für Entwickler darstellen.

Zusammenfassung: CSS-Frameworks
Sinn und Zweck eines CSS-Frameworks ist die Bereitstellung einer möglichst leistungsfähigen Entwicklungsumgebung.
Bitte beachte unsere Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

2 Kommentare
Vladimir Carrer

I used google translate in order translate this article from German. I sow in the article that my framework Emastic is been called (clone) of Blueprint or 960.gs.

Here is little history:First came YAML but was to difficult to be understand, then Blueprint was based on ljworld.com layout (Frameworks for Designers) then came 960.gs with the same building logic like Blueprint. So everything is clone or copy of Blueprint. Or every framework based on „float“ is copy of Blueprint!?

There are different points of view I will say 960.gs is evolution of Blueprint.

When I build Emastic I wonted to be improvement of the other CSS Frameworks. It is the first lightweight framework(only 4kb) it is the first to implement easy fluid column, it is the first to implement 3 layout system and many other original solutions.

My advice is if you want to understand how one CSS Framework works open the code and try to understand it. If you like the code and the logic of that framework, use it.

Dirk Jesse

Hi Vladimir, thank you for your comment. Of course allmost every framework development makes some improvements but that wasn’t the key here. All mentioned grid frameworks are based on the same layout technique. Blueprint CSS and 960.gs seem to be the „big players“ that make CSS-based grid-layouts easy for everyone. Other frameworks like Emastic use the same techniques. Of course also YAML and YUI are using floats (Who doesn’t?) but there layout techniques differ from the the basic „grid“ solution as they provide more flexible column-based layout solutions – and are therefore a little more complex.
I fully agree with your advice. There’s no best or worst framework. Users should test them and use the one, that fits best to their needs and workflow.