Photoshop Style Rulers and Guides
One of the best things about Photoshop is the easy-to-use guides that can be taken from the rules. These guides can greatly simplify the design process when it comes to positioning an item and finding the right balance.
To our great joy, Mark Rolich has implemented this special feature for use on the web. He created RulersGuide.js is based on Photoshop rules and guides.
Rulersguide.js offers the possibility of adding a Photoshop Guide-style user interface to a web page. The created lines can also be saved for future use. It offers you three possibilities of use: as a JavaScript Library, as a bookmark, or as a Chrome extension.
JavaScript
Rulersguide.js needs other dependencies to work properly. Since it works by dragging and dropping lines on the page and requires some use of events, you need to add Dragdrop.js (available here) and Event.js (available here). Then add these dependencies with the RulersGuide.js source. If you don’t like the default style, you can change the CSS to your liking. Then initialize these packages with the script.
Bookmarklet and Chrome extension
For convenience, you can use this tool as a bookmark or a Chrome extension and open it anytime and anywhere.
Installing Bookmarklet
Just install the bookmark as usual. Since Internet Explorer sometimes works differently, this tool takes this into account by distinguishing the bookmark installer for IE and non-IE users. Simply drag and drop the appropriate link below into your bookmarks bar.
Installing the Chrome Extension
If you are a Chrome lover, you may like this Option. Unfortunately, Rulers Guide is not yet available on the Chrome Webstore. The only option is to install it manually.
First of all, get the extension file here. The browser will ask you to confirm the file. Just click Next. The extension does not install automatically because Chrome has a security protocol that protects it.
Open it by going to Option > Tools > Extensions or by opening a new tab, copy chrome: // extensions and paste them in the address bar. Then drag and drop the downloaded Rulers Guide.crx file on the extension page.
Working with Rulers Guide
As mentioned earlier, Rulers Guide works exactly like the Photoshop rule and guide. When you activate this tool, the rules are displayed at the top and left of your browser. You can draw a few lines from these rules. And at the top left of the page, you can get more options in the available menu. In this menu, you can customize whether the lines should be displayed, saved, locked and more. Let’s get to know the options better.
The Hide option is used to hide rules and guides at will. Even if the rules are hidden, you can still see the menu option.
When you click Unlock, the rules remain visible when you scroll down the page. Deleting all guides is useful if you want to delete all the guides that you have created.
The Save Grid option is used to save the grid that you have created. The grid is stored according to the location of the page, so you cannot use the same grid in other browser windows/tabs. And as you might expect, The Option to open the grid is to open your saved grids.
When you click View detailed information, the Detailed Information Mode is activated. It can show you the Position and size of the grid areas you create, as well as any changes you make to the Position of the mark.
The last one is The capture option. That’s what I like about Rulers Guide. You can align the marks on The DOM element or use them with the defined pixel size. Note that the Snap to DOM Option is still in the experimental stage at the time of writing. On a page with a lot of elements, it may slow down or stop responding.
Conclusion
Unfortunately, there is still a small drawback. No single guide can be deleted like in Photoshop. You can simply delete all the guides and start creates them from scratch. However, if you often work on web layouts in browsers, this tool is for you.