Intro to panes
Each pane shows your page, and your interactions are synced between panes. Each pane can have a different width, height, zoom level and various other properties.
You can resize panes in horizontal, vertical and focus layout in three different ways:
- Dragging the right side, bottom side or bottom right corner. If you hold shift while resizing, the aspect ratio is maintained.
- Focus the width or height of a pane and fill in new values. Use the arrow keys to go up or down by 10.
- Select a new device preset by clicking a pane title and clicking another preset. You can also use the arrow keys to select one.
In the focus layout you can also use the Quick switcher to switch between the panes you have in the horizontal layout or by switching between the CSS breakpoints.
The pane header
All the information about a pane is shown in the pane header and here you can manage everything you do with it.
The top left of the pane header has a close button and arrows to re-order panes. These are only visible when you hover over a pane header.
The top right shows a list of icons. Here is what they do from left to right:
- Rulers, grids, columns and row overlays
- Overlay an image
- Debug tools
- Device emulation
- Devtools (only visible with isolated panes)
The bottom left of the pane header contains the title. Clicking on it to show a list of device presets. click on them, or use your arrow keys and enter to find and apply a new one. You can also give your panes a custom name.
Finally, the bottom right contains the size attributes of the pane. From left to right:
- Zoom Double click to fit the pane to the height of the application
- Unit clicking on it switches from `pixels` to `ems` and back.
- Rotate click it to rotate the device.
Enable device emulation
Device emulation is disabled by default. Click on "Turn on Isolate Pane mode" in the emulation popover to restart Polypane and enable device emulation.
When you click into a pane, a blue bar at the top of the pane indicates that it is active. When a pane is active, keyboard input (like space and arrow keys) are sent to the pane rather than to the browser. To clear this, press
Is your question not answered?
Ask via Twitter, Slack or our contact form