CSS Raster Generatoren / Grid Generators

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.

Screenshot
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.

Screenshot

Blueprint Grid CSS Generator
Der Generator zum Blueprint Framework.

Screenshot

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.

Screenshot

GRIDmaker
Gespeichert werden die Raster als Grafik im PNG-Format.

Screenshot
Gridinator
Hier gibt es auch CSS- und HTLM-Dateien.

Screenshot

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.

Screenshot

Grid Calc
Baut eine Seite live zusammen. Die Kontrollen können zur Seite geschoben werden.

Screenshot

Construct your CSS

Screenshot

Grid Calculator

Sei der Vollständigkeit halber auch noch erwähnt. ™

Als Gründer habe ich Magazine für Webdesigner und -Entwickler aufgebaut. Das Smashing Magazine, das zu den 10 bekanntesten und trafficstärksten Blogs der Welt gehörte. Oder das Dr. Web Magazin, das nicht nur als Blog in Deutschland ganz vorn dabei war. Ich helfe dir, im Internet mit Blogs und Webseiten Erfolg zu haben.

Sortiert nach:   neueste | älteste | beste Bewertung
David Hellmann
Gast
7 Jahre 6 Monate her

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,,,

Trendschau
Gast
7 Jahre 6 Monate her

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…

Chris
Gast
7 Jahre 6 Monate her

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/

trackback
7 Jahre 6 Monate her

[…] Dr. Web ist ein interessanter Artikel zum Thema “CSS Raster Generatoren” erschienen. Das Raster als Gestaltungsgrundlage ist umstritten. Wer sich damit […]

trackback

[…] CSS Raster Generatoren (tags: webdesign css web2.0 tabellen table grid raster) […]

Ralph
Gast
7 Jahre 5 Monate her

Wie so alles im Leben helfen kleine Regeln etwas Ruhe in unseren Alltag zu bringen. so auch ein gutes Grid System ;)

Ralph

trackback

[…] CSS Raster Generatoren / Grid GeneratorsThursday, 22. January 2009 […]

Philo Gensfleisch
Gast
Philo Gensfleisch
7 Jahre 4 Monate her

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.

Miranda
Gast
7 Jahre 2 Monate her

Es lohnt sich den „YAML Builder“ genauer unter die Lupe zu nehmen!

Gruss Miranda

Leonid Lezner
Gast
7 Jahre 2 Monate her

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/

trackback

[…] via CSS Raster Generatoren / Grid Generators | CSS, Generatoren, YAML | Dr. Web Magazin. […]

wpDiscuz

Mit der Nutzung unseres Angebots erklärst du dich damit einverstanden, dass wir Cookies verwenden. Weitere Informationen

Wir verwenden Cookies, um Inhalte und Anzeigen zu personalisieren, Funktionen für soziale Medien anzubieten und die Zugriffe auf unsere Website zu analysieren. Dadurch geben wir nicht personenbezogene Informationen zur Nutzung unserer Website an unsere Partner für soziale Medien, Werbung und Analysen weiter. Nähere Informationen findest du in unserer Datenschutzerklärung. Durch die Weiternutzung unserer Website (oder das ausdrückliche Klicken auf "Einverstanden") gehen wir davon aus, dass du mit der Verwendung von Cookies einverstanden bist.

Schließen