960 Grid System (960gs)

http://960.gs/demo.html

http://960.gs

Beispiel

<div class="container_12">
   <div class="grid_3 prefix_1 suffix_8"> 1 vorher, 3 breit, 8 nachher </div>
   <div class="grid_10>10 Breit </div><div class="grid_2"> 2 Breit</div>
</div>

960gs Klassen

Gesamtbreite des Layouts ist 960px. Man kann relative einfach breitere Ränder erzeugen.

.container_12 
.container_16

erzeugen einen Container für den ein 12er oder 16er Spalten Raster gilt (also 960px/16 = 60px oder 960/12 = 80px Raster)

.grid_1 
...
.grid16

erzeugen Inhalte verschiedener Breiten, die entweder im 12er oder 16er Raster liegen (je nachdem ob container_12 oder container_16 als Elternelement vorliegt.

.prefix_1 
...
.prefix_15 

Erzeugt leeren Raum (padding) mit der angegebenen Breite vor dem grid Element

.suffix_1 
...
.suffix_15 

Erzeugt leeren Raum (padding) nach dem grid Element

.alpha 

verhindert den 10px margin am Anfang eines Grid Elements

.omega 

verhindert den margin am Ende

.push_1
...
.push_15

Verschiebt ein grid Element um die angegebene Rasterzahl nach Rechts. Sieht evtl. aus wie bei suffix, jedoch wird kein padding erzeugt, sondern das Element verschoben.

.pull_1
...
.pull_15

Wie push, aber verschiebung nach links