Welcome to guides.js live demo page.

Guide.js is the first tool in a series of four. This will allow the front-end developer to improve their working comfort and productivity.

Guide.js allows you to insert guides to change their thickness, color and position in order to easily align the elements of your page. This feature is directly inspired by the one that can be found in Photoshop. ^^

The project is completely made from scratch and has no dependencies. And it will be the same for the next modules.

Compatible with React.js. Since the script is in vanilla JS, it is probably also compatible with Vue.js.

Without guides.js it would have been very difficult to properly center the codacy badge with the icons at the bottom of the screen. ^^

How to use ?

• Use ctrl or shift key and left click in the page to add a horizontal or vertical Guides.
• You can drag and drop the Guides
• if you right click on a guide. This will open a submenu that will allow you to:
  • Change the position
  • Delete a guide
  • Change thickness of a guide
  • Change the color of all guides
• You can simultaneously press ctrl and shift to show or hide the guides.