Skip to content
A CSS framework that aims to cut down on your CSS development time
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Blueprint CSS Framework Readme

* URL:
* List:
* News:


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
* 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/lib/ie.css" type="text/css" media="screen, projection"><![endif]-->

3) See screen.css for further configuration options, including 
   advanced functionality through plugins.
4) To use the compressed version on a live site, edit the href 
   paths above to point to the blueprint/compressed directory, 
   where you'll find compressed versions of screen.css, 
   print.css and ie.css.    

How to use Blueprint

Here's a quick primer on how to use BP:

Each CSS file is also heavily commented, so you'll 
learn a lot by reading through them.

Files in Blueprint

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

Main files:

* blueprint/screen.css
  This is the main file of the framework. It imports other CSS 
  files from the "lib" directory, and should be included on 
  every page. We also call it the the configuration file, 
  although you don't actually have to modify it.

* blueprint/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.

Core files:

* blueprint/lib/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/lib/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/lib/reset.css
  This file resets CSS values that browsers tend to set for you.

* blueprint/compressed/screen.css & 
  A compressed version of the core and print files. Use this on 
  every live site. Use the link tags in the HTML to include these.

* blueprint/lib/ie.css
  Contains every hack for Internet Explorer,so that our core 
  files stay sweet and valid.


* 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.

* scripts/
  BP comes with two scripts: 
  * One for validating the CSS in the core files.
  * One for re-compressing the files in the "compressed" folder
    from the core files, if you've made changes to the core.

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


Many parts of BP are directly inspired by other peoples work. 
You may thank them for their brilliance. However, *do not* ask 
them for support or any kind of help with BP.

* Jeff Croft                []
* Nathan Borror             []
* Christian Metts           []
* Wilson Miner              []
* The Typogrify Project     []
* Eric Meyer                []
* Angus Turnbull            []
* Khoi Vinh                 []

Questions, comments, suggestions or bug reports go to
olav at bjorkoy dot com. 

Thanks for your interest!

Something went wrong with that request. Please try again.