Blog Divio 09 - behind the scenes Teil 2 - 96...

26/052009

Divio 09 - behind the scenes Teil 2 - 960 Grid

Beim zweiten Teil unserer "behind the scenes" Folgen, wollen wir euch das Grid basierende CSS Framework "960" vorstellen.

Herunter zu laden unter 960.gs. Im heruntergeladenen Zip-File findet man nicht nur das 3.6kb grosse CSS File sondern auch Vorlagen des Grids für Photoshop , Fireworks, Inkscape, Illustrator, OmniGraffle, Photoshop und Visio.

Das 960 Grid schafft eine gute Grundlage für die Zusammenarbeit zwischen Designer und Entwickler. Der Designer richtet seine "Inhalte" an den vorgegebenen Spalten aus. So braucht der Developer meistens gar keine Pixelangaben mehr und kann das Grundlayout in kürzester Zeit erstellen.

Grid CSS Installation

<link rel="stylesheet" type="text/css" media="all" href="deinPfad/960/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="deinPfad/960/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="deinPfad/960/text.css" />

Container

Das 960 Grid stellt zwei Container zur Verfügung. .container_12 und .container_16. Die Zahl steht für die Anzahl der Grid-Spalten. Beide Container-Arten haben eine eine fixe Breite von 960 Pixel.

Für unsere Seite haben wir das 16er Setup genommen. Hier ein Screenshot mit dem 960Grid:

Klassen

Das Framework bringt folgende Klassen mit sich:

.container_xx  //12 oder 16
.grid_xx  //breite z.B: .grid_4
.alpha  //entfernt linkes Margin
.omega  //entfernt rechtes Margin
.clearfix //cleart gefloatete Elemente
.clear //wird benutzt wenn man ein clearendes Element hat (Element wird nicht dargestellt)
.prefix_xx //fügt linkes "padding" hinzu z.B: prefix_2
.suffix_xx //fügt rechtes "padding" hinzu z.B: suffix_2

Beispiel einer HTML Struktur

Will man nun z.B. ein zweispaltiges Layout in html umsetzen, bei dem die Linke Seite 4 Grid-Spalten breit und die rechte 12 ist, so würde dies wie folgt aussehen:

<div class="container_16">
  <div class="grid_4">sidebar</div>
  <div class="grid_12">main content</div>
</div>

Welches CSS Framework benutzt du?

Was denkt du über das 960 Grid? Wo siehst du die Vor- und Nachteile? Wir würden uns über deine Meinung freuen!

Weiterführende Links:

Behind the Scenes, css, Framework, Projekt, Tricks, xhtml

Comments

26/052009, 16:36

cerco schrieb:

hört sich spannend an! werd ich in aller bälde mal ausprobieren.

26/052009, 19:50

seb schrieb:

bevorzuge persönlich blueprint
http://www.blueprintcss.org/

27/052009, 02:07

simurai schrieb:

Hab schon davon gehört, sieht interessant aus.

Ich benutze praktisch immer ein 10 Pixel Grid. Also alles wird in Abständen von 10 Pixel platziert. Wenn man im Photoshop Shift+Pfeiltaste drückt, dann verschiebt sich das Element genau um 10 Pixel. Dadurch kann man schnell die Layouts ändern ohne immer die Abstände messen zu müssen.

27/052009, 09:01

chris schrieb:

sieht sehr interessant aus.

bei uns setzen wir bis anhin meistens http://www.yaml.de/ ein. yaml basiert auf den aktuellen webstandards und ist ausgerichtet auf zugängliche webseiten (accessibility), hat ein robustes und flexibles layoutkonzept, ist modularer aufgebaut und hat anwenderorienterte funktionaliät.

kennt ihr yaml? was ist eure meinung dazu?

27/052009, 09:12

Ralf schrieb:

Ein Nachteil des 960 Grids ist das es halt wirklich nur mit auf 960 optimierte Designs geht.

27/052009, 09:38

Christian Bertschy schrieb:

@Chris: YAML kennen wir gut. Haben wir auch bereits in mehreren Projekten eingesetzt (z.B. http://www.105tv.ch).

27/052009, 12:48

chris schrieb:

@Christian Bertschy: überlegt ihr euch auf 960 gird umzusteigen? welche vorteile bringt 960 grid? hält sich 960 grid an die webstandards? wie sieht es mit css hacks wie png fix, boxmodel hack etc. aus?

27/052009, 13:31

Martin Bommeli schrieb:

@Chris
ich denke das Killer-Argument ist die schnelle Umsetzungszeit und das schnelle Verstehen des Frameworks. Yaml ist halt im Vergleich zum 960 Grid schon einiges Komplexer und aufgeblasener. In den meisten Projekten ist es einfach zu mächtig.

Das Boxmodel fällt ja in dem Sinne weg. Weil du ja mit den Grid-Colums arbeitest. Es ist erst ein Problem wenn man anfängt selber breiten zu setzten/überschreiben.

Zum Thema PNG-Fix: Wir benutzen momentan das DD_belatedPNG JavaScript (http://www.dillerdesign.com/experiment/DD_belatedPNG/). Dieses wird dann nur für IE6 angehängt. Es unterstützt unter anderem background-position und background-repeat.

28/052009, 13:59

chris schrieb:

@Martin: danke für die inputs, muss es mir wirklich mal reinziehen... btw: cooles konzept mit eurem blog, gefällt mir gut... haltet die ohren steif.