Backgrounds für Grid Based Layouts

Okay, ich gebe zu, der Titel ist maximal mystisch, passt aber ;) Ich glaube zum Grid Based Design brauche ich nichts mehr zu sagen, und es gibt ja auch die eine oder andere Photoshop-Ebene, mit der man ein Grid in das Grafikprogramm rein bekommt. Ist ganz nett, hilft bei der HTML-Umsetzung relativ wenig.

Ich hab vor allem beim 960.gs des Öfteren gesehen und erlebt, das die Spaltenbreiten nicht eingehalten worden sind. Dies betrifft vor allem die margins links und rechts, wo der Webworker irgendwo zwischen den ganzen Alphas und Omegas verloren gegangen ist.

Screenshot von griddle.it

Ebenso genial wie einfach ist die Idee, ein Grid als Background temporär in die Seite zu legen um bei der Umsetzungsphase für die korrekten Maße zu sorgen. Vor allem beim Kunden kommt das gut an, weil er gerade in dieser Phase mit recht einfachen Angaben dazu genötigt werden kann, vernünftige Änderungswünsche einzureichen. Vor allem ist nun für ihn verständlich das das verbreitern von irgendwas auch zwingend nach sich zieht, dass irgendetwas anderes schmäler wird.

Dienste wir Lorem Pixum dürften ja inzwischen bekannt sein, mit Griddle.it gibt es nun etwas Ähnliches als Background für die komplette Seite. Ein einfacher Aufruf für 960.gs wäre zum Beispiel http://griddle.it/960-12-10 , es lassen sich allerdings beliebige Grids mit folgendem Muster erzeugen:

http://griddle.it/[gesamtbreite]-[anzahlspalten]-[margins]

Es lässt sich somit jedes beliebige Grid darstellen, und mittels CSS einfach einbinden:

body {
    background: 
        url(http://griddle.it/960-12-10) repeat-y center top;
}

Die Farben lassen sich ändern, und die Pixelangaben wegblenden, alles in allem also ein gelungener Dienst der gerade bei der Entwicklung schnell und einfach immens weiterhelfen kann.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.