Golden Grid System Patterns

Golden Grid System

http://goldengridsystem.com/

I. Basic Structures & Nesting

• Uses floating technique like other Grid Systems
• Uses the device of wrapper classes; however structural markup examples show classes applied to html5 entities (article and section); no real difference from others as even though the other's examples use the div as something more generic to the wrapper -- there's no reason one must use a div-- since the wrapper clases are simply classes not bound to html entities.
• Naming convention uses design function naming (as like other Grids) -- (.wrapper) (.two-way) See: https://github.com/jonikorpi/Golden-Grid-System/blob/master/GGS.html
• However, leave the naming of sub-segments up to the user by leveraging LESS variables; realizes there are 2 popular conventions (variable)column and span(variable). Decides to give the % calculations user needs to create their grid and leaves the naming convention up to the user to decide. See: https://github.com/jonikorpi/Golden-Grid-System/blob/master/GGS.css

Notice that in the example css file above that the sections for the core sub-section units are left without CSS declarations-- only a commented section ready for the user to create their own:

/*
*
*  Eight-column grid active
*  ----------------------------------------------------------------------
*  Margin   | #  1     2     3     4     5     6     7     8   |   Margin
*  5.55555% | %  12.5  25.0  37.5  50.0  62.5  75.0  87.5  100 | 5.55555%
*	
*
*/

II. No use of helper classes

• Not a full framework-- is just a boilerplate for responsive grid calculations.

III. Additional Features

• The use of Elastic Gutters instead of Percentage Based Gutters -- % based gutters based on viewport creates poor typography for Gutters -- as Gutters are usually aesthetically proportional to type-setting itself.
• Sets Gutters to ems that are based on the Typography settings; Interesting technique. Most frameworks set gutters with static px and thus avoid the issue of % based gutters creating awkward/difficult to control gutters -- at a loss to true proportional measurements that respond to type changes needed for proportion changes. Elastic set on type -- provides benefits of both.