| 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 | |
|---|
| 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 |
|---|
| 18 | * *Bug/Feature Tracking*: "http://blueprintcss.lighthouseapp.com":http://blueprintcss.lighthouseapp.com |
|---|
| 19 | |
|---|
| 20 | h2. Setup Instructions |
|---|
| 21 | |
|---|
| 22 | Here's how you set up Blueprint on your site. |
|---|
| 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. |
|---|
| 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> |
|---|
| 26 | <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection"> |
|---|
| 27 | <link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print"> |
|---|
| 28 | <!--[if lt IE 8]> |
|---|
| 29 | <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"> |
|---|
| 30 | <![endif]--></code></pre> |
|---|
| 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. |
|---|
| 33 | |
|---|
| 34 | |
|---|
| 35 | h2. Tutorials |
|---|
| 36 | |
|---|
| 37 | * "How to customize BP with the compressor script":http://jdclayton.com/blueprints_compress_a_walkthrough.html |
|---|
| 38 | * "How to use a grid in a layout":http://subtraction.com/2007/03/18/oh-yeeaahh |
|---|
| 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. |
|---|
| 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. |
|---|
| 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. |
|---|
| 83 | * For the latest updates, see CHANGELOG. |
|---|
