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