Google Chrome extension to create guide lines on a website.
If you have any suggestions or bugs, please create an issue or use the support form in Chrome Web Store. Thank you!
Add guide lines from the rulers
Hover over one of the rulers and start dragging a new guide line from there, like you know it from Photoshop.
Add guide lines with shortcuts
- Alt+H adds a horizontal guide line at your cursor position and selects it for keyboard movement.
- Alt+V adds a vertical guide line at your cursor position and selects it for keyboard movement.
Move guide lines with keyboard
- Add a guide line.
- Click on it (the guide line will slightly blur then).
- Use your arrow keys to move the guide line.
Remove guide lines with keyboard
- Select a guide line.
- Press Del.
Discard active guide line selection
- Select a guide line.
- Press Esc.
Measure the distance between guide lines / window border
- Hover over a guide line.
- Hold down Ctrl.
- v1.5.2 (2018-06-08)
- Prevented adding new guide lines with shortcuts while pressing Ctrl or Shift
- v1.5.1 (2018-04-27)
- Add functionality to delete selected guide line by pressing Esc.
- Add functionality to discard selected guide line by pressing Del.
- Add functionality to delete guide line when moving it to the left/top window border. Thanks to @wolv-dev for your suggestion!
- Guide lines that are added via keyboard shortcuts are now positioned at the mouse cursor position. Thanks to @YannikSc for your suggestion!
- v1.5.0 (2018-04-22)
- Cleaned up code
- Guide lines that are added with shortcut are now directly selected for keyboard movement
- Fixed vertical movement with the keyboard which cause viewport scrolling
- Add faster movement with keyboard when pressing Shift + arrow keys
- Add install page after extension update
- v1.4.0 (2018-04-21)
- v1.3.4 (2017-12-18)
- v1.3.3 (2017-10-12)
- Fixed bug that caused guide lines to jump when the user isn't at the top of the page. Thanks to @boxmein for reporting this issue.
- Updated jQuery and jQuery UI
- Cleaned up repository
- Reformatted code
- v1.3.2 (2017-05-09)
- Added Spanish translations.
- Added French translations.
- Removed unused jQuery click event from page action
- v1.3.1 (2017-05-02)
- v1.3.0 (2017-04-27)
- Added functionality to see distances between guide lines (Hover over guide line and press the Ctrl key). Have a look at the features on this page.
- v1.2.3 (2016-11-07)
- Added a small donate button for people that would like to support this awesome extension.
- v1.2.2 (2016-10-13)
- Fixed bug with double rendered guide lines
- v1.2.1 (2016-10-13)
- Fixed encoding error.
- v1.2.0 (2016-10-13)
- Removed Ad-Link
- Added possibility to create new guide lines by dragging from the rulers. Have a look at the features on this page.
- Added indicator whether guide lines are shown
- v1.1.2 (2014-08-30)
- Horizontal guide lines are now placed in viewport when you have scrolled down.
- The ID of every guide line is now shown in it's tooltip which is referenced to the ID in the extension popup.
- Changed default locale to "en"
- v1.1.1 (2014-07-14)
- Implemented jQuery Color Picker because the behaviour of HTML 5 color-input isn't that reliable on all operating systems.
- v1.1.0 (2014-07-13)
- When zooming in a document the positions in tooltips are float numbers.
- The number of guide lines is now shown in the plugin icon.
- UI optimization
- The color of guide lines can now be changed.
- Every single guide line can be removed manually.
- v1.0.3 (2014-07-10)
- Updated translations (en)
- v1.0.2 (2014-07-01)
- Rulers are now instantly hidden when deleting all guide lines.
- v1.0.1 (2014-06-30)
- Description added
- v1.0.0 (2014-06-26)
- Rulers are now hidden when deleting all guide lines.