Eine Einführung in das 960 Gridsystem

Tutorial / 15. Dezember 2009

„Gridsys­teme für CSS? Sowas braucht man doch nicht, das ist doch sowieso ein­fach…” — habe ich mal von einem öster­rei­chi­schen Mit­prak­ti­kan­ten gehört, gefolgt von einer lan­gen Liste von Argu­men­ten, wel­che mir fast ein schlech­tes Gewis­sen gemacht haben, dass ich mich über­haupt damit beschä­figt habe. Aber nur „fast”, denn Gridsys­tem sind ein­fach groß­ar­tig, ein­fach und hilf­reich in jeder Hin­sicht. Das Sys­tem mit wel­chem ich mich haupt­säch­lich beschäf­tigt habe ist das 960 Gridsys­tem. Ein Tuto­rial gibt es nach dem Klick.

960 des­halb, weil hier davon aus­ge­gan­gen wird dass 960px die best­mög­li­che Breite für die Wie­der­gabe auf dem Bild­schirm ist. Seit­dem ich ein Net­book besitze kann ich das im übri­gen bestä­ti­gen, Seit­li­ches scrol­len ist abso­lut ner­vig. Ich werde mich hier nun an einem Tuto­rial ver­su­chen, um dar­zu­stel­len wie ein­fach es ist einen schnel­len Web­sei­ten Pro­to­typ mit­hilfe des 960 Gridsys­tems zu erstellen.

960.gs

Aus­blick


Zuerst ein­mal will ich zei­gen was hier ver­sucht wird zu errei­chen:
preview960

Down­load

Alle Dateien kön­nen hier her­un­ter­ge­la­den werden.

Grund­la­gen

Fan­gen wir nun mit den Basis­kennt­nis­sen an. Zuerst sollte man wis­sen dass das Lay­out in 12, 16 (und jetzt auch 24) Spal­ten unter­teilt wird. In mei­nen Bei­spiel wird mit dem 12 Spal­ten Sys­tem gear­bei­tet, wel­ches eigent­lich auch für die meis­ten Pro­jekte aus­rei­chen sollte. Diese 12 Spal­ten sind sind mit ver­schie­de­nen Wei­ten­an­ga­ben 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

Auf­fal­len wird hier­bei, dass das 12 Spal­ten­sys­tem nur eine Breite von 940px besitzt. Aber warum rede ich dann die ganze Zeit von 960px? Nun, es wird beim Ein­fü­gen in den HTML Code ein Sei­ten­ab­stand von 10px ein­ge­rech­net (mar­gin: 0 10px). Wer­den nun alle Grids in einer Reihe zusam­men­ge­setzt ent­steht eine Gesamt­breite von 960px

Bei­spiel: Grid_3 (220px +20px) + Grid_3 (220px +20px) + Grid_6 (460px +20px) = Grid_12 (960px)

Ent­spre­chende Lay­out­vor­la­gen zu allen ent­spre­che­n­en­den Gra­fik­pro­gram­men sind im übri­gens im Down­load­pa­ket enthalten.

Das HTML

Gut, soviel zum Ein­stieg, sofern hier noch jemand mit­kommt, wenn ihr bis hier hin gele­sen habt, ab jetzt wird alles sehr sehr ein­fach. Ich habe mal fol­gen­des HTML Grund­ge­rü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="content">
			          <h2>Headline 2</h2>
			          <p>Content</p>
			</div><!--end content-->
 
			<div id="content">
			          <h2>Headline 3</h2>
			          <p>Content</p>
			</div><!--end content-->
 
			<div id="content">
			          <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):

960step1

Ein­fü­gen der CSS Dateien

Gut, soweit so gut, fügen wir nun die CSS Dateien aus dem Down­load­pa­ket, sowie unsere eige­nen, im Hea­der 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 unse­rer eige­nen Style.css, haben wir also noch 3 zusätz­li­che Dateien.

  • 960.css — Das Gridsystem
  • reset.css — CSS wel­ches alle Ele­mente auf 0 setzt
  • text.css — Typo­gra­phie, kann man nut­zen, muss man nicht, werd ich hier aber trotzdem

960step3

Wir wir sehen, hat es schon Aus­wir­kun­gen auf das Aus­se­hen unse­rer Seite, da die reset.css und die text.css schon direkt ein­grei­fen, aber Lay­out kann man die­ses noch nicht nen­nen. Kein Wun­der, die Klas­sen aus der 960.css sind noch ins Lay­out ein­ge­ar­bei­tet.

Anzahl der Spal­ten definieren

Aber woher soll die Web­seite nun wis­sen, ob ich nun das 12, 16 oder 24 Spal­ten Lay­out nutze? Die­ses tei­len wir durch das Hin­zu­fü­gen der Klasse container_X im Wrap­per Con­tai­ner mit. Wobei X für die Anzahl der Lay­outspal­ten steht. So wird also aus…

<div id="wrapper"> ... </div>

… dann…

<div id="wrapper" class="container_12"> ... </div>

.…was zu fol­gen­den Ergeb­nis führt:
960step4

Zuwei­sen der Gridklassen

Der nächste Schritt ist nun das Zuwei­sen 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="content" class="grid_4"> ... </div> //Contentbereiche bekommen 4 Spalten.

Rufen wir jetzt die Seite auf sehen wir fol­gen­des Ergeb­nis.

960step5

Alpha und Omega

Soweit ganz ein­fach, aber was ist mit dem Bild? Es hängt über den Text und da soll es schon aus ästhe­ti­schen Grün­den nicht hin. Die­ses Pro­blem könnte man jetzt mit floats lösen, dazu müs­sen nun aber Innen­ab­stände neu posi­tio­niert wer­den, da wie bereits erwähnt, auto­ma­tisch Sei­ten­ab­stände hin­zu­ge­fügt wer­den, ansons­ten würde uns das Lay­out aus­ein­an­der­bre­chen. Aber auch hier bringt 960 Frame­work bereits eine Lösung mit: alpha und omega, wel­che zu den .grid_X Klas­sen hin­zu­ge­fügt werden.

	<div id="content" 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 rech­ten Seite auf Null gesetzt wurde. Das glei­che bei omega, bloss auf der lin­ken Seite. Und das ist dann auch schon das End­er­geb­nis, eine sau­bere Seite, ohne viel Auf­wand, erstellt in 5 Minuten.

preview960

Sons­ti­ges

Das Beste, man muss sich auch nicht mehr um die übli­chen IE6 Feh­ler küm­mern, da das Lay­out dort genauso aus­se­hen sollte (Was ich dank Mac aller­dings nicht tes­ten konnte).

Lei­der gibt es auch einen nicht ganz zu unter­schät­zen­den Nach­teil, das 960Gridsystem hat nicht ohne Grund die­sen Namen, es kann NUR auf Lay­outs mit einer fes­ten Breite von 960 Pixeln ange­passt wer­den. Sofern nun andere Brei­ten rea­li­siert wer­den, ist die­ses Sys­tem lei­der nicht ein­setz­bar, wobei hier aber auf diverse Gene­ra­to­ren für Custom Grids zurück­ge­grif­fen wer­den kann, Ein HTML Gene­ra­tor und ein CSS Gene­ra­tor fin­det sich hier. Ich habe diese bei­den Bei­spiele nicht getes­tet, aber ich denke das Sys­tem wird das­selbe sein.

Abschlies­sende Worte: Die­ses war mein ers­tes Tuto­rial, sollte es hilf­reich sein, hin­ter­lasst doch einen Kom­men­tar, quasi als Moti­va­tion. Sollte ich wesent­li­che Feh­ler gemacht habe oder ihr kennt noch bes­sere Ein­satz­mög­lich­kei­ten für die­ses Sys­tem, auch nicht scheuen was zu schreiben!

  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • MisterWong.DE
  • MySpace
  • StumbleUpon
  • Tumblr
  • Twitter

Datum: | Kategorie: Tutorial | Tags:


Verwandte Beiträge

Vegan?
Vegan?. Grr, nach 3 Stunden stupiden Copy and Paste alter Lastruper Dorffotos rettet sowas doch...
 Es lebt!
Da hat doch tatsächlich wer 6 Tage lang jeden Tag ein Stück Brot fotografiert und in einen Video...
 Apocalypse in Time and Space. Oder so
Archive.org ist schon eine wunderbare Seite, eine Seite wo man sich stundenlang durchklicken kann (schafft...
 You! — I hate you
Nein, ich möchte keinen meiner Leser sagen, dass ich ihn hasse, wirklich nicht. Aber dieses Video, dieser...
.

4 Kommentare

  1. Marius
    Marius schrieb am 16. Dezember 2009 um 11:12

    Schö­nes Tuto­rial. Ich glaube, das könnte ich für die Umset­zung der Seite für mei­nen Report ganz gut nut­zen. Bes­ten Dank!

  2. Michael
    Michael schrieb am 3. Januar 2010 um 17:40

    Hi.

    Ich habe erst vor ein paar Stun­den von 960 Grid Sys­tem gehört und stand im tie­fen, tie­fen Wald.
    Dein Totu­rial hat mich wie­der raus geführt, wenigs­tens ist jetzt die Idee hin­ter die­sem Sys­tem ver­ständ­lich und ich werde es auf jeden Fall mal tes­ten, klingt sehr interessant.

    Danke für die Mühe und bis später. ^^

  3. Benny
    Benny schrieb am 25. Januar 2010 um 03:53

    Sehr infor­ma­ti­ves Tuto­rial — ein­fach und schnell alles auf den Punkt gebracht.

    Vie­len Dank & wei­ter so.

  4. Peter
    Peter schrieb am 26. März 2010 um 19:46

    Bes­ten Dank für die Ein­füh­rung in 960gs!

Ein Pingback

  1. Links vom 16. Dezember 2009 | Testspiel.de sagt:
    16. Dezember 2009 um 19:03

    […] to Watch in 2010 | Spin Maga­zine Online Mit Nneka drauf.Kiss Kon­zert­fo­to­gra­fie – Nerd­co­re­Eine Ein­füh­rung in das 960 Gridsys­tem – Flrnz.Kabineninferno » Blog Archive » Ali­cia Keys bei X-FactorInterview: Jan Delay, […]

Schreibe einen Kommentar