Golden Grid

Demo to see how the theme looks in a sample Drupal site Apply theme

#D7AX - I pledge to make this theme as accessible as it can be. If you find any flaws, please submit an issue. Help me fix them if you can.

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.

Features

  • 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).

Documentation

For those who haven't created a subtheme before, the tutorial on creating a subtheme is highly recommended. All are encouraged to review the README.

Related Modules

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.

Sponsorship

Initial development of this theme was sponsored by the Curtis R. Priem Experimental Media and Performing Arts Center at Rensselaer Polytechnic Institute.

 

Want to customize this theme in a unique way for your website, we are here to help you!

We also build custom Drupal themes

 

Get a custom theme