Guide_JS (code source)

NB : if your version has inferior to 0.7. Remove your localhost

Facilitate your integration work

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.

Demo

You can test the plugin directly, at the following address: Live Demo

Installation

npm i guides_js_by_raficraft

Then you just need to import the module into your index.js or main.js file. The script is compatible with REACT.JS. Since the script is in vanilla JS, it is probably also compatible with Vue.js

import guides from 'guides_js_by_raficraft'

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.

Features of code

Guides.js is inspired by guides found in Photoshop

• Form Scratch ^^
• Compatible with React.js
• No dependencies
• POO
• Sass
• Magic function to create HTML elements from a string
• Dynamical CSS from scratch
• Custom Context Menu
• Drag an drop UI
• Local Storage

Author

Hi, I am a front-end developer specializing in react.js and javascript. What I like the most developed are tools and components designed to improve the productivity of front-line developers. Join me on linkedin so as not to miss any of my work. See you soon !! ^^

SoftSkill profil

linkedin profil

Patch Notes

01-16-22

• Fix Error when you close sub menu , guides don't move.

01-12-22

• Fix Error when deleting the last guides.

• Update the value in context menu, when your move a guides.

• Change e.pageY and e.pageX value responsible for many bugs, by e.clientX and e.clientY