84 lines
4 KiB
Plaintext
84 lines
4 KiB
Plaintext
|
h1. Blueprint CSS Framework Readme
|
||
|
|
|
||
|
|
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!
|
||
|
|
|
||
|
|
h2. Project Info
|
||
|
|
|
||
|
|
* *Web*: "http://blueprintcss.org":http://blueprintcss.org
|
||
|
|
* *Source*: "http://github.com/joshuaclayton/blueprint-css":http://github.com/joshuaclayton/blueprint-css
|
||
|
|
* *Wiki*: "http://github.com/joshuaclayton/blueprint-css/wikis/home":http://github.com/joshuaclayton/blueprint-css/wikis/home
|
||
|
|
* *Bug/Feature Tracking*: "http://blueprintcss.lighthouseapp.com":http://blueprintcss.lighthouseapp.com
|
||
|
|
|
||
|
|
h2. Setup Instructions
|
||
|
|
|
||
|
|
Here's how you set up Blueprint on your site.
|
||
|
|
|
||
|
|
# 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.
|
||
|
|
# 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>
|
||
|
|
<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 lt IE 8]>
|
||
|
|
<link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">
|
||
|
|
<![endif]-->
|
||
|
|
</pre>
|
||
|
|
Remember to include trailing slashes (" />") in these lines if you're using XHTML.
|
||
|
|
# 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.
|
||
|
|
|
||
|
|
|
||
|
|
h2. Tutorials
|
||
|
|
|
||
|
|
* "Tutorial on BlueFlavor":http://blueflavor.com/blog/design/blueprintcss_101.php
|
||
|
|
* "How to customize BP with the compressor script":http://jdclayton.com/blueprints_compress_a_walkthrough.html
|
||
|
|
* "How to use a grid in a layout":http://subtraction.com/2007/03/18/oh-yeeaahh
|
||
|
|
* "How to use a baseline in your typography":http://alistapart.com/articles/settingtypeontheweb
|
||
|
|
|
||
|
|
h2. 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@<br/>
|
||
|
|
This file resets CSS values that browsers tend to set for you.
|
||
|
|
* @blueprint/src/grid.css@<br/>
|
||
|
|
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.
|
||
|
|
* @blueprint/src/typography.css@<br/>
|
||
|
|
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@<br/>
|
||
|
|
Includes some minimal styling of forms.
|
||
|
|
* @blueprint/src/print.css@<br/>
|
||
|
|
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@<br/>
|
||
|
|
Includes every hack for our beloved IE6 and 7.
|
||
|
|
|
||
|
|
Scripts:
|
||
|
|
* @lib/compress.rb@<br/>
|
||
|
|
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@<br/>
|
||
|
|
Validates the Blueprint core files with the W3C CSS validator.
|
||
|
|
|
||
|
|
Other:
|
||
|
|
* @blueprint/plugins/@<br/>
|
||
|
|
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/@<br/>
|
||
|
|
Contains html files which tests most aspects of Blueprint. Open @tests/index.html@ for further instructions.
|
||
|
|
|
||
|
|
h2. Extra Information
|
||
|
|
|
||
|
|
* For credits and origins, see AUTHORS.
|
||
|
|
* For license instructions, see LICENSE.
|
||
|
|
* For the latest updates, see CHANGELOG.
|