* Using The Grid
* Design Decisions
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) will be
made available to developers and themers as a separate module.
Development of this theme is sponsored by the Experimental Media and Performing
Arts Center at Rensselaer Polytechnic Institute.
USING THE GRID
Golden Grid, like the boilerplate it was based on, uses a series of 18 folding
columns in its design. The first and last columns are reserved for the grid's
margins, which leaves 16 columns to work with.
As resolution decreases, these columns fold into each other, down to 8 for
common tablet resolutions and 4 for common mobile resolutions. It would be a
mistake, however, to call these "tablet" and "mobile" layouts, as the whole
point of responsive design is to accommodate any device of any resolution and
orientation according to its own capabilities.
This is best illustrated in the Golden Gridlet helper module, available
at http://drupal.org/sandbox/davidwatson/1301684, which provides a customizable
baseline grid overlay in which these columns can be seen collapsing as the
Golden Grid is split into five CSS files:
- baseline.css: CSS defining the particulars of the baseline grid.
- reset.css: A CSS reset, dealing with inconsistencies in browser defaults.
- default.css: 4-column layout that doesn't use a media query. Processed by
IE6-8 and devices with a low resolution.
- medium.css: 8-column layout, displayed at >= 45ems (720px) by default.
- wide.css: 16-column layout, displayed at >= 117ems (1872px) by default.
The percentage widths of each column are noted at the top of each CSS file.
When the grid system's elastic gutters are desired around an element, simply
apply the .wrapper class to them in your markup. This can be done in any number
of ways, the easiest being to apply them to entire containers in your theme's
template overrides (contained in /templates). Using the elastic gutters in
browsers that support them (safe in all browsers that support media queries)
allows for percentage-based containers with padding defined in ems, preventing
the perception of content "drifting" as resolutions change.
It should be noted that these CSS files are loaded in succession, so as the
resolution increases, each CSS file is processed with all of the rules of those
declared before. Therefore, it is prudent to do as much layout as possible in
default.css, and make minor changes in medium.css and wide.css as appropriate.
Q: Why isn't the media query info file syntax followed? Why is it defined in
the CSS instead?
A: It is possible to add stylesheets with media queries in the following form:
stylesheets[screen and (max-width: 45em)] = medium.css
However, any additional stylesheets added in this manner in the subtheme
will always appear *after* those added in the base theme, even if they were
overridden in the subtheme. To avoid any confusion on this point, themers
are encouraged to stick to the convention outlined in the base theme for the
time being, and define media queries directly in CSS.
Q: IE6-8 receives the default (mobile) layout. Why?
A: In short, because they don't understand media queries. The layout (assuming
a mobile-first strategy) should still be functional in IE6-8, but will not
be identical to that in a modern browser. Given how dated these browsers
are, this was deemed acceptable in the original Golden Grid System, and that
design decision was carried over here.
Q: What about Drupal's default CSS?
A: Much of Drupal's default CSS is disabled by default, in an effort to give
the themer maximum control over the layout. This can be changed in
template.php's hook_css_alter() if so desired.