BlogPimp GridEasy

Manches merkt man ja erst, wenn man mittendrin ist. So ging es mir auch diesmal. Ich habe ein neues Kunden-Projekt begonnen und habe natürlich GridEasy eingesetzt. Der Kunde möchte in seiner Website mehrere Bereiche haben, wo er Anzeigen in Standard-Formaten platzieren kann.

Also den Photoshop angeworfen, einen schwarzen Background angelegt, darauf einen weißen Layer, der die Ausmaße der Klasse .rahmen hat, dann eine Reihe von Hilfslinien gezogen für das sechspaltige Layout, dann Platzhalter für die Anzeigen erstellt, dann… Halt! Hier läuft was falsch. Es kann doch nicht sein, das ich alle diese Schritte jedesmal wieder machen muss! Da hab ich dann erstmal das Kundenprojekt für einen Moment zurückgestellt. Und mir eine Designhilfe für das Entwerfen von Webseiten mit GridEasy gebaut.

Basis ist ein Layer mit einem schwarzen Hintergrund, der dafür sorgt, das sich die neue Website schön davon abhebt. Darauf ein weißer Layer mit der Breite der Klasse .rahmen. Dann folgt eine Layer-Gruppe mit je einem Layer für die 10 verschiedenen Rastermaße von GridEasy. Und wo ich gerade so schön in Schwung war, kommt dann gleich noch eine Layer-Gruppe mit Zeilen-Raster-Layern im Abstand von 18, 20, 21 und 24 Pixel. Und dann noch eine Gruppe mit Layern für die gängigen Standard-Anzeigen-Maße und eine Gruppe mit den Maßen von eher seltener verwendeten Anzeigen-Größen.

Das Ergebnis ist eine PSD-Datei, in der ich bei einem neuen Projekt alles für den Start vorbereitet habe. Hintergrund und .rahmen ist schon aktiviert, ich aktiviere also je einen Layer für das Spaltenraster und den Zeilenabstand, blende eventuell noch die Layer für die verwendeten Anzeigengrößen ein, und schon ist die halbe Arbeit getan. Sehr nützlich. Und weil es nützlich ist, habe ich die PSD-Datei gleich gezipped und auf den Server geladen. Und Ihr könnt sie jetzt in der Sidebar runterladen. Für die Verwendung braucht ihr Photoshop ab Version 7 oder ein anderes Programm, das PSD-Dateien lesen kann und die Layer darstellen.

Schon kurz nach der Veröffentlichung der ersten Version von BlogPimp GridEasy erhielt ich mehrere Anfragen, ob es denn auch möglich wäre, mehrere Spalten-Raster in einer xHTML-Datei zu verwenden. Dies ging mit dieser Version nur eingeschränkt. Daher habe ich das Framework noch einmal überarbeitet. Jetzt sind beliebige Kombinationen der Spalten-Raster machbar.

Die neue Funktionalität beruht darauf, dass ich erstens die für alle Raster geltenden Teile der „grid-XX.css“-Dateien ausgelagert habe in die Datei „grid.css“. Zweitens habe ich in den „grid-XX.css“-Dateien die Klassen umbenannt. Das Schema dahinter ist ganz einfach. Aus “.raster-1“ wurde z. Bsp. für ein 3-Spalten-Raster “.raster-03-1“, für ein 8-Spalten-Raster “.raster-08-1“ Das heißt, Die Grundraster-Zahl wurde in den Namen der Klasse eingefügt. Auch in die „prefix“- und „suffix“-Klassen wurde die Grundraster-Zahl eingefügt.

Dadurch sind Raster-Kombinationen möglich, die vorher unmöglich waren, z. Beispiel eine 3-spaltige Seite mit einem 8-spalten Menü. Dafür muss ich einfach im Header der Seite zuerst die Datei „grid.css“ mit den allgemeinen Angaben laden, dann die Dateien „grid-03.css“ und grind-08.css“.

Die Beispiele in der Download-Datei sind angepasst, die Dokumentation wird gerade überarbeitet.