automatically create ruler guides for grid-based layouts

Hi there,

I found out that its quite complicated and inconvenient to create ruler-guides for a grid-based layout (which is often the case as a webdesigner)

So i had the idea that it would be cool to have a feature like this.

But instead of a PNG – as in the example-link – ruler guides should be created in wireframeSketcher on every vertical cut.

This would make it very easy to create grid-based layouts with different widths and different number of columns and gutter-width. Plus: the widgets would snap on the grid (what they dont do when you put a PNG in the back)

Was just an idea :)

Fab

Fab,

How about using a background template like this 960 Grid System with 12 Columns. You can lock in background and widgets will snap to it. You can mark it as annotation and then use "Hide Annotations" option to hide it in exported documents.

Let me know if this works for you.

Hi Peter,

thanks. The idea why i mentioned it, is cause 960 grids will be soon out of order (or they are already in many cases, since the main-resolution is 1280px width already ). But since the mockup is created in XML-Elements, it might be possible to create a layout tool as the one i mentioned before, that generates the corresponding XML-Data.

Is it possible to embed such a tool in wireframeSketcher when its developed in JS/jQuery to create something like a "dynamic-component"?

Thanks and regards, Fab

Fab,

Yes, it should be possible to create a tool that generates the XML template for different layouts. It doesn't even have to be embedded in WireframeSketcher and could be just a simple script. Embedding is also possible via Eclipse plugin system.

My current approach is to create static templates for common settings. Right now we have 960 Grid System with 12 Columns and 960 Grid System with 16 Columns. We could add other common variations for 1280px resolution.