Rulers, grids and guides

With Polypane's rulers feature you can easily measure and check alignment and overlay grids, columns and rows on a pane. You can configure these per pane by clicking the rulers icon above a pane.

All elements scroll along with the page, and you can set the color of all elements using the color button in the settings panel.

Rulers

To show rulers for all panes, press cmd/ctrl g, click "Toggle Rulers" in the View menu or open the rulers popup for a pane and click "Show Rulers". Rulers are shown for all panes to keep the alignment consistent.

Rulers are shown either in pixels or in ems, depending on the settings for a pane (click the "px"/"em" indicator to toggle this).

Changing the color

You can change the color of the rulers, grids and guides in the settings, to make sure it has enough contrast with your page.

Guides

Hover over the rulers to show a guide. On either side of the guide is a number displaying how many pixels from that edge the guide is, making it easy to position.

Click anywhere on the ruler to add a permanent guide there, and a click in the same position to remove it again.

Alternatively you can open the ruler menu and add guides manually by typing in their pixel or em value (depending on the pane settings). You can change this value with the arrow keys. Just up/down will change by 1, holding shift along with them will change by 10, holding cmd/ctrl will change by 100 and holding alt will change the value by 0.1. These shortcuts also work when scrolling inside an input.

Adding a negative value will offset rules from the right side of the pane.

Guides will persist even after you hide the rulers.

Grid

Use the rulers popup for a pane and go to the "grid" tab to configure a grid. A grid has a size and a vertical and horizontal alignment.

The size is either in pixels or ems depending on the pane setting, and can be updated with the arrow keys just like the guides.

The alignment settings let you align the grid to the edges or center of the page, depending on your needs. The default is top center aligned.

An indicator dot in the tab will tell you if grids are active. You can remove the grid again by clicking "clear grid"

Click the "dot grid" checkbox to switch between a grid drawn using lines, or a grid drawn using dots.

Columns

Columns can be found in the "columns" tab in the rulers popup. They can be configured with either a fixed column width, or a total number of columns, along with an optional gutter width. Fixed widths are in pixel or ems depending on the pane setting.

Gutters are optional, Polypane will automatically add column borders if no gutter is specified.

Columns can be left, center or right aligned.

For fluid columns you can optionally set a specific width (like 1200 pixels wide) within which to lay out the columns. When kept empty, fluid will use the entire pane width.

An indicator dot in the tab will tell you if columns are active. You can remove the columns again by clicking "clear columns"

Rows

Rows can be found in the "Rows" tab in the rulers popup. They can be configured with either a fixed row height, or a total number of rows, along with an optional gutter height. Fixed widths are in pixel or ems depending on the pane setting.

Gutters are optional, Polypane will automatically add row borders if no gutter is specified.

Rows can be top, center or bottom aligned.

For fluid rows you can optionally set a specific height within which to lay out the rows. When kept empty, fluid will use the entire pane height.

An indicator dot in the tab will tell you if rows are active. You can remove the rows again by clicking "clear rows"