Eine Einführung in das 960 Gridsystem
Tutorial / 15. Dezember 2009“Gridsysteme für CSS? Sowas braucht man doch nicht, das ist doch sowieso einfach…” – habe ich mal von einem österreichischen Mitpraktikanten gehört, gefolgt von einer langen Liste von Argumenten, welche mir fast ein schlechtes Gewissen gemacht haben, dass ich mich überhaupt damit beschäfigt habe. Aber nur “fast”, denn Gridsystem sind einfach großartig, einfach und hilfreich in jeder Hinsicht. Das System mit welchem ich mich hauptsächlich beschäftigt habe ist das 960 Gridsystem. Ein Tutorial gibt es nach dem Klick.
960 deshalb, weil hier davon ausgegangen wird dass 960px die bestmögliche Breite für die Wiedergabe auf dem Bildschirm ist. Seitdem ich ein Netbook besitze kann ich das im übrigen bestätigen, Seitliches scrollen ist absolut nervig. Ich werde mich hier nun an einem Tutorial versuchen, um darzustellen wie einfach es ist einen schnellen Webseiten Prototyp mithilfe des 960 Gridsystems zu erstellen.
Ausblick
Zuerst einmal will ich zeigen was hier versucht wird zu erreichen:
Download
Alle Dateien können hier heruntergeladen werden.
Grundlagen
Fangen wir nun mit den Basiskenntnissen an. Zuerst sollte man wissen dass das Layout in 12, 16 (und jetzt auch 24) Spalten unterteilt wird. In meinen Beispiel wird mit dem 12 Spalten System gearbeitet, welches eigentlich auch für die meisten Projekte ausreichen sollte. Diese 12 Spalten sind sind mit verschiedenen Weitenangaben unterteilt:
1. 60px
2. 140px
3. 220px
4. 300px
5. 380px
6. 460px
7. 540px
8. 620px
9. 700px
10. 780px
11. 860px
12. 940px
Auffallen wird hierbei, dass das 12 Spaltensystem nur eine Breite von 940px besitzt. Aber warum rede ich dann die ganze Zeit von 960px? Nun, es wird beim Einfügen in den HTML Code ein Seitenabstand von 10px eingerechnet (margin: 0 10px). Werden nun alle Grids in einer Reihe zusammengesetzt entsteht eine Gesamtbreite von 960px
Beispiel: Grid_3 (220px +20px) + Grid_3 (220px +20px) + Grid_6 (460px +20px) = Grid_12 (960px)
Entsprechende Layoutvorlagen zu allen entsprechenenden Grafikprogrammen sind im übrigens im Downloadpaket enthalten.
Das HTML
Gut, soviel zum Einstieg, sofern hier noch jemand mitkommt, wenn ihr bis hier hin gelesen habt, ab jetzt wird alles sehr sehr einfach. Ich habe mal folgendes HTML Grundgerüst zusammengeschrieben.
< !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <title>Example Page for the 960 Grid System - by Florenz.co.uk</title> </head> <body> <div id="wrapper"> <div id="header"><h1>This is a fancy title.</h1></div><!--end header --> <div id="navigation"> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Info</a></li> <li><a href="#">Imprint</a></li> </ul> </div><!--end navigation--> <div id="content_feature"> <h2>Headline 1</h2> <img src="../img/960ss.png" alt="960ss"/> <p></p> </div><!--end content --> <div id="content1"> <h2>Headline 2</h2> <p>Content</p> </div><!--end content--> <div id="content2"> <h2>Headline 3</h2> <p>Content</p> </div><!--end content--> <div id="content3"> <h2>Headline 4</h2> <p>Content</p> </div><!--end content--> <div id="footer">Copyright 2009 by myself.</div><!--end footer--> <div class="clearing"></div> <!-- cleart den wrapper --> </div><!--end wrapper --> </body> </html>
Das ganze sieht dann so aus (mit Blindtext):
Einfügen der CSS Dateien
Gut, soweit so gut, fügen wir nun die CSS Dateien aus dem Downloadpaket, sowie unsere eigenen, im Header an:
... <link href="../css/style.css" media="screen" rel="stylesheet" type="text/css" /> <link href="../css/960.css" media="screen" rel="stylesheet" type="text/css" /> <link href="../css/reset.css" media="screen" rel="stylesheet" type="text/css" /> <link href="../css/text.css" media="screen" rel="stylesheet" type="text/css" /> ....
Neben unserer eigenen Style.css, haben wir also noch 3 zusätzliche Dateien.
- 960.css – Das Gridsystem
- reset.css – CSS welches alle Elemente auf 0 setzt
- text.css – Typographie, kann man nutzen, muss man nicht, werd ich hier aber trotzdem
Wir wir sehen, hat es schon Auswirkungen auf das Aussehen unserer Seite, da die reset.css und die text.css schon direkt eingreifen, aber Layout kann man dieses noch nicht nennen. Kein Wunder, die Klassen aus der 960.css sind noch ins Layout eingearbeitet.
Anzahl der Spalten definieren
Aber woher soll die Webseite nun wissen, ob ich nun das 12, 16 oder 24 Spalten Layout nutze? Dieses teilen wir durch das Hinzufügen der Klasse container_X im Wrapper Container mit. Wobei X für die Anzahl der Layoutspalten steht. So wird also aus…
<div id="wrapper"> ... </div>
… dann…
<div id="wrapper" class="container_12"> ... </div>
….was zu folgenden Ergebnis führt:
Zuweisen der Gridklassen
Der nächste Schritt ist nun das Zuweisen der Breite durch die Klasse .grid_X.
Beispiel:
<div id="header" class="grid_12"> ... </div> //Der Header bekommt die volle Gridbreite <div id="navigation" class="grid_12"> ... </div> //Ebenso die Navigation <div id="content_feature" class="grid_12"> ... </div> //Der Featurebereich bekommt dann einfach auch 12 Spalten <div id="contentX" class="grid_4"> ... </div> //Contentbereiche bekommen 4 Spalten.
Rufen wir jetzt die Seite auf sehen wir folgendes Ergebnis.
Alpha und Omega
Soweit ganz einfach, aber was ist mit dem Bild? Es hängt über den Text und da soll es schon aus ästhetischen Gründen nicht hin. Dieses Problem könnte man jetzt mit floats lösen, dazu müssen nun aber Innenabstände neu positioniert werden, da wie bereits erwähnt, automatisch Seitenabstände hinzugefügt werden, ansonsten würde uns das Layout auseinanderbrechen. Aber auch hier bringt 960 Framework bereits eine Lösung mit: alpha und omega, welche zu den .grid_X Klassen hinzugefügt werden.
<div id="content1" class="grid_12"> <h2>Headline 1</h2> <img src="../img/960ss.png" class="grid_3 alpha"/> <p class="grid_9 omega">...Content ... .</p> </div><!--end content -->
Das Bild ist nun das alpha, heisst, dass der Abstand zur rechten Seite auf Null gesetzt wurde. Das gleiche bei omega, bloss auf der linken Seite. Und das ist dann auch schon das Endergebnis, eine saubere Seite, ohne viel Aufwand, erstellt in 5 Minuten.
Sonstiges
Das Beste, man muss sich auch nicht mehr um die üblichen IE6 Fehler kümmern, da das Layout dort genauso aussehen sollte (Was ich dank Mac allerdings nicht testen konnte).
Leider gibt es auch einen nicht ganz zu unterschätzenden Nachteil, das 960Gridsystem hat nicht ohne Grund diesen Namen, es kann NUR auf Layouts mit einer festen Breite von 960 Pixeln angepasst werden. Sofern nun andere Breiten realisiert werden, ist dieses System leider nicht einsetzbar, wobei hier aber auf diverse Generatoren für Custom Grids zurückgegriffen werden kann, Ein HTML Generator und ein CSS Generator findet sich hier. Ich habe diese beiden Beispiele nicht getestet, aber ich denke das System wird dasselbe sein.
Abschliessende Worte: Dieses war mein erstes Tutorial, sollte es hilfreich sein, hinterlasst doch einen Kommentar, quasi als Motivation. Sollte ich wesentliche Fehler gemacht habe oder ihr kennt noch bessere Einsatzmöglichkeiten für dieses System, auch nicht scheuen was zu schreiben!
14 Kommentare
3 Pingbacks
-
[...] to Watch in 2010 | Spin Magazine Online Mit Nneka drauf.Kiss Konzertfotografie – NerdcoreEine Einführung in das 960 Gridsystem – Flrnz.Kabineninferno » Blog Archive » Alicia Keys bei X-FactorInterview: Jan Delay, [...]
-
[...] 960 Grid Templates finden. Tutorial: Einsatz und Programmierung des 960 Grids. Webdesign mit Raster, eine super Anleitung. Alles, alles [...]
-
[...] 960 Grid System Wieso 960 ? Es wird davon ausgegangen das 960px die best möglichste Breite ist, für die Anzeige einer Webseite. Eine Einführung und ein Tutorial, das euch hilft einen Überblick zu bekommen und die Anwendung dieses Systems zu verstehen findet ihr unter http://blog.florenz.co.uk/tutorial/960-gridsystem-einfuehrung-tutorial-anleitung/. [...]
Schreibe einen Kommentar
[...] to Watch in 2010 | Spin Magazine Online Mit Nneka drauf.Kiss Konzertfotografie – NerdcoreEine Einführung in das 960 Gridsystem – Flrnz.Kabineninferno » Blog Archive » Alicia Keys bei X-FactorInterview: Jan Delay, [...]
[...] 960 Grid Templates finden. Tutorial: Einsatz und Programmierung des 960 Grids. Webdesign mit Raster, eine super Anleitung. Alles, alles [...]
[...] 960 Grid System Wieso 960 ? Es wird davon ausgegangen das 960px die best möglichste Breite ist, für die Anzeige einer Webseite. Eine Einführung und ein Tutorial, das euch hilft einen Überblick zu bekommen und die Anwendung dieses Systems zu verstehen findet ihr unter http://blog.florenz.co.uk/tutorial/960-gridsystem-einfuehrung-tutorial-anleitung/. [...]
Schönes Tutorial. Ich glaube, das könnte ich für die Umsetzung der Seite für meinen Report ganz gut nutzen. Besten Dank!
Hi.
Ich habe erst vor ein paar Stunden von 960 Grid System gehört und stand im tiefen, tiefen Wald.
Dein Toturial hat mich wieder raus geführt, wenigstens ist jetzt die Idee hinter diesem System verständlich und ich werde es auf jeden Fall mal testen, klingt sehr interessant.
Danke für die Mühe und bis später. ^^
Sehr informatives Tutorial – einfach und schnell alles auf den Punkt gebracht.
Vielen Dank & weiter so.
Besten Dank für die Einführung in 960gs!
Ich kannte das 960System bisher nur im Rahmen der Designentwicklung – nicht in Verbindung mit dem Code!
Danke für das überzeugende Beispiel, so macht Coding doch Spaß =)
Hallo Florenz,
Vielen Dank für die super Einführung in das 960 Grid!
Ein schlechtes Gewissen wegen der Verwendung von Grids und Frameworks muss man ganz sicher nicht haben. Im Gegenteil. Nur manchmal hat ein Framework (wie z.B. YAML) einen derart massiven Überbau an “unnützem” Code, dass man auch viel Arbeit in die Anpassung (sprich Löschung von ungebrauchten Code) stecken muss.
Nach deiner Einführung und ein bisschen Testen bin ich überzeugt, dass 960 genau das richtige ist.
Viele Grüße aus München
Du hast das Grid System missverstanden. Die drei Spalten (content) stimmen nicht. Du kannst nicht drei Containern jeweils die gleiche ID geben.
Hallo Anver,
ja du hast recht. In den Beispielen habe ich dieses auch nicht getan, allerdings habe ich diese scheinbar in einem Aufräumwahn gelöscht. Vielen Dank für den Hinweis!
Hi,
Anschauliche Einführung, überzeugendes Tutorial, aber ich kann den Code nicht herunterladen. Springt immer auf die Startseite…
hi,
sehr anschaulich erklärt. funktioniert einwandfrei, bis auf den Download vom Code, wie Frank schon schrieb.
Hallo Florenz,
mensch bin ich froh, dass es solche typen wie Dich gibt!!!!
Leicht verständliches und super dokumentiertes Tutorial – Danke dafür!
Hallo und danke für das tolle Tutorial. Wirklich sehr verständlich erklärt.
Leider ist es jedoch nicht möglich, die CSS-dateien runterzuladen. Wär wirklich toll, wenn ihr dieses Problem beheben könntet.
Danke im Voraus
Vielen Dank für diese Einführung, das Gridsystem fasziniert mich schon länger und wollte ich mir eh schon länger anschauen :-)
Bin schon öfters über das 960 Framework gestolpert hab mir aber nie die Zeit genommen mich darein zu lesen – heute wars soweit und dein Tutorial ist nen praktischer Einstieg. Vielen Dank!