Horizontal Guide or Ruler


Could we get a horizontal or vertical line to appear somehow on the interface? Of course we may fabricate one in the design or even use the edge of the window but I often think it would be good if I could simply evaluate how things are lining up. Even, possibly, within the same paradigm, be able to measure a distance in pixels?

Just a thought!

Bootstrap uses a responsive 12-col grid model, so I personally don't feel the need of on-screen rulers like photoshop has. Maybe you can use Chrome (or firefox) developer tools if you need fine tuning your layout on some specific breakpoint


My use case scenario was with icons with a heading below followed by a paragraph encapsulated into a div within a column. This was repeated for a number of icons with heading and paragraphs (services with descriptions). Due to different fonts being required (some imported) the heights were different. Not hard to fix but one has to compensate for the differences. A ruler would have been useful.

If you're on Windows (or a very old version of Mac OS) there is a app called Screen Calipers which come in extremely handy. It can be used for anything, not just web design so it's helpful for checking on browsers, in apps like BSS etc. It's not free, but it doesn't cost a ton, I believe like $30 and it's worth every penny. http://www.iconico.com/caliper/

In the browser there are various other tools you can get as plugins and extensions. If you have Snag-It that is also a great tool for measuring (by product of the app which it's really not intended for that but it works well lol). Lots of ways you can do measuring without complicating BSS further. :)

Um, do the grid lines that come as part of the app not help with this as all containers have guides around them or am I missing something?

As marrco says this isn't photoshop and I for one think tools already built in seem fine.