A CSS framework that aims to cut down on your CSS development time

  • By Josh Clayton
  • Last update: Dec 15, 2022
  • Comments: 7

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!

Project Info

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/> 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 lt IE 8]>
      <link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection">

    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.


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 <div/> elements to set up any sort of column-based grid.
  • blueprint/lib/blueprint/grid.css.erb
    This file is used by the compressor (see below) when generating grids. All changes to grid.css are mirrored in this file, manually.
  • 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.


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


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

Extra Information

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




  • 1

    removed selectors which made it impossible to overwrite the background color of input fields

    If one wants to change the background color of an input field, this would currently fail (tested in FF3.6.17) as the selectors ([type=...]) take precedence.

    With this patch one is able to e.g. have a red input field with <input class="error" ... />

    Let me know if it negatively influences other areas of blueprint.

  • 2

    Generated .colborder is too wide

    Hello, i'm new to blueprint so maybe my fix is not right.

    I have generated my own blueprint css with help from compress.rb and realized that the colborder is too wide. Hope you can check again.

  • 3


    The input type 'url' is in HTML5, can you add it in the blueprint style ?

    There is lot of new types of input ( http://www.w3.org/TR/html-markup/input.html ), but I'm not sure of the others.


  • 4

    Added travis config to install Qt for capybara-webkit

    Travis build has been broken since introducing capybara-webkit to the gem stack in bd1f0b5. This gem requires a manual install of Qt. Adding this step to a .travis.yml file should solve this.

  • 5

    Small tweaks to compress.rb (optional PNG grid flag, fixed semantic classes for ruby 1.9+)

    ChunkyPNG seems to be flaky on a lot of peoples dev environments, so i made it optional w/ the -g flag. Semantic Classes was using Array's implicit .to_s, which causes a ["...", "..."] output in newer versions of Ruby.

  • 6

    Optimise images (93 KB reduction)

    Hi, joshuaclayton.

    I've taken the liberty of putting blueprint-css's image assets though a range of optimisation tools. Image optimisation allows us to reduce the footprint of images - meaning faster load times at no cost to image quality. It does this by finding the best (lossless) compression parameters, stripping embedded comments, and removing unnecessary colour profiles. See more.

    I found 13 optimisable images, making a 93 KB reduction in size. That's about 68.95% of your total image assets.

    Merry Christmas.


    Tools used: advpng, gifsicle, jpegoptim, jpegrescan, jpegtran, optipng, pngcrush, pngout. This is an automated bot maintained by @skattyadz

  • 7

    Remove Goudy due to IE9 sucking and making it always appear in italics

    ...http://stackoverflow.com/questions/8868222/why-does-goudy-old-style-only-display-in-italics-in-ie9 and http://stackoverflow.com/questions/7910391/ie9-causes-all-webpage-text-to-render-as-italic-when-font-familygoudy-oldstyle