10
Jan
Arbeiten mit CSS Grid Systems
CSS Framework und Grid Systems sind noch immer sehr umstritten.
Ein Großteil der Frontend Entwickler lehnt die Verwendung dieser kleinen Frameworks ab, weil CSS ja nicht so schwer ist und man lieber selbst die Kontrolle über den CSS Code behalten sollte. Außerdem wird es als großer Nachteil empfunden, sich an ein festes Raster zu binden.
In diesem Beitrag möchte ich zeigen, wie die Verwendung eines Grid Systems die Zusammenarbeit in einem Team von Screendesignern und Entwicklern erleichtern kann.
Fallbeispiel: Umsetzung eines Bloglayouts mit 960.gs
Um das Arbeiten mit einem Grid System zu zeigen, habe ich mich für das 960 Grid System entschieden. Dieses kleine Framework ist sehr schlank, es bringt neben wenigen Zeilen CSS für die Typografie nur Styles mit, die für das Raster benötigt werden. Außerdem finde ich es sehr elegant, wie das 960 Grid Probleme in IE 6 und 7 einfach umgeht, anstatt Bugfixes mitzuliefern.
Schon beim Entwurf das richtige Raster wählen
Damit die Arbeit mit einem Grid System wirklich Sinn macht, ist es wichtig, schon das Layout in dem selben Raster zu erstellen, in dem auch der Entwickler später das Design in HTML und CSS umsetzt. Hier gilt natürlich: mehr Spalten geben dem Designer mehr Möglichkeiten zur Gestaltung.
Noch bevor das Screendesign erstellt wird, sollte sich das Team also einig sein, ob nun 12, 16 oder vielleicht 24 Spalten gebraucht werden. Dafür liefert das 960 Grid System bereits Templates mit entsprechenden Hilfslinien für alle gängigen Programme wie Photoshop und Fireworks mit. Wer nicht gleich am Bildschirm, sondern erstmal mit Stift und Papier loslegen will, für den gibt es auch Sketch Sheets zum ausdrucken.
Für das einfache Bloglayout verwende ich ein Raster aus 12 Spalten.
Los geht’s: Die Umsetzung mit 960.gs
Ist das Screendesign fertig und die PSD als Vorlage zur Umsetzung auf dem Schirm, würde man normalerweise alle Elemente möglichst pixelgenau ausmessen, um die Breiten und Abstände in CSS festzulegen. Dabei kommt es nicht selten vor, dass der Screendesigner später um Korrektur bittet, weil zum Beispiel die Sidebar ein oder zwei Pixel zu nah am Inhalt sitzt.
Mit dem 960 Grid geht das etwas schneller und einfacher. Anhand der Hilfslinien erkennt man sofort, über wie viele Spalten sich die einzelnen Elemente im Raster erstrecken. Die Abstände zwischen den Spalten sind immer gleich. So spart man sich das pixelgenaue Ausmessen der Elemente.
Das Grundlayout ist sehr schnell in HTML erstellt, ohne selbst eine Zeile CSS zu schreiben. Am Anfang braucht man nur die Klassen, zu denen das 960 Grid System alle nötigen CSS Eigenschaften mitbringt.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>960 Grid Example</title> <link rel="stylesheet" href="grid/reset.css"> <link rel="stylesheet" href="grid/text.css"> <link rel="stylesheet" href="grid/960.css"> <link rel="stylesheet" href="style.css"> </head> <body> <div id="Wrapper" class="container_12"> <div id="Header"> <div class="grid_8"> <h1>Another Blog</h1> </div> <div class="grid_4"> <h3>Testing the 960 Grid System</h3> </div> <div class="clear"></div> </div> <div id="Teasers" class="clearfix"> <div class="grid_4"> <h6>Why do we use it?</h6> <p>...</p> </div> <div class="grid_4"> <h6>Why do we use it?</h6> <p>...</p> </div> <div class="grid_4"> <h6>Why do we use it?</h6> <p>...</p> </div> </div> <div id="Main"> <div id="Articles" class="grid_8"> <div class="article"> <h3>Lorem Ipsum</h3> <p>...</p> <p>...</p> </div> <div class="article"> <h3>Lorem Ipsum</h3> <p>...</p> <p>...</p> </div> <div class="article"> <h3>Lorem Ipsum</h3> <p>...</p> <p>...</p> </div> </div> <div id="Blogroll" class="grid_4"> <p>...</p> <ul> <li>Lorem</li> <li>Ipsum</li> <li>Dolor</li> <li>Sit</li> <li>Amet</li> </ul> </div> <div class="clear"></div> </div> <div id="Footer"> <div class="grid_4 prefix_8"> © 2011 My Blog </div> <div class="clear"></div> </div> </div> </body> </html>
Im Beispiel ist eine Box mit drei gleich breiten Kolumnen zu sehen (div id=“Teasers“). Das Raster ist in zwölf Spalten unterteilt, also bekommen die drei Kolumnen jeweils die Klasse „grid_4“. Diese Klasse besitzt die CSS-Eigenschaften display:inline, float:left, margin-right:10px, margin-left:10px und width:300px. Die Eigenschaft display:inline wird verwendet, um den Double-Margin-Bug im Internet Explorer zu umgehen, denn nur bei Block-Elementen werden die Abstände nebeneinander liegender Elemente verdoppelt. Die umgebende Box besitzt die Klasse „clearfix“, um den Fluss aufzuheben.
So lassen sich im Grunde alle mehrspaltigen Elemente umsetzen, ohne sich um pixelgenaue Breitenangaben und Browserbugs Gedanken zu machen. Ein Bookmarklet namens 960 Gridder macht das Raster mittels Hilfslinien direkt im Browser sichtbar:
Nun kann man beginnen, die eigenen CSS Styles für Typografie, Hintergrundfarben, Grafiken usw. zu schreiben. Nach nur ca. 60 Zeilen eigenen CSS Codes sieht das Beispiel dann so aus wie in der PSD Vorlage.
960 Grid anpassen
Ein oft genannter Nachteil des 960 Grid Systems ist die Gesamtbreite. Die beträgt nämlich immer, wie der Name schon sagt, 960 Pixel. Aber das lässt sich auch ziemlich leicht ändern. Auf 960.gs findet sich ein Link zum Custom CSS Generator. Damit lässt sich ein eigenes Grid zusammenklicken, das auf dem 960 Grid basiert. Gesamtbreite, Anzahl der Spalten und Abstände zwischen den Spalten kann man hier nach eigenen Wünschen festlegen. Sogar ein komplett flexibles Raster ist möglich, wie hier zu sehen.
Fazit
Bei größeren Projekten, an dem mehrere Personen an der Gestaltung und Entwicklung des Frontends beteiligt sind, muss es bestimmte Gestaltungsrichtlinien geben. Oft findet man diese in Form von Styleguides, die bei der Erstellung der Screendesigns beachtet werden. CSS Frameworks oder Grid Systems können darüber hinaus dafür sorgen, dass man sich auch bei der Umsetzung in HTML und CSS genauer im Rahmen des Styleguides bewegt. Wenn Screendesigner und Entwickler sich vor der Umsetzung auf ein Raster festlegen, können Abweichungen des Endprodukts von den Screendesigns vermieden werden.
Ob man nun eines der vorhandenen Frameworks wählt oder gleich selbst eins nach den eigenen Bedürfnissen schreibt: Man kann, wie auch mit Frameworks, in allen möglichen Programmiersprachen sehr viel Entwicklungszeit sparen und das Auftreten typischer CSS Bugs verhindern.
Alle, die ein anderes CSS Framework favorisieren oder eine Meinung zu CSS Frameworks im Allgemeinen haben, sind herzlich zum Kommentieren eingeladen.
Alex schrieb am 14. Januar 2011 um 11:11 Uhr:
Sehr informativ und hilfsreich!
Danke, Carlo.
Uwe schrieb am 3. Februar 2012 um 16:58 Uhr:
das klingt alles recht spannend, Carlo. Ich habe von griddesign erst gestern erfahren und habe mich nun entschlossen, mich Stueck fuer Stueck heranzuarbeiten. Ich habe noch eine ungenutzten Platz auf http://www.mamoteam.de, den ich dafuer nutzen werde, Dein Artikel war fuer mich sozusagen die Initialzuendung.
Danke und Gruss Uwe