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.