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

Tooltips in 100% CSS Tooltips sind inzwischen in jeder Web-Applikation zu finden, einfach um dem Benutzer mehr Informationen zu geben oder besser zu führen. Bei ganz windi...
Multiple File Uploads, HTML und Open Source Formulare lassen sich inzwischen ganz gut designen, allerdings gibt es ein Formularelement, das alle Design-Versuche vehement abwehrt: der Dateiupload...
Drupal, die White Screen of Death und das Byte Ord... Was ein Titel – hollywoodtauglich! :) Aber durchaus mit einem Hintergrund: Drupal kann in einen Zustand geraten, wo es außer einer weißen Seite (der W...
HTML Table CSS Style Generator Nachdem ja nun der Bann von HTML Tables scheinbar aufgehoben worden ist, darf man es ja wagen diese wieder zu verwenden. Das macht auch Sinn, weil tab...

Schreibe einen Kommentar

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