Quick Tip: A Handy Grid Overlay Toolbar
videos

Quick Tip: A Handy Grid Overlay Toolbar

on Apr 12th 2012 with 27 comments
Tutorial Details
  • Topic: Grids
  • Difficulty: Intermediate
  • Screencast duration: 8 mins
Download Source Files

Today I’m going to walk you through using a handy tool to help you when building grid-based web pages. It’s a toolbar which I’ve built, and it comprises two links which lay different kinds of grids over your design whilst in the browser. Try it out!

Watch Screencast

Alternatively, Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes, YouTube or blip.tv!

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.williammorren.be William Morren
    • http://www.snaptin.com Ian Yates

      As a concept, no, it’s nothing new. But it can be valuable to see how someone builds a simple tool like this rather than relying on a plugin.

      • bobby

        i think it’s a very useful bit of info, especially since many are looking for new and custom ways to work with responsive concepts. I don’t understand comments by people frustrated by a tutorial showing them HOW to do something they’ve seen implemented. Do they expect people to break down their fresh commits to teach the masses how to code some breakthrough app? Might as well give us any profits you make of your work too! Viva Stalin!? ;)

  • Marc

    I like your syntax highlighting. Would you tell me which Espresso theme you are using?

  • http://anthonymclin.com Anthony McLin

    It would be incredible if this could be released as a browser plugin like 960gridder. 960gridder is a bit buggy and getting long in the tooth.

  • http://www.digitalthink.fr/wordpress/ Denis

    Really nice !
    Thanks.

  • http://www.lukespoor.com Luke

    Sweet job, any chance of the PSD for the png’s? Specifically the red grid, I want a much higher/darker opacity so I can see it easier, thanks :)

    • http://www.snaptin.com Ian Yates

      Adi’s since sent the psd files my way – the source download has been updated to include them :)

  • Pingback: Quick Tip: A Handy Grid Overlay Toolbar | Shadowtek Hosting and Design Solutions

  • Pingback: Quick Tip: A Handy Grid Overlay Toolbar | Shadowtek Hosting and Design Solutions

  • http://Tannernelson.me Tanner

    Would it be possible to create a chrome extension that does this?

    • http://www.adipurdila.com AdiPurdila
      Author

      Well, I guess anything is possible and a browser extension would be awesome, but it’s out of my league I’m afraid :(

    • http://www.snaptin.com Ian Yates

      There are options already out there – you could try the unofficial 960 Grid System Overlay, or The Grids, or Rulers, Guides, Eye Dropper and Color?

      • http://www.adipurdila.com AdiPurdila
        Author

        Cool, The Grids seems to work nicely!

      • http://www.snaptin.com Ian Yates

        Dan Eden has also just brought this to my attention: basehold.it, a brilliant way of overlaying a customizable baseline grid on your pages. He’s a clever chap..

  • Jesus Bejarano

    waow i find it realy uselful,………. and pretty?.XD. I will try to do it in mootools since idkn jquary

  • Siddharth

    Your tutorial is very informative for me! thanks

    But I am confused as with in some months I have seen many frameworks like html5 boilerplate, 960 grid, bootstrap, etc. I am working on a website using a CMS based on .NET. Which one should I use? Any help will be appreciated coz m on my own and lil worried.

    Thanks
    Sid

    • http://roadha.us haliphax

      The overlays are visual-only; it shouldn’t matter what the underlying technology is that builds the page itself.

  • Hamid

    shame for William Morren, wasnt hard to saying thx for the article was it?

    thQ once again adi keep it up m8.

  • http://www.cgvector.com cgvector

    good tutorial i have a few line for you…
    Really nice !
    you are awesome..!
    great work…!
    love you..

  • Andreas

    nice but your variables $developmentBar and $960SkeletonGrid will be in the global scope because you have missed var (or if you change the ; to an , after your $developmentBar and $baselineGrid

  • Pingback: Quick Tip: A Handy Grid Overlay Toolbar : DevMI

  • ABS

    Plz Plz Plz Plz Plz Plz Plz Mr. Adi – show us how to convert a template HTML to WordPress template and add it to WordPress you told us in your tutorial (“Basics Create a Clean Magazine and Blog Theme”) that you will do it soon with that template … :) ican’t wait

  • http://smashzine.com/ Dyzk

    Very realy uselful tips

  • ian

    Thanks for this handy tool and thanks for explaining the jquery. I personally would rather have something like this so it works in all browsers rather than a plugin for a specific browser.

  • http://www.lukespoor.com Luke S

    Hey Adi, I just tried using this again but for some reason the grid nor base line are repeating all the way down to the bottom of the window. Any ideas?

    • http://www.adipurdila.com Adi Purdila
      Author

      Hmm, weird. Do you have a live page I can take a look at?

  • http://themeforest.net/user/graphic_dev/portfolio?ref=graphic_dev graphic_dev

    I’m working with a 24px line-height “grid” for a project atm. Currently I’m just adding a css-background to display the lines. I was thinking of making a tool like this, but now I don’t have to – thanks :)

  • Guest

    useful tool +