blueprint-css

by joshuaclayton

joshuaclayton / blueprint-css

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

5.4K Stars 622 Forks Last release: Not found MIT License 473 Commits 9 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

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 @

@ of your site. Make sure the three @[email protected] paths are correct (here, BP is in my CSS folder):


<!--[if lt IE 8]> <![endif]-->

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 @[email protected] directory for more advanced functionality.

h2. Tutorials

  • "How to customize BP with the compressor script":http://jdclayton.com/blueprintscompressa_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 @[email protected] directory contains lots of (hopefully) clarifying comments.

Compressed files (these go in the HTML):

Source files: * @blueprint/src/[email protected]
This file resets CSS values that browsers tend to set for you. * @blueprint/src/[email protected]
This file sets up the grid (it's true). It has a lot of classes you apply to @

@ elements to set up any sort of column-based grid. * @blueprint/lib/blueprint/[email protected]
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/[email protected]
This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text. * @blueprint/src/[email protected]
Includes some minimal styling of forms. * @blueprint/src/[email protected]
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/[email protected]
Includes every hack for our beloved IE6 and 7.

Scripts: * @lib/[email protected]
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 @[email protected] or run @$ruby compress.rb [email protected] for more information. * @lib/[email protected]
Validates the Blueprint core files with the W3C CSS validator.

Other: * @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/[email protected] for further instructions.

h2. Extra Information

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.