README.txt

   1 CONTENTS
   2 --------
   3
   4   * Introduction
   5   * Using The Grid
   6   * Design Decisions
   7
   8
   9 INTRODUCTION
  10 ------------
  11
  12 Golden Grid is an HTML5 base theme implementation, adapted from Joni Korpi's
  13 Golden Grid System. Designed to be as lightweight as possible while adhering to
  14 Drupal's standards and best practices, it provides themers looking to rapidly
  15 create fluid, responsive designs in Drupal with a possible starting point.
  16
  17 This theme divides the viewport into columns that fold into each other as
  18 resolution decreases: from sixteen, to eight, and finally to four columns. It
  19 should be noted that browsers that do not support media queries (such as dated
  20 versions of Internet Explorer) will always revert to the mobile layout.
  21
  22 Furthermore, Golden Grid solves the problem of drifting content as the screen
  23 is being resized through the use of elastic gutters. By declaring gutters in
  24 ems rather than in relation to the viewport, they always stay proportional to
  25 the content as they are being resized.
  26
  27 Finally, the Golden Grid theme establishes all of its vertical measurements in
  28 terms of ems, allowing the baseline grid to be zoomed at certain resolutions to
  29 improve readability without breaking vertical rhythm. The "Golden Gridlet"
  30 baseline grid overlay (packaged with the original Golden Grid System) will be
  31 made available to developers and themers as a separate module.
  32
  33 Development of this theme is sponsored by the Experimental Media and Performing
  34 Arts Center at Rensselaer Polytechnic Institute.
  35
  36
  37 USING THE GRID
  38 --------------
  39
  40 Golden Grid, like the boilerplate it was based on, uses a series of 18 folding
  41 columns in its design. The first and last columns are reserved for the grid's
  42 margins, which leaves 16 columns to work with.
  43
  44 As resolution decreases, these columns fold into each other, down to 8 for
  45 common tablet resolutions and 4 for common mobile resolutions. It would be a
  46 mistake, however, to call these "tablet" and "mobile" layouts, as the whole
  47 point of responsive design is to accommodate any device of any resolution and
  48 orientation according to its own capabilities.
  49
  50 This is best illustrated in the Golden Gridlet helper module, available
  51 at http://drupal.org/sandbox/davidwatson/1301684, which provides a customizable
  52 baseline grid overlay in which these columns can be seen collapsing as the
  53 resolution changes.
  54
  55 Golden Grid is split into five CSS files:
  56
  57   - baseline.css: CSS defining the particulars of the baseline grid.
  58   - reset.css: A CSS reset, dealing with inconsistencies in browser defaults.
  59   - default.css: 4-column layout that doesn't use a media query. Processed by
  60     IE6-8 and devices with a low resolution.
  61   - medium.css: 8-column layout, displayed at >= 45ems (720px) by default.
  62   - wide.css: 16-column layout, displayed at >= 117ems (1872px) by default.
  63
  64 The percentage widths of each column are noted at the top of each CSS file.
  65
  66 When the grid system's elastic gutters are desired around an element, simply
  67 apply the .wrapper class to them in your markup. This can be done in any number
  68 of ways, the easiest being to apply them to entire containers in your theme's
  69 template overrides (contained in /templates). Using the elastic gutters in
  70 browsers that support them (safe in all browsers that support media queries)
  71 allows for percentage-based containers with padding defined in ems, preventing
  72 the perception of content "drifting" as resolutions change.
  73
  74 It should be noted that these CSS files are loaded in succession, so as the
  75 resolution increases, each CSS file is processed with all of the rules of those
  76 declared before. Therefore, it is prudent to do as much layout as possible in
  77 default.css, and make minor changes in medium.css and wide.css as appropriate.
  78
  79
  80 DESIGN DECISIONS
  81 ----------------
  82
  83 Q:  Why isn't the media query info file syntax followed? Why is it defined in
  84     the CSS instead?
  85
  86 A:  It is possible to add stylesheets with media queries in the following form:
  87
  88     stylesheets[screen and (max-width: 45em)][] = medium.css
  89
  90     However, any additional stylesheets added in this manner in the subtheme
  91     will always appear *after* those added in the base theme, even if they were
  92     overridden in the subtheme. To avoid any confusion on this point, themers
  93     are encouraged to stick to the convention outlined in the base theme for the
  94     time being, and define media queries directly in CSS.
  95
  96 Q:  IE6-8 receives the default (mobile) layout. Why?
  97 A:  In short, because they don't understand media queries. The layout (assuming
  98     a mobile-first strategy) should still be functional in IE6-8, but will not
  99     be identical to that in a modern browser. Given how dated these browsers
 100     are, this was deemed acceptable in the original Golden Grid System, and that
 101     design decision was carried over here.
 102
 103 Q:  What about Drupal's default CSS?
 104 A:  Much of Drupal's default CSS is disabled by default, in an effort to give
 105     the themer maximum control over the layout. This can be changed in
 106     template.php's hook_css_alter() if so desired.