My favorites ▼ | Sign in
Project Home
Checkout   Browse   Changes    
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
 
Blueprint CSS Framework Readme
----------------------------------------------------------------

* Web:    blueprintcss.googlecode.com
* Mail:   groups.google.com/group/blueprintcss
* News:   bjorkoy.com

Welcome to Blueprint! This is a CSS framework designed to 
cut down on your CSS development time. It gives you a solid 
foundation to build your own CSS on. Here are some of the 
features BP provides out-of-the-box:

* An easily customizable grid
* Sensible default typography
* A typographic baseline
* Perfected browser CSS reset
* A stylesheet for printing
* Powerful scripts for customization
* Absolutely no bloat!


Setup instructions
----------------------------------------------------------------

Here's how you set up Blueprint on your site. 

1) Upload the "blueprint" folder in this folder to your server, 
   and place it in whatever folder you'd like. A good choice 
   would be your CSS folder.

2) Add the following three lines to every <head> section of your
   site. Make sure the three href paths are correct (here, BP is in my CSS folder):

   <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
   <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> 
   <!--[if IE]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
	
	 Remember to include trailing slashes (" />") in these lines if you're using XHTML.

3) For development, add the .showgrid class to any container or column
   to see the underlying grid. Check out the 'plugins' directory for
   more advanced functionality.
   

How to use Blueprint
----------------------------------------------------------------

Here's a quick primer on how to use the CSS in Blueprint:
* code.google.com/p/blueprintcss/wiki/Tutorial

Another tutorial on the Blueprint CSS:
* blueflavor.com/blog/design/blueprintcss_101.php

How to customize BP with the compressor script:
* jdclayton.com/blueprints_compress_a_walkthrough.html

How to use a grid in a layout:
* subtraction.com/archives/2007/0318_oh_yeeaahh.php

How to use a baseline in your typography:
* alistapart.com/articles/settingtypeontheweb


Files in Blueprint
----------------------------------------------------------------

The framework has a few files you should check out. Every file
in the 'src' directory contains lots of (hopefully) clarifying 
comments.

Compressed files (these go in the HTML):

* blueprint/screen.css
* blueprint/print.css
* blueprint/ie.css

Source files:

* blueprint/src/reset.css
  This file resets CSS values that browsers tend to set for you.

* blueprint/src/grid.css
  This file sets up the grid (it's true). It has a lot of classes
  you apply to divs to set up any sort of column-based grid.

* blueprint/src/typography.css
  This file sets some default typography. It also has a few
  methods for some really fancy stuff to do with your text.

* blueprint/src/forms.css
  Includes some minimal styling of forms.

* blueprint/src/print.css
  This file sets some default print rules, so that printed versions
  of your site looks better than they usually would. It should be 
  included on every page.

* blueprint/src/ie.css
  Includes every hack for our beloved IE6 and 7.

Scripts:

* lib/compress.rb
  A Ruby script for compressing and customizing your CSS. Set a
  custom namespace, column count, widths, output paths, multiple 
  projects, and semantic class names. See commenting in compress.rb 
  or run $ruby compress.rb -h for more information.

* lib/validate.rb
  Validates the Blueprint core files with the W3C CSS validator.

Other:

* blueprint/plugins/
  Contains additional functionality in the form of simple plugins
  for Blueprint. See individual readme files in the directory
  of each plugin for further instructions.

* tests/
  Contains html files which tests most aspects of Blueprint.
  Open tests/index.html for further instructions.


Also
----------------------------------------------------------------

* For credits and origins, see AUTHORS.
* For license instructions, see LICENSE.
* For the latest updates, see CHANGELOG.

To post bugs and issues, use our Google Code site:
* code.google.com/p/blueprintcss/issues/list

Questions, comments and suggestions goes to
to olav at bjorkoy dot com. Thanks!

Change log

r460 by olavfb on Feb 19, 2008   Diff 
created tag for release 0.7
Go to: 
Project members, sign in to write a code review

Older revisions

r458 by olavfb on Feb 19, 2008   Diff 
Updated tutorial and typo in readme.
r443 by olavfb on Feb 16, 2008   Diff 
Lots of issues closed. See issue
tracker / latest.
r432 by olavfb on Feb 6, 2008   Diff 
Some clarifications in docs.
All revisions of this file

File info

Size: 4336 bytes, 135 lines
Powered by Google Project Hosting