Issue #1824876 by davidwatson: Fixed hard-coded size attribute in comment form subjec...
[project/golden_grid.git] / 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.