Golden Grid System

07.01.2012 22:57

Golden Grid System

Four features
Columns, gutters, a baseline and a script.

Folding columns

Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design. Now, 16 columns sounds a bit much for anything other than huge widescreen monitors. This is where the folding, inspired by the DIN paper system and Unigrid, comes in. The 16
http://goldengridsystem.com/ Page 1 of 6

Golden Grid System

07.01.2012 22:57

columns can be combined, or folded, into 8 columns for tablet-sized screens, and into 4 columns for mobile-sized ones. This way GGS can easily cover any screen sizes from 240 up to 2560 pixels. The dimensions of the grid in each configuration are noted down within CSS comments, accompanied by suitable media queries, like thus:
/* * * * * */ Four-column grid active ---------------------------------------Margin | # 1 25 2 50 3 75 4 | Margin

5.55555% | %

100 | 5.55555%

Elastic gutters

While the column widths in GGS are proportional to the screen's width, the widths of its gutters (the spaces between columns) are proportional to the page's font-size, specified in ems. Responsive grids that use gutters proportional to the screen can make the content feel like it's being squeezed together or pulled apart as the screen width changes. With elastic gutters this just doesn't happen, as the gutters always stay in proportion to the content. Elastic gutters are created by positioning elements in the center of the gutter (using
http://goldengridsystem.com/ Page 2 of 6

Golden Grid System

07.01.2012 22:57

percentages) and giving them a padding equal to half of the gutter's width. For example:
.wrapper { box-sizing: border-box; /* + vendor prefixes */ width: 50%; margin-left: 25%; /* Assuming gutter width = 1.5em */ padding: 0 0.75em; }

Zoomable baseline grid

ABCDEFGHIJKLMNOPQRSTUVXYZ123581321345589144233377610

ABCDEFGHIJKLMNOPQRSTUVXYZ

ABCDEFGHIJKLMNOPQ
Responsive layouts often require you to change the font-size at certain screen widths, for example to make the text easier to read on huge monitors, or to make the text fit better onto narrow mobile screens. This can make the proportions of your layout feel off, especially if you're using a baseline grid. GGS's zoomable baseline grid gets around this problem. If you specify all your font-sizes, line-heights, as well as vertical paddings, margins and borders in ems, they'll all scale in proportion as the font-size is changed using media queries, always keeping the baseline grid intact (save for a 1px rounding error or two), which lets the layout keep the same vertical rhythm regardless of screen size. GGS comes with a set of type presets aligned to a baseline grid, which is based on a base line-height of 1.5. Feel free to replace them with your own presets, though.

ABCDEFGHIJK
Page 3 of 6

http://goldengridsystem.com/

Golden Grid System

07.01.2012 22:57

Golden Gridlet

Aligning elements in responsive layouts can be difficult with all the percentage values flying around. GGS comes with Golden Gridlet, a little script that adds a button into the upper right corner of the page. When clicked or tapped, it overlays the GGS grid and a baseline grid of 1.5em onto the page, making it easy to visually check that design elements align up. Golden Gridlet should work in most modern browsers, and since it doesn't rely on a keyboard, it can be used on touch screen devices as well. In modern browsers, the overlay appears with a pleasing CSS3 transition. Give it a try by clicking or tapping the icon in the upper right corner of this page. It's pretty fun. (Please note that due to rounding errors the baseline grid guides might not align up properly if the baseline grid is zoomed in or out.)

Four downloads
All hosted on Github.

GGS.html Contains the required markup (namely the meta viewport tag) and a simple demo of the grid in use. GGS.css
http://goldengridsystem.com/ Page 4 of 6

Golden Grid System

07.01.2012 22:57

Contains the meat of GGS, with some demo code filled in. Details about its contents are included in CSS comments throughout the file. GGS.less / GGS.scss Both contain the source of GGS.css. GGS.less is written using the LESS CSS language. GGS.scss is written using the SCSS language, and was contributed by mikker. GGS.js Contains Golden Gridlet, a script that overlays the GGS grid and a baseline grid of 1.5em onto the page. Can be customized around the top of the file. Powered by the Ender library.

Many useful tips

Don't use GGS as it is. Take it apart, steal the parts that you like, and adapt them to your own way of working. Fluid design is hard. Really hard. Don't give up. Read Fluid Grids and Responsive Web Design by Ethan Marcotte. They help a lot. Don't set a max-width. Or at least don't set one below 2560px. When your content starts getting too wide, use the zoomable baseline grid to make it fit a little better, or add some empty columns on the sides. The whole point of a fluid grid is to use the screen's proportions to align elements, so stick to it. Mobile Safari causing trouble? Does your site zoom in too much when changing orientations on an iOS device? It's because of this Mobile Safari bug. GGS actually does very little.
http://goldengridsystem.com/ Page 5 of 6

Golden Grid System

07.01.2012 22:57

Its definitely not a framework. Its more just a starting point and a couple of guidelines. Serve IE68 just the mobile layout. Old IE won't see any styles that are inside a media query, so just serve it your mobile layout and enhance it a little with IE-specific classes. Not having to worry about old IE makes coding the wider layouts so much easier. More about this in my blog post: Leaving Old Internet Explorer Behind. Use box-sizing: border-box; It lets you give the same element both a width in percentages as well as a padding in ems, which is required for the elastic gutters to work. If you followed my advice about IE68 above, you can use this inside media queries without worrying about browser support. Dont confuse GGS with "The Golden Grid". The Golden Grid, made by @vladocar, is also a grid system. It has nothing to do with GGS. Accidental naming conflict. My fault.

Follow @jonikorpi on Twitter to stay up to date with Golden Grid System. Developed by Joni Korpi A web designer from Espoo, Finland. Fairly obsessed with grids, typography and geometry. Also check out Frameless A non-fluid grid for adaptive web design; adapts column by column, not pixel by pixel.
This site, its code and design, and Golden Grid System itself are licensed under MIT. The typeface used is FF Dagny, served via Typekit. Javascript powered by Ender, CSS by LESS. Max-width: 5120px;

http://goldengridsystem.com/

Page 6 of 6