themes/blueprint/README.txt

# $Id: README.txt,v 1.17 2008/06/04 03:32:31 m3avrck Exp $


--- README  -------------------------------------------------------------

Blueprint, Version 1.0

Written by Ted Serbinski, aka, m3avrck
  hello@tedserbinski.com
  http://tedserbinski.com

Contributors:

Richard Burford, aka, psynaptic
 rich@freestylesystems.co.uk
 http://www.freestylesystems.co.uk

Requirements: Drupal 5.x


--- FEATURES --------------------------------------------------------

- uses Blueprint 0.7.1 CSS framework: http://code.google.com/p/blueprintcss/
- normalizes Drupal's CSS to be consistent
- properly aggregates all blueprint CSS files into a single file when this setting is enabled
- put scripts at bottom of page for nice performance gains, read more: http://developer.yahoo.com/performance/rules.html#js_bottom
- flexible layout, from 1 to 3 columns, based on where you configure your blocks to show (left, center, right)
- SEO optimization without the need for heavy modules and additional queries per page
  - automatically adds META description to many pages, read more: http://googlewebmastercentral.blogspot.com/2007/09/improve-snippets-with-meta-description.html
  - automatically adds META keywords if taxonomy exists on that node, read more: http://searchengineland.com/070905-194221.php
- better forum icons, http://drupal.org/node/102743#comment-664157
- improve forum display and performance, http://www.sysarchitects.com/node/70
- prevents duplicate form submissions with jQuery, read more: http://tedserbinski.com/2007/01/11/how_to_prevent_duplicate_posts
  loading animation care of: http://www.ajaxload.info/
- shows the # of comments below a node since Drupal doesn't do this by default (usability)
- highlight any comments by the author of the node
- adds a "you need to login / register" box below all comments if you can't add a comment (usability)
- supports conditional comment subjects, if the setting is off it won't show a chopped off title of the comment
- uses CSSEdit http://macrabbit.com/cssedit/ comments for grouping of styles
- lots of comments and theming tricks in template.php to learn from :)


--- INSTALLATION --------------------------------------------------------

1. Place the blueprint folder in your themes directory.

2. Download Blueprint 0.7.1+ http://code.google.com/p/blueprintcss/
   a. Extract folder, creating something like Blueprint 0.7.1
   b. Rename to "blueprint"
   c. Ensure your path looks like themes/blueprint/blueprint/blueprint/screen.css

3. Enable theme under Administer > Site building > Themes


--- TIPS --------------------------------------------------------

- put your custom styles in css/style.css
- put any IE hacks into css/ie.css (conditionally loaded as needed)
- admin/build/themes/settings
  - enable site slogan (add one, good for SEO)
  - enable mission statement (used as META description for homepage in search engines)
  - enable user pictures
- admin/content/comment/settings - configure comments, flat list, expanded, oldest first, show comment form same page
- (performance) remove line 76 in screen.css : .showgrid {background:url(src/grid.png);}  
  this saves an uncessary HTTP request on your server
- (performance) apply system.css.patch to remove uncessary HTTP requests to images that Blueprint overrides already


--- USING BLUEPRINT --------------------------------------------------------

Blueprint aligns designs to a grid. If you add a class "showgrid" to any <div class="container showgrid"> it will
show you the grid it is working with, both in terms of columns and rows. You can read more by following the links
on the homepage: http://code.google.com/p/blueprintcss/

To get Blueprint to work with Drupal (because Drupal adds in paddings, borders, and more), we need to override
some values in Drupal and recalculate others so that it more closely follows the grid. Here are how such
calculations work:

# Default values
  - Browsers default font-size: 16px
  - Base font-size: 75% = 12px = 1em
  - Base line-height: 1.5em = 18px

# Calculating font size
  * font-size (em) to font-size (px):
    base * relative = result
    12px * 0.9em    = 10.8px

  * font-size (px) to font-size (em):
    font-size / base font-size = relative font-size
    15px      / 12px           = 1.25em

# Calculating line height
  * font-size (px) to line-height (em):
    base line-height / font-size = line-height
    18px             / 10px      = 1.8em

    * font-size (em) to line-height (em):
    base line-height / (base font-size * font-size) = line-height
    18px             / (12px           * 0.9em    ) = 1.667em

# Calculating pixel size
  1 / font-size = 1 pixel in ems
  1 / 12px      = 0.0834em

# Using horizontal borders
  The box model states that border width is added to the dimensions of the box. This means whenever a top or bottom border
  is used, we must account for the extra height by decreasing the padding.

  Example

  Here we need to adjust the padding-bottom value to account for the extra pixel added by the border-bottom:

    .class {
      border-bottom: 1px solid #ccc;
      padding-bottom: 1.5em;   /* WRONG!! */
    }

  The line height is 18px and putting a padding-bottom of 1.5em gives us a nice full line break below. But because we
  have a border too, we need to do slightly less than 1.5em (e.g., 18px - 1px):

    required pixels / base-font = em value
    17px            / 12px      = 1.4167em

    .class {
      border-bottom: 1px solid #ccc;
      padding-bottom: 1.4167em;   /* CORRECT :) */
    }


--- CHANGELOG --------------------------------------------------------

1.0, 2008-06-4
----------------------

- Initial 1.0 release
1	# $Id: README.txt,v 1.17 2008/06/04 03:32:31 m3avrck Exp $
2
3
4	--- README -------------------------------------------------------------
5
6	Blueprint, Version 1.0
7
8	Written by Ted Serbinski, aka, m3avrck
9	hello@tedserbinski.com
10	http://tedserbinski.com
11
12	Contributors:
13
14	Richard Burford, aka, psynaptic
15	rich@freestylesystems.co.uk
16	http://www.freestylesystems.co.uk
17
18	Requirements: Drupal 5.x
19
20
21
22	--- FEATURES --------------------------------------------------------
23
24	- uses Blueprint 0.7.1 CSS framework: http://code.google.com/p/blueprintcss/
25	- normalizes Drupal's CSS to be consistent
26	- properly aggregates all blueprint CSS files into a single file when this setting is enabled
27	- put scripts at bottom of page for nice performance gains, read more: http://developer.yahoo.com/performance/rules.html#js_bottom
28	- flexible layout, from 1 to 3 columns, based on where you configure your blocks to show (left, center, right)
29	- SEO optimization without the need for heavy modules and additional queries per page
30	- automatically adds META description to many pages, read more: http://googlewebmastercentral.blogspot.com/2007/09/improve-snippets-with-meta-description.html
31	- automatically adds META keywords if taxonomy exists on that node, read more: http://searchengineland.com/070905-194221.php
32	- better forum icons, http://drupal.org/node/102743#comment-664157
33	- improve forum display and performance, http://www.sysarchitects.com/node/70
34	- prevents duplicate form submissions with jQuery, read more: http://tedserbinski.com/2007/01/11/how_to_prevent_duplicate_posts
35	loading animation care of: http://www.ajaxload.info/
36	- shows the # of comments below a node since Drupal doesn't do this by default (usability)
37	- highlight any comments by the author of the node
38	- adds a "you need to login / register" box below all comments if you can't add a comment (usability)
39	- supports conditional comment subjects, if the setting is off it won't show a chopped off title of the comment
40	- uses CSSEdit http://macrabbit.com/cssedit/ comments for grouping of styles
41	- lots of comments and theming tricks in template.php to learn from :)
42
43
44
45	--- INSTALLATION --------------------------------------------------------
46
47	1. Place the blueprint folder in your themes directory.
48
49	2. Download Blueprint 0.7.1+ http://code.google.com/p/blueprintcss/
50	a. Extract folder, creating something like Blueprint 0.7.1
51	b. Rename to "blueprint"
52	c. Ensure your path looks like themes/blueprint/blueprint/blueprint/screen.css
53
54	3. Enable theme under Administer > Site building > Themes
55
56
57
58	--- TIPS --------------------------------------------------------
59
60	- put your custom styles in css/style.css
61	- put any IE hacks into css/ie.css (conditionally loaded as needed)
62	- admin/build/themes/settings
63	- enable site slogan (add one, good for SEO)
64	- enable mission statement (used as META description for homepage in search engines)
65	- enable user pictures
66	- admin/content/comment/settings - configure comments, flat list, expanded, oldest first, show comment form same page
67	- (performance) remove line 76 in screen.css : .showgrid {background:url(src/grid.png);}
68	this saves an uncessary HTTP request on your server
69	- (performance) apply system.css.patch to remove uncessary HTTP requests to images that Blueprint overrides already
70
71
72
73	--- USING BLUEPRINT --------------------------------------------------------
74
75	Blueprint aligns designs to a grid. If you add a class "showgrid" to any <div class="container showgrid"> it will
76	show you the grid it is working with, both in terms of columns and rows. You can read more by following the links
77	on the homepage: http://code.google.com/p/blueprintcss/
78
79	To get Blueprint to work with Drupal (because Drupal adds in paddings, borders, and more), we need to override
80	some values in Drupal and recalculate others so that it more closely follows the grid. Here are how such
81	calculations work:
82
83	# Default values
84	- Browsers default font-size: 16px
85	- Base font-size: 75% = 12px = 1em
86	- Base line-height: 1.5em = 18px
87
88	# Calculating font size
89	* font-size (em) to font-size (px):
90	base * relative = result
91	12px * 0.9em = 10.8px
92
93	* font-size (px) to font-size (em):
94	font-size / base font-size = relative font-size
95	15px / 12px = 1.25em
96
97	# Calculating line height
98	* font-size (px) to line-height (em):
99	base line-height / font-size = line-height
100	18px / 10px = 1.8em
101
102	* font-size (em) to line-height (em):
103	base line-height / (base font-size * font-size) = line-height
104	18px / (12px * 0.9em ) = 1.667em
105
106	# Calculating pixel size
107	1 / font-size = 1 pixel in ems
108	1 / 12px = 0.0834em
109
110	# Using horizontal borders
111	The box model states that border width is added to the dimensions of the box. This means whenever a top or bottom border
112	is used, we must account for the extra height by decreasing the padding.
113
114	Example
115
116	Here we need to adjust the padding-bottom value to account for the extra pixel added by the border-bottom:
117
118	.class {
119	border-bottom: 1px solid #ccc;
120	padding-bottom: 1.5em; /* WRONG!! */
121	}
122
123	The line height is 18px and putting a padding-bottom of 1.5em gives us a nice full line break below. But because we
124	have a border too, we need to do slightly less than 1.5em (e.g., 18px - 1px):
125
126	required pixels / base-font = em value
127	17px / 12px = 1.4167em
128
129	.class {
130	border-bottom: 1px solid #ccc;
131	padding-bottom: 1.4167em; /* CORRECT :) */
132	}
133
134
135
136	--- CHANGELOG --------------------------------------------------------
137
138	1.0, 2008-06-4
139	----------------------
140
141	- Initial 1.0 release