Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Newer
Older
100644 84 lines (64 sloc) 4.179 kb
62d5cb3 Migrated text files to Textile format and cleaned up information
Joshua Clayton authored
1 h1. Blueprint CSS Framework Readme
2
3 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:
4
5 * An easily customizable grid
6 * Sensible default typography
7 * A typographic baseline
8 * Perfected browser CSS reset
9 * A stylesheet for printing
10 * Powerful scripts for customization
11 * Absolutely no bloat!
12
13 h2. Project Info
14
161bc35 @Montoya Updated authors, license, etc. for version 0.8
Montoya authored
15 * *Web*: "http://blueprintcss.org":http://blueprintcss.org
16 * *Source*: "http://github.com/joshuaclayton/blueprint-css":http://github.com/joshuaclayton/blueprint-css
17 * *Wiki*: "http://github.com/joshuaclayton/blueprint-css/wikis/home":http://github.com/joshuaclayton/blueprint-css/wikis/home
62d5cb3 Migrated text files to Textile format and cleaned up information
Joshua Clayton authored
18 * *Bug/Feature Tracking*: "http://blueprintcss.lighthouseapp.com":http://blueprintcss.lighthouseapp.com
19
20 h2. Setup Instructions
21
63795c8 Whitespace
Joshua Clayton authored
22 Here's how you set up Blueprint on your site.
62d5cb3 Migrated text files to Textile format and cleaned up information
Joshua Clayton authored
23
24 # 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.
9be6857 @Montoya Fixing bugs, see Lighthouse for changes
Montoya authored
25 # Add the following three lines to every @<head/>@ of your site. Make sure the three @href@ paths are correct (here, BP is in my CSS folder): <pre><code>
62d5cb3 Migrated text files to Textile format and cleaned up information
Joshua Clayton authored
26 <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
63795c8 Whitespace
Joshua Clayton authored
27 <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
3980cbe @Montoya Updated conditional comments to [if lt IE 8]
Montoya authored
28 <!--[if lt IE 8]>
62d5cb3 Migrated text files to Textile format and cleaned up information
Joshua Clayton authored
29 <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
9be6857 @Montoya Fixing bugs, see Lighthouse for changes
Montoya authored
30 <![endif]--></code></pre>
62d5cb3 Migrated text files to Textile format and cleaned up information
Joshua Clayton authored
31 Remember to include trailing slashes (" />") in these lines if you're using XHTML.
32 # 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.
63795c8 Whitespace
Joshua Clayton authored
33
62d5cb3 Migrated text files to Textile format and cleaned up information
Joshua Clayton authored
34
35 h2. Tutorials
36
37 * "How to customize BP with the compressor script":http://jdclayton.com/blueprints_compress_a_walkthrough.html
056483d Fix bad link in README.
Joe Wasson authored
38 * "How to use a grid in a layout":http://subtraction.com/2007/03/18/oh-yeeaahh
62d5cb3 Migrated text files to Textile format and cleaned up information
Joshua Clayton authored
39 * "How to use a baseline in your typography":http://alistapart.com/articles/settingtypeontheweb
40
41 h2. Files in Blueprint
42
43 The framework has a few files you should check out. Every file in the @src@ directory contains lots of (hopefully) clarifying comments.
44
45 Compressed files (these go in the HTML):
46
47 * @blueprint/screen.css@
48 * @blueprint/print.css@
49 * @blueprint/ie.css@
50
51 Source files:
52 * @blueprint/src/reset.css@<br/>
53 This file resets CSS values that browsers tend to set for you.
54 * @blueprint/src/grid.css@<br/>
55 This file sets up the grid (it's true). It has a lot of classes you apply to @<div/>@ elements to set up any sort of column-based grid.
4415f51 @Montoya updating README to mention grid.css.erb
Montoya authored
56 * @blueprint/lib/blueprint/grid.css.erb@<br/>
57 This file is used by the compressor (see below) when generating grids. All changes to grid.css are mirrored in this file, manually.
62d5cb3 Migrated text files to Textile format and cleaned up information
Joshua Clayton authored
58 * @blueprint/src/typography.css@<br/>
59 This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text.
60 * @blueprint/src/forms.css@<br/>
61 Includes some minimal styling of forms.
62 * @blueprint/src/print.css@<br/>
63 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.
64 * @blueprint/src/ie.css@<br/>
65 Includes every hack for our beloved IE6 and 7.
66
67 Scripts:
68 * @lib/compress.rb@<br/>
69 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.
70 * @lib/validate.rb@<br/>
71 Validates the Blueprint core files with the W3C CSS validator.
72
73 Other:
74 * @blueprint/plugins/@<br/>
75 Contains additional functionality in the form of simple plugins for Blueprint. See individual readme files in the directory of each plugin for further instructions.
76 * @tests/@<br/>
77 Contains html files which tests most aspects of Blueprint. Open @tests/index.html@ for further instructions.
78
79 h2. Extra Information
80
81 * For credits and origins, see AUTHORS.
82 * For license instructions, see LICENSE.
056483d Fix bad link in README.
Joe Wasson authored
83 * For the latest updates, see CHANGELOG.
Something went wrong with that request. Please try again.