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.
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.