Blueprint

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编写的。作为一个 CSS 框架，Blueprint可以让你用很整洁的代码来将页面划分成很复杂的网格结构。从一定意义上说，Blueprint 提供了真正的所见即所得的网页设计，因为您的原型将使用与最终站点相同的代码。

使用Blueprint框架的第一步，是在网页中包含screen.css、print.css和ie.css这3个文件。screen.css提供了显示器、投影机显示所需的CSS，print.css提供了打印所需的CSS，ie.css提供了针对IE浏览器的补丁。注意，不要修改Blueprint框架的源代码，当需要改变HTML元素的CSS时，用户应该在自己的CSS文件中编写或修改。这样，当Blueprint框架有新版本推出时，你就可以无痛升级了。实际上，由于 Blueprint 提供了强大的 CSS，因此你可以在 HTML 中设计网页，而不必使用图像设计程序来模拟最终页面

Blueprint提供下面这些类，用于定制排版效果：让元素文本显示得更小；让元素文本显示得更大；隐藏元素；柔化元素文本的颜色；让元素文本显示为黑色等。通过Blueprint框架提供的栅格CSS类，用户以建立任何一种栅格布局的网站。默认的栅格有24列，每一列宽30px，列与列之间的margin是10px，总的宽度是950px。默认的栅格在1024×768分辨率下显示效果良好。除了页头和页尾外，具有3栏布局，两个边栏的宽度是中间内容的1/4。需要注意的是，Blueprint框架要求把所有页面内容都放在之间，也就是说正文内就应该是这个div。其次，除宽度为24列的栏(使用.span-24类)外，每一行的最后一栏必须带有.last类。