Being primarily a developer, designing a web page is not my forte. I usually design web pages using notepad++ and a browser. Although I use grid support, many times I just wish for a simple overlay guide which I can use to layout the different web components. Recently I found one with RulersGuides.js.
RulersGuides.js allows you to add Photoshop style rulers and guides to your web pages while designing them. The scale is in pixels and hence lets you quickly see if the various page elements are in their respective positions. It also allows you to add vertical and horizontal guides to the page. Once you have setup all the guides you can even save it to the browser local storage.
A quick way to get started is to use the following HTML template. RulersGuides.js requires the ‘Event.js’ and ‘Dragdrop.js’ libraries. I’ve used the github CDN urls for the js files below, but it is better to download and use a local version. You can checkout the demo to see how it works.