{Carrer web log} ←

The Golden Grid

Tuesday, February 17, 2009 { 22 Comments }

For some time now I’m devoted completely to Web Grid Design. First I built Emastic then Malo and now The Golden Grid.

Emastic is a very complete CSS Framework integrating various CSS construction techniques like floats, absolute positioning, complete freedom of your default width, extra usability with em based grid system plus possibility of fluid columns and extra % based grid system and many more features. Then the question is why build another grid system.

I was searching for the prefect web grid, playing with golden proportions, rule of thirds, symmetry, asymmetry, usability, monitor proportions, typography and the result came spontaneous - The Golden Grid. Why not share it with you :).

Philosophy

Dimensions

One, Two, Three - jump. Where is four? We usually stop at tree. Why? Three is the magic number. Three is a lucky number. Three is the fourth of Fibonacci. It is the first number that breaks the symmetry of 2.

I decided to build the golden grid based on this number.

3 + 3 and 3 + 3 + 3 +3 => 6/12 grid system

Default width 970px or 10px + 960px

780px is the number of past, 960px is the number of today and 1200px will be the number of the future (see the table link). 1200px is the perfect number for my grid system, but it's too soon for that. First I must wait the usage rate of 1024 X 768 monitors to drop under 10%.

Columns

In the 6 columns grid min. width column is 150px and the gutter of 10px.

In the 12 column grid min. width column is 70px and the gutter of 10px.

I stopped at 12 columns because I think 12 is ideal number for one web grid. 4 x 3 = 12 .When the harmony and symmetry of 4 meats chaotic 3 the result is 12.

Rule of Thirds (golden rule)

Wikipedia:

The rule states that an image should be imagined as divided into nine equal parts by two equally-spaced horizontal lines and two equally-spaced vertical lines, and that important compositional elements should be placed along these lines or their intersections. Proponents of the technique claim that aligning a subject with these points creates more tension, energy and interest in the composition than simply centering the subject would.

I love Wikipedia's interpretation of the golden rule -> creates more tension, energy and interest. But why?

This question still troubles me. Is it in our DNA, is it just the way we look at things or some fractal space and time distortion. Joke aside, I don’t have the answer, but that will not stop me to implement this rule on my grid :).

Typography

Using typography.css is optional in this project. Not all web sites have the same typographical needs. The main purpose is to give character to this project. If we imagine the grid as the naked body than typography would be the clothes.

I used ” lucida grande","lucida sans unicode" like main typeface. For titles H1 to H6 I used Georgia. I like to mix Serif and sans-serif fonts.

Image and Video size

You might consider some popular formats (4:3) and (9:16)

CSS building technique and naming system

There are two known div building techniques: floats and position. The Golden Grid uses float:left.
Class names g160 means golden 160px or grid 160px = 150px + 10px margin.
ml80 meaning margin-left:90px or 10 + 80px
Inside for needed divs and clear.
And this is it.

Similarity to other CSS project

There are many who will notice the similarity to some other CSS Frameworks like Blueprint and 960.gs and in some parts like my Emastic. Yes, the building principle is very similar - float:left, margin-left, structural naming system, px based columns... If you are familiar with these systems, you like their philosophy and you are not min. css file size maniac like me I don’t see the reason why change anything. They all do a great job.

The Golden Grid is not about how I build CSS web grids but why. It is result of almost one year research of web grid design.

The Golden Grid + Examples
Download

Cheers!

22 Responses to “The Golden Grid”

1. //  Jitendra Vyas // 2/17/2009

   it looks intresting . will try this  

2. //  Anonymous // 2/17/2009

   me too  

3. //  Colin Sproule // 2/17/2009

   This looks like a grid system i could actually bring myself to use.  

4. //  jdavid.net // 2/17/2009

   i don't think that web pages should continue to widen past 960/970px just to fit more content above the fold. at some point i buy a wider monitor because i want multiple windows visible on a single screen. the population of large screen sizes should not dictate the need to have wider format pages.
   
   960/970 is a very comfortable width.  

5. //  Anonymous // 2/17/2009

   looks crazy simple. i like. will try.  

6. //  Anonymous // 2/18/2009

   assumes you already understand css and web development. If you don't, the tutorial is useless.  

7. //  Unknown // 2/18/2009

   very very good work. I used emastic and malo before. But this is more impressive. Do you plan to do with em?
   Best regards.  

8. //  Vladimir // 2/18/2009

   @jdavid.net:1200px can bring new era in web design, you can use bigger fonts http://www.wilsonminer.com/posts/2008/oct/20/relative-readability/, more columns if you need to and many other things.
   
   @Anonymous:You should at least know how float works in CSS.  

9. //  tmdesign // 2/18/2009

   Wonderful. Now all we need are some designers to use it wisely!
   
   Thank you Vladimir.
   
   jdavid.net "i don't think that web pages should continue to widen past 960/970px"
   
   Hmmm... 64kbRAM should be enough? Who knows what the future holds.  

10. //  davistech // 2/19/2009

    Good job on this and I plan to try it on some sites.
    
    An interesting book is "The Golden Section: Nature's Greatest Secret" by Scott Olsen which gives a lot of insight into the relationship of the golden mean and its significance.  

11. //  Vladimir // 2/19/2009

    @davistech:Thank you. I order it instantly + A Type Primer(John Kane)  

12. //  Unknown // 2/19/2009

    Excellent work!!!
    I think you should add somehow the "Golden ratio" http://en.wikipedia.org/wiki/Golden_ratio
    
    It will be great...  

13. //  Unknown // 2/19/2009

    a little more info...about what I mean
    Using the Golden Ratio
    The Golden Rectangle and the Golden Ratio  

14. //  Vladimir // 2/19/2009

    @tisho:I'm planing to write an article How to use the Golden Ratio in Emastic . Like you noticed The Golden Grid is not using the Golden Ratio. The building principle is more simple 3 :)  

15. //  Unknown // 2/19/2009

    cool :)...
    here is a program for colors with Golden ratio if someone is interest
    http://goldsection.sourceforge.net/  

16. //  Anonymous // 2/20/2009

    Impressive...
    I wish I had time to write a more interesting comment, but definitely wanted to give a compliment on the direction you are going for here.  

17. //  Anonymous // 2/25/2009

    Vladimir try to Google translate (from Slovak to English/Italian) that article http://martincohen.info/site/past/2008/3/28/intype-info-grid-system-1/
    
    It's about golden ratio in grid system.
    
    There is space between icons and text in this ratio.  

18. //  Anonymous // 3/03/2009

    I like it. But what about naming classes semantically? And why margins instead of paddings? Paddings would let one use colors for columns without the spaces between them.  

19. //  Vladimir // 3/03/2009

    @Veena: Interesting
    
    @Anonymous: For the grid system I prefer structural naming convention. About the padding v.s margins. You are write about the color issue.But I use margins because I only need to push the grids(columns). Especially for the gutter it seams more natural to use margins.  

20. //  Anonymous // 3/22/2009

    My favorite css grid system so far - i was looking for something dead simple and goodlooking and the golden grid is it. Thank you  

21. //  Anonymous // 8/24/2009

    Just a small thing - on line 67 of typography.css you are missing an 'f', so that the strong tag isn't being assigned the necessary font-weight.
    
    pnts  

22. //  BrokenClock // 8/19/2011

    I think this grid is beautiful, but, if some of you have landed here after looking around about the "Golden Ratio" which have nothing to do with this grid, you may have a look at http://golden-ratio-grid.impossible-exil.info.
    It is a quite nice css generator using the Golden Ratio to give you beautifull widths and heights to use within your layout.  

Post a Comment

<< Home