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.

Ach ja, ich habe da noch weitere Ideen für GridEasy, möchte jetzt aber erst einmal einige Projekte mit der aktuellen Version umsetzen. Bis dahin könnt Ihr mir auch gerne Eure Ideen und Wünsche in den Kommentaren hinterlassen.

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.

Weil ich faul bin, mag ich nicht immer wieder dasselbe tun. Deshalb konstruiere ich mir immer eine Krücke zur Vermeidung von wiederkehrenden Arbeitsschritten. Und für das Erstellen von Webseiten ist es die größte Wiederholung, ständig die selben grundlegenden CSS-Anweisungen zu schreiben. Aber dafür gibt es ja Frameworks, die einem genau das abnehmen sollen. Nur leider hab ich kein CSS-Framework gefunden, das so tickt wie ich. Und deshalb hab ich mir halt selbst eins gestrickt. Und hier zum Download angeboten. Mit Dokumentation und GPL-Lizenz. Viel Spaß damit.

Dies ist die allererste Version. Also schon gut, aber noch nicht fertig. Weiteres in Kürze (was auch immer das heißt, Zeitwahrnehmung ist ja so individuell) hier. Ach ja, wenn Ihr Ideen für sinnvolle Erweiterungen habt oder einen Fehler entdeckt, bitte gleich hier drunter in den Kommentaren. Ich freue mich auf Euer Feedback.