Golden Grid is an HTML5 base theme implementation, adapted from Joni Korpi's Golden Grid System. Designed to be as lightweight as possible while adhering to Drupal's standards and best practices, it provides themers looking to rapidly create fluid, responsive designs in Drupal with a possible starting point.
This theme divides the viewport into columns that fold into each other as resolution decreases: from sixteen, to eight, and finally to four columns. It should be noted that browsers that do not support media queries (such as dated versions of Internet Explorer) will always revert to the mobile layout.
Furthermore, Golden Grid solves the problem of drifting content as the screen is being resized through the use of elastic gutters. By declaring gutters in ems rather than in relation to the viewport, they always stay proportional to the content as they are being resized.
Finally, the Golden Grid theme establishes all of its vertical measurements in terms of ems, allowing the baseline grid to be zoomed at certain resolutions to improve readability without breaking vertical rhythm. The "Golden Gridlet" baseline grid overlay (packaged with the original Golden Grid System) is available as a separate module.
- Valid HTML5 and CSS3 base theme, built with the principles of responsive design and progressive enhancement in mind.
- IE6-8 is served the default (mobile) layout, leading to less time debugging and more time theming.
- Sixteen fluid-width folding columns offer control over layout at each resolution, collapsing to eight, then four columns as needed.
- Elastic gutters allow for responsive layouts with fixed-width padding between columns, preventing content from being stretched or squeezed as resolution changes.
- Zoomable baseline grid, making it easy to adjust font sizes at larger resolutions without breaking proportions and vertical rhythm
- Compatible with the Golden Gridlet module, which provides a customizable baseline grid and column overlay.
- LESS support (SCSS support is planned for future releases).
- Golden Gridlet
- A customizable overlay for Golden Grid, illustrating the folding columns and baseline grid.
- LESS CSS Preprocessor
- Recommended for leveraging LESS support in Drupal.
Initial development of this theme was sponsored by the Curtis R. Priem Experimental Media and Performing Arts Center at Rensselaer Polytechnic Institute.