Blueprint是當前互聯網上最流行的CSS框架，它的縮寫是BP。Blueprint框架是為了節約開發時間而設計的，我們可以在Blueprint框架的基礎上構建我們的CSS。對于每個頁面都有獨特設計的網站，Blueprint框架最為適用。

通過學習Blueprint框架源代碼包tests目錄下網頁的源代碼，我們可以快速掌握Blueprint的特性。和一般意義上的框架不同，Blueprint不會告訴我們應該如何組織或編寫CSS，它更像一個工具箱，我們可以根據需要選用。

Blueprint框架有三個組成部分：首先是重置CSS，移除了不同Web瀏覽器設置的CSS默認規則；二是排版規則，提供良好的默認排版效果和顏色；三是柵格，提供了用于創建柵格布局的CSS類。

除此之外，Blueprint框架還提供了兩個腳本Compressor和Validator。Compressor腳本用于壓縮和定制Blueprint源文件。Validator腳本用于校驗Blueprint核心文件。這兩個腳本都是用Ruby編寫的。

具體的用法如下(請按照屏幕提示操作)：

$ sudo aptitude install ruby rubygems
$ sudo gem install bundler
$ cd ~/src/blueprint/lib
$ ruby validate.rb
$ ruby compress.rb

使用Blueprint框架的第一步，是在網頁中包含screen.css、print.css和ie.css這3個文件。screen.css提供了顯示器、投影機顯示所需的CSS，print.css提供了打印所需的CSS，ie.css提供了針對IE瀏覽器的補丁。

具體的代碼如下：

注意，不要修改Blueprint框架的源代碼，當我們需要改變HTML元素的CSS時，我們應該在自己的CSS文件中編寫或修改。這樣，當Blueprint框架有新版本推出時，我們就可以無痛升級了。

下面簡要介紹一下Blueprint框架的排版規則。Blueprint提供下面這些類，用于定制排版效果：

.smaller：讓元素文本顯示得更小
.larger：讓元素文本顯示得更大
.hide：隱藏元素
.quiet：柔化元素文本的顏色
.loud：讓元素文本顯示為黑色
.highlight：把文本背景顏色設置為黃色
.added：把文本背景顏色設置為綠色
.removed：把文本背景顏色設置為紅色
.first：移除元素左側的margin和padding
.last：移除元素右側的margin和padding
.top：移除元素頂部的margin和padding
.bottom：移除元素底部的margin和padding

我們還可以使用下面這些類來定制表單的顯示效果：