960-Grid-System – Eine CSS-Bibliothek für Spaltenlayouts
Das Internet und dessen primär HTML-basierter Inhalt ist heute allgegenwärtig. Dem Einstellen von eigenen Inhalten stehen dabei keine fundamentalen Hindernisse entgegen - (kostenlosen) Webspace gibt es in Hülle und Fülle. Den Inhalt für die Webseite zu schreiben, ist in der Regel nicht das Problem, eine ansprechende Formatierung dann schon eher. Hier hilft die CSS-Bibliothek 960-Grid-System.
Im Print-Bereich werden schon lange Gestaltungsraster eingesetzt. Dabei wird der Inhalt anhand (nicht sichtbarer) Rasterlinien auf der Seite ausgerichtet. Dieses bewährte Konzept lässt sich auch sehr gut auf HTML-basierte Webseiten übertragen.
CSS macht es möglich
In der »Sturm und Drang«-Zeit des Webs wurden mehrspaltige Layouts gerne mit Tabellen realisiert – was heute zurecht als verpönt gilt. Gemäß der Maxime »Trennung von Form und Inhalt« werden HTML-Seiten mit Hilfe von Cascading Style Sheets (kurz: CSS) in Form gebracht. Nun ist das Schreiben von eigenen Style Sheets grundsätzlich nicht weiter schwierig, kann aber, je nach gewünschtem Ergebnis, doch recht komplex werden. Und gerade Einsteiger und Gelegenheitswebdesigner tun sich manchmal schwer, Elemente auf der Webseite wie gewünscht zu positionieren.
Hier kommt das 960-Grid-System ins Spiel. Dieses definiert in einer CSS-Datei verschiedene CSS-Klassen, mit deren Hilfe man den Inhalt schnell und einfach in Spalten ausrichten kann. Dies ist natürlich nicht nur für Einsteiger interessant, sondern ermöglicht auch professionellen Webdesignern, schnell und einfach zu einem Ergebnis zu kommen.
960 Pixel Breite
Das 960-Grid-System setzt auf einen 960 Pixel breiten Darstellungsbereich. Dieser wird automatisch zentriert auf dem Bildschirm dargestellt. Innerhalb dieser 960 Pixel kann die CSS-Bibliothek entweder 12-, 16- oder 24-spaltige Layouts erstellen. Dabei können Spalten natürlich beliebig zusammengefasst werden. Eine Reihe von Webseiten – u.a. auch die des Fedora-Projekts – welche 960-Grid-System nutzen, sind auf der Homepage der CSS-Bibliothek aufgelistet.
Download des 960-Grid-Systems
Bevor es los geht, werden die notwendigen CSS-Dateien benötigt. Auf der Homepage des Projekts findet sich der Download prominent verlinkt. Hier lädt man allerdings eine ca. 4 MB große zip-Datei herunter. Diese enthält viel mehr als nur die CSS-Dateien. In dem Archiv sind unter anderem auch Layoutvorlagen für z.B. Gimp, Inkscape, Flash und diverse kommerzielle Design-Programme enthalten. Die eigentlichen CSS-Dateien befinden sich im Ordner /code/css. Benötigt werden drei Dateien: 960.css, text.css und reset.css. Alternativ kann man nur diese drei Dateien bei Github herunterladen.
