What The Heads Up Grid Can Do For You

There was a time when Netscape and Internet Explorer were the only browsers a web developer had to worry about.

But in those days, a website primarily consisted of some text, a few images and some hyperlinks. Remember, tables were still all the rage back then.

Nowadays a user may have a few different browsers to choose from, multiple computers running different screen resolutions, a tablet device and a smartphone. And websites, they are a bit more complex than the good old static days.

So to meet the needs of the different screen resolutions, varying browsers and many different devices used to view a website many developers turn to responsive web design. To get the most out of this approach The Heads Up Grid may be your best friend.

For the most part, developers have used tools like Photoshop for grid-based designs. This presents problems in a live browser since things don’t always carry over as planned. To alleviate issues that come up in complex page structure it is commonplace to turn to doing much of the design work in the browser with the help of Firebug.

At least it was for Jason Simanek. So he created The Heads Up Grid to make life a bit easier.

The Heads Up Grid is a tool built with HTML, CSS and JavaScript touted as “an overlay grid for in-browser website development”.

And when it comes to responsive design, it is the perfect tool.

Using The Heads Up Grid is simple to use. Start by downloading the file provided on the homepage and then uploading them to your web server. Next, define the following in the code provided:

• Page units in pixels or percentage
• Column units in pixels or percentage
• Page width by number
• Number of columns by number
• Column width by number
• Gutter width by number
• The top margin for the page by number
• Row height by number

You then repeat the process for different browser widths you can set up multiple grids that are rendered based on the browser.

You can also set the left and right margins as well as whether or not the grid loads automatically.

<link href="headsupgrid/hugrid.css" type="text/css" rel="stylesheet" />
<script src="headsupgrid/jquery-1.6.2.min.js"></script>
<script src="headsupgrid/hugrid.js"></script>
<script type="text/javascript">
    definegrid = function() {
        var browserWidth = $(window).width(); 
        if (browserWidth >= 1001) 
        {
            pageUnits = 'px';
            colUnits = 'px';
            pagewidth = 960;
            columns = 6;
            columnwidth = 140;
            gutterwidth = 24;
            pagetopmargin = 35;
            rowheight = 20;
            makehugrid();
        } 
        if (browserWidth <= 1000) 
        {
            pageUnits = '%';
            colUnits = '%';
            pagewidth = 94;
            columns = 2;
            columnwidth = 48;
            gutterwidth = 4;
            pagetopmargin = 35;
            rowheight = 20;
            makehugrid();
        }
        if (browserWidth <= 768) 
        {
            pageUnits = '%';
            colUnits = '%';
            pagewidth = 96;
            columns = 2;
            columnwidth = 49;
            gutterwidth = 2;
            pagetopmargin = 35;
            rowheight = 20;
            makehugrid();
        }
    }
    $(document).ready(function() {
        definegrid();
        setgridonload();
    });    

    $(window).resize(function() {
        definegrid();
    });
</script>

Following the grids, you can easily line up images and text so that things just work when viewed by anyone using just about anything.