Von Gridlayouts und CSS Frameworks

Das Thema beschäftigt mich immer noch schwer, aber durchaus berechtigt. Immerhin erleben wir seit rund zwei Jahren ein Revival von rasterbasierten Layouts. Endlich haben wir nun auch die Browser dazu, nachdem der Internet Explorer 7 wenigstens größtenteils mit Spezifikationen von CSS 2.1 umgehen kann.

Seit rund drei Monaten beschäftige ich mich nun mit einer adäquater Lösung für eine stabile, flexiblem und nicht zuletzt möglichst semantische Umsetzung für Grid Based Layouts – eine eierlegende Wollmichsau.

Eines Vorweg: es gibt diese Lösung nicht!

Zu Unterschiedlich die sind Anforderungen an die Browserausgabe unter Berücksichtigung von Endgerät, Auflösung und nicht zuletzt des Browsers selbst. Und dies ist nur ein Eckpunkt einer langen Liste von Einschränkungen und einzugehenden Kompromissen.

Hilfe gibt es reichlich Hilfestellung anhand von Frameworks, die zumindest die Grundidee aufnehmen und das Entwicklerleben leichter gestalten können. Allerdings kommt man bei der Verwendung vorgefertigter Lösungen schnell in den Bereich der bereits angesprochenen Kompromisse.

Mit 960 Grid System und Blueprint CSS gibt es zwei Out of the Box CSS Frameworks, die der Grundanforderung nach rasterbasierten Layouts folge leisten. Allerdings, und hier liegt der Hund begraben, mit reichlich Einschränkungen. Dies betrifft insbesondere dem Ruf nach einem semantischem Code, dem keines der beiden Frameworks nachkommt. Zwar gibt es erste Bestrebungen, Blueprint von der ursprünglich pixelbasierten Ausrichtung in die relative Definition der Container, anhand von em Größenangaben zu überführen. Semantischer wird der Aufbau der Stylesheets allerdings durch diese Maßnahme noch lange nicht.

Einen etwas anderen Ansatz verfolgt YUI Grids CSS. Hier wird die Semantik schon eher verfolgt, allerdings auf Kosten der Flexibilität, die Blueprint oder 960 Grid bieten. Dafür ist YUI Grids CSS sehr vielversprechend in Bezug auf einer zeitgemäßen Umsetzung von Stylesheets.

Über YAML habe ich mich bereits mehrfach geäußert. Meiner Ansicht nach ist YAML nach wie vor der erwachsenste Ansatz eines flexiblem CSS Frameworks mit vielseitigen Einsatzmöglichkeiten. In Bezug auf rasterbasierter Layoutgestaltung, erreicht allerdings auch YAML seine Grenzen. Der sematische Ansatz ist deutlich zu erkennen, als einzig mir bekanntes Frameworks werden hier auch Subtemplates bereits Out of the Box angeboten. Allerdings sieht man YAML deutlich an, dass es ursprünglich für andere Zwecke entwickelt wurde und dort spielt es auch seine Stärken aus.

Momentan herrscht ein Status Quo: Liquide oder flexible Umsetzungen von Grid Layouts sind enorm aufwendig und erfordern neben viel Zeit und Know How, mehr als nur ein gutes Framework, falls mehr Individualität gewünscht wird.

Pixelbasierte Layouts bekommen immer mehr den Ruf einer unzeitgemäßen Technik; in Betracht der zunehmenden Verbreitung von mobilen Endgeräten erscheint dieser Vorwurf nur allzu richtig. Dabei sind es gerade die CSS Frameworks wie Blueprint oder 960 Grid, die anhand von Pixel Größenangaben derzeit die flexibelsten Möglichkeiten zur Gestaltung von Grid Based Layouts ermöglichen. Leider wird dies durch überflutete, nicht semantische CSS Definitionen teuer erkauft.

Tags: yui, css, grids, framework, Design, Branche, blueprint, 960, yaml