Das Raster als Gestaltungsgrundlage ist umstritten. Wer sich damit auseinandersetzen will, braucht nicht zwingend ein Framework, er könnte auch zum Grid-Generator greifen und erhält – mit Einschränkungen – einen WYSIWYG-Modus für den Ausbau seines Grids. Mit den Generatoren lässt sich ohne Installation herumspielen. Da bekommt man schnell ein Gefühl dafür, was man eventuell brauchen könnte. Schließlich gibt es auch diese hilfreichen Geister von komplex (YAML Builder) bis schlicht (Construct). Zum Teil ist Flash erforderlich.
Gritbuilder
Hier lassen sich erstellte Container schön mit der Maus hin und her schieben. Speichern kann man hier allerdings nichts, auch kein Quellcode ist verfügbar. Die Sache ist eher dazu gemacht, sich eine Vorlage für ein anderes Programm (zum Beispiel) zurechtzubasteln. Screenshotten ist natürlich kein Problem.
YAML Builder
So ziemlich das Umfangreichste, was man sich zu diesem Thema vorstellen kann. Die Abbildung deutet es schon an, hier ist eine Menge drin. Und auch seinen Quellcode kann man mitnehmen. Neben den zahlreichen Optionen gibt es auch Drag & Drop.
Blueprint Grid CSS Generator
Der Generator zum Blueprint Framework.
YUI CSS Grid Builder
Der Generator für das YUI Framework, welches wir Ihnen in diesem Artikel vorgestellt haben: Grids CSS: ein zeitsparendes System für das Layout.
GRIDmaker
Gespeichert werden die Raster als Grafik im PNG-Format.
Gridinator
Hier gibt es auch CSS- und HTLM-Dateien.
Grid Designer
Dieser Generator versteht sich auch auf die Typographie. So lassen sich die erzeugten Spalten einzeln gestalten, was praktischerweise mit direkten Werten oder über Buttons unternommen werden kann.
Grid Calc
Baut eine Seite live zusammen. Die Kontrollen können zur Seite geschoben werden.
Sei der Vollständigkeit halber auch noch erwähnt. ™
Sven Lennartz
Sven ist der Erfinder des Dr. Web Magazins, Autor und Herausgeber verschiedener Fachbücher. Als Webdesigner und Texter früher freiberuflich für verschiedene Unternehmen und Verlage tätig. Jetzt Geschäftsführer der Smashing Media GmbH.
Irgendwie konnte ich mit den guten Teilen noch nicht warm werden. ICh finde man ist da ein wenig zu gebunden, klar geht es schnell ein Layout zusammenzuklicken aber irgendwie bin ich dann zu sehr gebunden an gewisse Sachen.
Schon allein das dieses YAML dann etliches CSS Dateien nutzt macht mich verrückt :)
Vielleicht stell ich mich auch einfach zu blöd an,,,
Gibt es eine Möglichkeit, einen Griddesigner mit einem Online-Text-Editor zu verknüpfen?
Ich suche seit langem eine Plattform, über die man seine Webseiteninhalte in ein Magazin-Format kleiden kann, um es anschließend als PDF-Ausgabe zu nutzen (PDF-Buch, PDF-Magazin, PDF-Newsletter). So ein Grid-Designer wäre ideal, um schnell ein persönliches Magazin-Template zu erstellen, wenn ich auf der anderen Seite noch die (z.B. per RSS eingespielten) Inhalte editieren könnte, wäre alles perfekt…
Das “960 Grid System” ist zwar kein Generator, aber ein wirklich brauchbar/schlankes CSS Framework. Der Screencast von Jeffrey Way erklärt das Ganze ziemlich anschaulich:
http://kolos.blogger.de/stories/1318130/
[...] Dr. Web ist ein interessanter Artikel zum Thema “CSS Raster Generatoren” erschienen. Das Raster als Gestaltungsgrundlage ist umstritten. Wer sich damit [...]
[...] CSS Raster Generatoren (tags: webdesign css web2.0 tabellen table grid raster) [...]
Wie so alles im Leben helfen kleine Regeln etwas Ruhe in unseren Alltag zu bringen. so auch ein gutes Grid System ;)
Ralph
[...] CSS Raster Generatoren / Grid GeneratorsThursday, 22. January 2009 [...]
Ohne Raster keine Ordnung in der Gestaltung. Inwieweit Raster beim CSS-Schreiben sinnvoll ist vermag ich nicht einzuschätzen; IMHO kommt es an der Stelle zu spät. Vielmehr sollte es schon beim grafischen Entwurf zum Einsatz kommen.
Es lohnt sich den “YAML Builder” genauer unter die Lupe zu nehmen!
Gruss Miranda
Hallo!
Ich möchte an der Stelle meinen kleinen Grid-Rechner vorstellen, mit dem man auch einen Raster berechnen kann. Ich habe mich auch um eine Möglichkeit gekümmert, per Skript automatisch für Photoshop den Hilfslinien-Grid anlegen zu lassen.
Hoffe, der Rechner wird für jemanden nützlich sein!
http://gridcalc.leolezner.de/
[...] via CSS Raster Generatoren / Grid Generators | CSS, Generatoren, YAML | Dr. Web Magazin. [...]