The Heads-Up Grid

Paste Some Code

If you haven’t already defined a grid, use The Gridulator. Then download The Heads-Up Grid files and paste the following code into the <head> element of your webpage:

<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">
    $(document).ready(function() {
        pageUnits = 'px';
        colUnits = 'px';
        pagewidth = 960;
        columns = 6;
        columnwidth = 140;
        gutterwidth = 24;
        pagetopmargin = 35;
        rowheight = 20;
        gridonload = 'off';
        makehugrid();
        setgridonload();
    });
</script>

Apply Settings

You probably noticed by looking at that text that the default grid has the following properties:

units for page = pixels
units for columns = pixels
page width = 960px
number of columns = 6
column width = 140px
gutter width = 24px
page top margin = 35px
row height = 20px

Alter the numbers to create your desired grid. If you don’t need the baseline grid, set the row height to 0. The default unit of measure is pixels.

You are now ready to get back to the real work: meticulously lining up images and text!

Nerd, PLEASE! This would have been GREAT in 2010, but
what about RESPONSIVE web design?

Using Responsive Grids

Responsive web design, as described/defined by Ethan Marcotte anyway, is the act of creating various forms of the same basic site design that are optimized for different ranges of browser window widths.

Luckily, the way that I originally constructed the Heads-Up Grid made it relatively easy to adapt to the needs of responsive web design. You can quickly and easily define as many different grids as you need by way of basic JavaScript conditional statements. Even if you are not extremely comfortable with JavaScript, if you are ambitious enough to tackle responsive web design you will most likely have no problem figuring this out.

To create a responsive grid use the following code as a template. This template is fairly self-explanatory if you are familiar with CSS Media Queries. These JavaScript conditional properties should directly match the properties you are using for your media queries. Then simply define the properties of multiple grids in the same way you would define a single grid above.

The result should be a system that checks the browser window width on pageload as well as any time that the browser window is resized and render the appropriate grid.

Responsive Grid Code

<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;
            gridonload = 'off';
            makehugrid();
        } 
        if (browserWidth <= 1000) 
        {
            pageUnits = '%';
            colUnits = '%';
            pagewidth = 94;
            columns = 2;
            columnwidth = 48;
            gutterwidth = 4;
            pagetopmargin = 35;
            rowheight = 20;
            gridonload = 'off';
            makehugrid();
        }
        if (browserWidth <= 768) 
        {
            pageUnits = '%';
            colUnits = '%';
            pagewidth = 96;
            columns = 2;
            columnwidth = 49;
            gutterwidth = 2;
            pagetopmargin = 35;
            rowheight = 20;
            gridonload = 'off';
            makehugrid();
        }
    }
    $(document).ready(function() {
        definegrid();
        setgridonload();
    });    

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

Available Properties

Below is a complete list of properties available in the Heads-Up Grid system.

property name	values
pageUnits	px, %
colUnits	px, %
gridonload	on, off
pagewidth	[number in pageUnits]
columns	[number of columns]
columnwidth	[number in colUnits]
gutterwidth	[number in colUnits]
pagetopmargin	[number in pixels]
rowheight	[number in pixels]
pageleftmargin	[number in pageUnits]
pagerightmargin	[number in pageUnits]

default value in bold
non-numerical property values must be defined within quotes: gridonload = 'off';

GitHub Repository

You can now contribute to this project by way of GitHub. I’m still learning about version control, but hopefully this will make it easier to improve and cotnribute to this project!

github.com/simanek/Heads-Up-Grid

Changelog

Nothing is ever finished. The Heads-Up Grid has been improved since its introduction. Below is a description of how it has been changed over time.

2012-07-08 Version 1.7

Sunilw improved key parts of hugrid.js and fixed some important JavaScript console errors [issue #10]
I remutilated Sunilw’s wonderful work to get the gridonload and preserved gridstate working after his fixes. [issue #11]

2012-06-02 Version 1.6

Changes to <meta> element on example files should correct grid redrawing on iOS orientation change. [issue #4]
State of grid – on or off – is preserved on window resize. [issue #5]

2011-09-03 Version 1.5

pageUnits set page width in pixel or percent units
colUnits set column and gutter widths in pixel or percent units
pageleftmargin set grid to be left-aligned rather than centered
pagerightmargin set grid to be right-aligned rather than centered
Responsive Grid functionality makes it possible to define multiple grids that are displayed on condition of the browser window width.

2011-08-27 Version 1.4

Added the gridonload property to set whether the grid is on or off after the page loads.

2011-08-20 Version 1.3

Added an ON/OFF button after seeing The Golden Grid System by Joni Korpi which makes The Heads-Up Grid look like chicken scratches.

2011-08-19 Version 1.2

Added “baseline” horizontal grid rows after it was requested by a user. This horizontal grid is defined by the “rowheight” property. There’s also the new “pagetopmargin” property to adjust where on the page the horizontal grid begins.

2011-08-13 Version 1.1

Originally this tool did not employ JavaScript. It was just some CSS and some HTML elements that the user had to manipulate themselves. This had some drawbacks, mostly the problem with knowing how many columns you needed and remembering to subtract 1 when setting up the HTML. A user on Hacker News pointed out that the markup could be generated very easily with some simple jquery commands. As a result I dug in and started learning the basics of injecting HTML elements into the DOM via jquery. This allowed me to handle the math for the user. With this version the user only had to save the “headsupgrid” folder to their web server and enter the properties of their grid into the header of their HTML document.

2011-08-06 Version 1.0

This page and a downloadable .zip archive were made live.