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


Einfaches HTML Testing mit dem HTML Inspector
Damals, als ich noch den Firefox verwendet habe, gab es ein nettes Tool mit dem man testen konnte ob HTML valide ist. Dann kam HTML5, alles wurde ande...


COPASO – Farbpalette für das Webdesign
Adobe Kuler war mal cool, macht aber schon ziemlich lange nicht mehr das, was ich als sinnvoll erachte. Viel besser finde ich es, die Farbpaletten auf...


Linkcheck mit CSS3
Bei der HTML-Umsetzung eines Designs werden in der Regel alle Links entweder gar nicht, oder mit einem # versehen. Dies liegt in der Regel daran, das ...


50 CSS3 Button Sets
Der Trick ist ja der folgende: Je mehr CSS3, desto weniger Grafiken zum nachladen, desto schneller die Seite. Allerdings (und das muss man ganz klar s...

Schreibe einen Kommentar

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