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.

Ähnliche Beiträge

Truncating von Text mit HTML Markup Manchmal sind es die einfachen Dinge im Leben, die einen Webworker in den Wahnsinn treiben. Alles beginnt mit einem Anruf: der Kunde möchte die ersten...
Abhängigkeiten in Formularen mit dependsOn Es kristallisiert sich immer mehr heraus das man aufgrund der UX in komplexen Formularen Abhängigkeiten einführt. Ein einfaches (wenn auch durchaus se...
ProCSSor – Der CSS Prettifier Sagen wir mal so: Es existieren für verschiedene Sprachen durchaus Standards, wie Quelltext auszusehen hat, aber keiner hält sich dran. Für das Zend F...
Grids in Photoshop Grids sind eine prima Sache - eigentlich, denn eigentlich sind sie fast schon wieder raus aus der Frontendentwicklung, und dann gibt es noch die Sache...

Schreibe einen Kommentar

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