Using Soft Grids tip

Hey gang, just thought I’d elaborate my workflow for soft grids in Hype. Although the Column Grid is nice, it doesn’t have horizontal, nor does it help with Soft Grid layout. If you’re doing nytimes.com, sure, it’s great, but less so for prototyping :wink: So, here’s what I do for my work around.

First, I create squares representing the heights/widths I want. 8/16/24 or 6/12/18 etc

Convert them to symbols. This makes them easy to find in the Resources panel.

(yeah, I don’t know why I have a size 8 in there either)

Add a Class in there, in this case hide_me.

Add your css file with a simple visibility call, either “hidden” or “visible”. Use this to toggle your markers on and off:

.hide_me{
visibility: visible !important;
}

Then lay out your objects with the guides for your spacing:

To check your work, just change your css to be “hidden”:

When you deliver, you can delete the symbols from the Resources panel and all your markers disappear.

?¿? :wink:

can you offer a sampledocument?

You bet! Here’s a hypothetical layout using this technique, based on an 8-pt soft grid:

soft_grid.hype.zip (81.2 KB)

css file, for those who don’t want to dig inside the Resources folder of the .hype file :wink:

style.css.zip (693 Bytes)