Quick Drive: Golden Grid System

3 min read

Just last week, Joni Korpi released his latest grid system the aptly named, Golden Grid System (GGS). This was his first attempt at a fluid grid system, having previously developed the widely praised fixed-width adaptive grid system, Less Framework.

Having already developed my own fixed-width adaptive system for use in my WordPress template, Modular-A, I never felt compelled to apply that in my work. I did, however, research and deconstruct it, along with other fixed-width frameworks, whilst developing my understanding of how it worked.

I was always impressed by the minimal nature of his frameworks, that strip away all the other design features, to focus on the layout structure of grids and their gutters. This was preferential for my own purposes, as I have developed my own guidelines for handling many common elements throughout sites (the typography, input, tables etc…). But when Joni released GGS I already had a nice simple website lined up – a web version of my resume.

It took me an evening to throw together the site, and I was quite happy with with the end product. Here are my impressions.

Noticeable benefits

  • Rapid prototyping: The built-in JavaScript-based grid overlay allowed for rapid prototyping in all screen widths and especially for the typographic elements.
  • Great foundation for you to make a site that is both balanced and usable.
  • Up to 16 grids (or 18 if you include the margins) can be used, but any variation in-between was very easy to set and test with. I ended up going with 8 and turned off the wider variations (don’t have a wide enough monitor to test with currently).
  • Simple semantic class names.
  • The minimalist nature of what it provides. Joni described it as more “a guideline than a framework” and that is very much the case. Apart from removing his typographic presets, it was able to instantly integrate with my own presets.
  • It integrated with the HTML5 BoilerPlate 2.0 without a single hassle.

Other Impressions

  • There were a few small bugs in the version of the code I originally copied from Github (these might have already been fixed by my time of writing).
  • Once I let GGS loose on my site, some of the page edge gutters did not work as intended and required some fiddling.
  • This particular project did not require a contrasting colour between the body and main content area, but it looks as though I will have to fiddle with some of the layout elements when I do.
  • While I appreciate the minimalist nature, I do think it could do with out-of-the-box classes already dealing with the various column-width variations.
  • I don’t entirely agree with the minimalist approach he took with older versions of Internet Explorer. While I agree that we should encourage more users to upgrade, I work on too many projects where the client still wants a similar (or close) experience for users from all the popular browsers.

I haven’t yet tried images with GGS, so I can’t comment there. I hope to soon though, as I have plans to test how this will work in an updated version of Modular-A with an eCommerce site.

Additional Links

My resume using GGS

3 thoughts on “Quick Drive: Golden Grid System”

    Rajan Venkataguru December 27, 2012 at 2:47 am /


    Thanks for the post. I am researching on the golden grid system. I saw that you implemented GGS in your resume. I see that you mentioned that you ended up using 8 grids. I am seeing this on a wide screen monitor and it is showing me 16 grids ( or 18 including the margins ). Is it because of the feature of the GGS or did you change it to 16 grids now?


    David Ashkanasy December 27, 2012 at 4:44 am /

    Glad you found the article useful. Yes you’re right, it does show 16, but the design pattern itself was based off 8. That flexibility of using a division between 16 is quite versatile.

    That said – I no longer use GGS in my responsive sites, but I found it to be a fantastic foundation through which to understand designing/developing responsive sites.

    Nowadays though I develop content-first (which GGS does not do), and use LESS (a css-parser) to do all of the equations for my grids, gutters and widths. Content-first especially makes it easier to work responsive typographic rules into your site (and it still isn’t easy!).

    My site as you can see is not responsive (too busy to give it the real work over), but if you look at some of my more recent work, you’ll see this in action.

    Rajan Venkataguru December 30, 2012 at 8:54 pm /

    Thank you for the reply despite your busy schedule. I saw your recent work and it makes sense. I am still working on finding the right workflow for my responsive workflow. Your inputs are very valuable. Appreciate it

Leave a Reply

Your email address will not be published. Required fields are marked *