Documentation

Form view

The form view makes it easy to create basic and slightly advanced grids. To use it, fill out the fields, then click the Add guides button.

Form

The form is a collection of fields. Each field is optional. GuideGuide will automatically calculate empty fields where applicable, or will ignore them. Certain fields appear/disappear depending on your actions.

As you update the form, GuideGuide fills out the field in the Custom view with grid notation generated by the form. You can switch back and forth between the views to see this output. This is a great way to learn grid notation.

Name field

Filling in the name field gives your grid a name. This field does not appear unless you are saving a grid.

Margin fields

Filling in the margin fields places guides at the edge of the document. For example, filling in a value of 0 places a single guide at the edge of the document. Filling in a value of 10px places a guide at the edge and one 10px away from the edge.

Margin fields support limited grid notation. Clicking the margin icon in one of the margin fields copies its value to the other margin fields.

Column and row fields

Filling in the column and row fields sets the number columns or rows you would like in your context.

Filling in a width or height when the column/row fields are empty makes GuideGuide add columns or rows until it runs out of available space. This is an easy way to make a baseline grid.

Clicking the icon in column or row field copies its value to the opposite field.

Width and height fields

Filling in the width and height fields sets the width of columns and height of rows. GuideGuide automatically calculates the width and height for you if you leave the fields empty.

Filling in a height or width and the corresponding column or row field, may create a grid that is bigger or smaller than the context. GuideGuide will add a position dropdown to the form that will adjust the alignment of your grid within the context.

Width and height fields support limited grid notation. For example, filling in a value of ~ | ~ in the width field makes GuideGuide create automatically sized columns with midpoints.

Clicking the icon in width or height field copies its value to the opposite field.

Gutter fields

Filling in the gutter fields sets a width/height between each column/row. If you leave the column/row fields the width/height fields empty, or if you fill in a value of 1 in the column/row field, GuideGuide ignores the gutter field value.

Gutter fields support limited grid notation. For example, a value of 10px | 10px in the column gutter field will make GuideGuide add a gutter that is 20px wide with a guide in the middle.

Clicking the icon in one of the gutter fields copies its value to the opposite field.

Position dropdowns

The position dropdowns set the position of the grid to the top, bottom, left, right, or middle when you create a grid that is smaller than context.

Add guides button

Clicking the Add guides button tells GuideGuide to process the form and apply the grid to your document, based on the current context.

If you have not filled out the form, clicking this button will outlined the current context by default.

More menu

Clicking the triangle button next to the Add guides button displays the More menu, which holds features that are useful but not commonly needed.

Save grid button

Clicking the Save grid button opens modifies the form to allow you to save your grid for later use.

Reset form button

Clicking the Reset form button resets all form fields to their empty or default values.

Saving a grid

Clicking the Save grid button displays the name field which enables you to name your grid. If you filled out the form before clicking the Save grid button, the values you entered remain in the form.

Save grid button

Clicking the Save grid button saves your grid, then opens the saved view where you will see the grid in the list.

Cancel button

Clicking the Cancel button hides the name field and returns you to the form. GuideGuide restores the values that were in the form before clicking the Save grid button.

Quick guides buttons

Clicking the quick guides buttons adds single guides to some of the most commonly used places, or clears guides.


Need help?

Contact support