Photoshop-style guides and rulers for web pages

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.

rulersguide

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.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>RulersGuides.js</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
 
<script type="text/javascript" src="https://raw.github.com/mark-rolich/Event.js/master/Event.js"></script>
<script type="text/javascript" src="https://raw.github.com/mark-rolich/Dragdrop.js/master/Dragdrop.js"></script>
<script type="text/javascript" src="https://raw.github.com/mark-rolich/RulersGuides.js/master/RulersGuides.js"></script>
<script type="text/javascript">
var evt         = new Event(),
    dragdrop    = new Dragdrop(evt),
    rg          = new RulersGuides(evt, dragdrop);
</script>
</body>
</html>


One thought on “Photoshop-style guides and rulers for web pages

  1. very nice, but when you change screen width guides are no longer at the same position. It would be nice

    1) scroll rules (like in Photoshop) and set 0 point
    2) ability to define page width and guides in javaScript so I could test page in various browsers without setting guides again

Comments are closed.