CSS Grids für Responsive Design Projekte

Dieser Artikel ist ursprünglich am 30. 08. 2011 erschienen.
Das ist eine ganze Weile her. Der Inhalt ist wahrscheinlich nicht mehr aktuell.

In diesem Artikel habe ich eine Auswahl von Grid-Systemen zusammengestellt, die mir gut gefallen haben.
Es sind alles Raster, die einen Responsive-Design-Ansatz verfolgen, also mit einem Fluid Grid arbeiten und verschiedene Bildschirmgrößen bis hinunter zum Smartphone unterstützen.

The 1140px CSS Grid System

Dieses Framework wird ’s werden fürs nächste Theme. Ich habe mich in der Systematik gut zurechtgefunden, und für mich ist es der beste Kompromiss zwischen Funktionalität und Übersichtlichkeit.
The 1140px CSS Grid System

Simple Grid

Mit Simple Grid von Conor Muirhead kann man einen lästigen Nachteil der meisten Systeme loswerden: Die brauchen nämlich stets eine class „last“ für das letzte Element in einer Reihe. SimpleGrid kommt ganz ohne aus.
Simple Grid

320 and Up

Die Idee hinter diesem Framework von Andy Clarke ist es, mit der kleinsten Bildschirmgröße anzufangen, nach dem Motto „Mobile First“. Sobald klar ist, wie die Website auf dem Smartphone aussehen soll, arbeitet man sich Schritt für Schritt weiter nach „oben“.

Damit vermeidet man unnötige Ladezeiten fürs funknetzgebundene Smartphone. Denn alles, was per CSS-Anweisung display:none ausgeblendet wurde, wird trotzdem im Hintergrund geladen. Aber auch das Konzept der Seite gewinnt, wenn gleich zu Anfang klar ist, was denn die wenigen, zentralen Elemente der Seite sind, die auch auf dem Smartphone gut sichtbar und gut bedienbar sein sollen.

320 and Up

The Semantic Grid

The Semantic Grid gehört zur neueren Generation der CSS-Frameworks, die mit Javascript zusammenarbeiten. Keine umständlich benamten CSS-Klassen mehr, keine komplizierte Systematik, die man im Hinterkopf ständig nachhalten mus. Man arbeitet allein mit Angaben zu Spaltenbreite und Spaltenanzahl. Ein Javascript-Compiler erledigt den Rest und generiert am Ende die CSS-Datei.

Den Ansatz finde ich sehr spannend, allerdings möchte ich mich dazu noch etwas intensiver mit Javascript beschäftigen. The Semantic Grid gehört in den Zusammenhang des LESS-Framework.
The Semantic Grid

Das 960px-Grid-System ist nicht in meiner Liste, weil ich denke, dass man inzwischen über die 960px hinaus denken sollte. Die Breite von 960 Pixeln ist inzwischen zu schmal.
Nick La hat in seinem Blog webdesignerwall.com hat einen lesenswerten Artikel dazu geschrieben:  960 Grid System is Getting Old


Es gibt noch viel mehr spannende Frameworks und es kommen ständig neue dazu. Wenn Ihr einen Tipp habt, postet ihn bitte in den Kommentaren.