Blueprint CSS Framework 指南

http://www.cnblogs.com/fdszlzl/archive/2009/06/10/1500341.html
http://www.cnblogs.com/fdszlzl/archive/2009/06/10/1500361.html
Blueprint CSS Framework 指南
      CSS 框架二月二十一日升级到 0.7.1 版本了。经过这么长时间的这几次版本升级，终于把按功能不同 CSS 规则在不同的 CSS 文件中的模式改为单一文件的模式了，所以感觉 Blueprint CSS 框架现在是一个可以用到实际项目中的 CSS 框架了。

这个 CSS 框架将 html 标签设定为如下情况：

统一重置了 43 个 html 标签（html 4.0 标签一共 91 个）的属性，（html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td）。
重置 html 标签的默认样式为：内外填充边框都为零，字体粗细、字体科族和字体样式继承，字体大小百分之百（在中文情况下使用这个还是改固定象素的好），高度以基线对齐；
设定 body 内的行高为 1.5 倍；字体大小百分之七十五（在中文情况下使用这个还是改固定象素的好）；字体颜色为 #222222 （接近于黑色）
设定 table 的边界间距为有间距、间距为零。（用有间距而间距为零的方式，估计只有这样才能将表格的边界间距设的看不到）；下外填充 1.4em ，宽度 100%；
设定 caption, th, td 内的元素居左，字体粗细为普通；caption 的背景色为 #EEEEEE （特浅的灰），th 背景为 #C3D9FF （浅蓝色）内的字体为粗体，th, td 的内填充为 上4px 右10px 下4px 左5px；
设定 table, td, th 内的元素高度居中；
设表格如果需要隔行换色的效果或者某行需要不一样的颜色，那么已经给定了 tr.even td 类，背景颜色为 #E5ECF9 （浅浅的蓝）
设定 tfood 为斜体字
设定 blockquote, q 元素之前和之后的填充内容为空，引用符号也为空；blockquote 的外填充为 1.5em 字体颜色 #666666 （深灰色），斜体字（中文斜体表现并不好，这个改了斜体不要而用背景色或者字体小一号来表示应该会好点）
设定链接下的图片的 border 为零；
设定 h1 至 h6 不同的字体大小粗细外填充，颜色为 #111111 （更接近于黑）
设定 h1 至 h6 下的图片的外填充为零
设定行内图片元素默认左漂浮，同时给出了一个 p img.right 的类，以备你需要图片右漂浮的时候来用（不过很多时候我们需要的是图片不漂浮，这个需要改或者单独建立一个类了）；
设定链接的颜色为 #000099 （深蓝色）带下划线，鼠标滑过和焦点状态颜色为黑色；
设定 abbr 和 acronym 下边缘为一象素点线的边框；
设定 del 删除字的颜色为 #666666 （中等灰度的灰）；
设定 pre 和 code 内地文字显示为 white-space:pre （就是不换行啦，现在<nobr><wbr><xmp>都不建议用了）；
定义了 ul 和 ol 列表前的标识为实心小圆点和阿拉伯数字。
还有一些各个标签的上右下左的填充、行高、字号大小的设定不细说了。
单独给定了几个可以根据实际需要单独调用的类：

.small 小号字；
.large 大号字；
.hide 不显示；
.quiet 字色为 #666666 （深灰色）；
.loud 字色为 #000000 （黑色）；
.highlight 背景色为 #FFFF00 （黄色）；
.added 背景色为 #006600 （绿色）字色为 #FFFFFF （白色）；
.removed 背景色为 #990000 （红色）字色为 #FFFFFF （白色）；
.first 左边的内外填充都为零；
.last 右边的内外填充都为零；
.top 上面的内外填充都为零；
.bottom 下面的内外填充都为零。
布局部分 CSS 说明：

.container 宽度 950 象素，整体居中模式。这个类应该是主要用于页面 body 元素内的整体页面控制的，好像也没其他用了；
.showgrid 无用的类，这个是用来演示这个框架的一个辅助，可以将这个类删除；
body 元素设定为上下外填充 1.5em，左右外填充为零。
布局的列宽给出了 24 个不同宽度设定的数值：

div.span-1 至 div.span-24 全部设定为左漂浮，右外填充 10 象素；
div.last 设定右外填充为零象素；
.span-1 至 .span-24 从宽度 30 象素开始，每 40 象素为一单元增加；
.span-24 和 div.span-24 右外填充覆盖上面的设置，设置为零。

以上四项综合理解可以理解为：

.span-1 至 .span-23 如果用于 div 元素，那么这个 div 具有的属性是左漂浮，右外填充 10 象素，宽度各自；
.span-1 至 .span-23 如果如果用于其他元素，那么就只具有宽度属性而不具有漂浮属性也没有右外填充；
.span-24 是个特殊一点的样式，如果用于 div 元素，那么宽度为 950 象素，左漂浮，右外填充为零；
.span-24 是个特殊一点的样式，如果用于其他元素，那么宽度为 950 象素，无漂浮，右外填充为零；
div.last 这个类在 CSS 文件中的位置在 div.span-1 至 div.span-24 的后面，所以如果 .last 类应用于 div 元素，那么这个 div 元素的右外填充将覆盖成为零。
内填充数值：

.append-1 至 .append-23 设置内右填充，从 40 像素开始，每 40 像素为一单元增加，.append-23 内右填充数值为 920 像素；
.prepend-1 至 .prepend-23 设置内左填充，从 40 像素开始，每 40 像素为一单元增加，.prepend-23 内左填充数值为 920 像素。
给定两个右边线样式：

div.border 设定右内填充 4px ，右外填充 5px ，右边线 1px 灰色（#EEEEEE）实线；
div.colborder设定右内填充 24px ，右外填充 25px ，右边线 1px 灰色（#EEEEEE）实线。
外填充样式：

.pull-1 至 .pull-24 设定左外填充，从负 40 象素开始到负 960 象素，每 40 象素为一个单元数值变化，同时具有左漂浮和相对定位属性；
.push-1 至 .push-24 设定上填充为零，下填充为 1.5 em ；左外填充，从 40 象素开始到 960 象素，每 40 象素为一个单元数值变化，右外填充，从负 40 象素开始到负 960 象素，每 40 象素为一个单元数值变化，同时具有右漂浮和相对定位属性。

以上两项应该是这个 CSS 框架中最难理解的部分了，在这里不详细说明了，等到写实际应用的时候弄个列子一说就明白作用了；

给定一些其他样式：

.box 顾名思义就是一个盒子了，哈，设定内填充 1.5em ，外下填充 1.5em ，背景颜色 #E5ECF9 (浅浅的蓝)
hr 设定 html 的 <hr /> 横线样式为：背景色 #DDDDDD (灰色)，字色 #DDDDDD (灰色)，两侧不允许有漂浮元素，无漂浮，宽度百分之百，高度 0.1em ，外填充上左右为零，下外填充为 1.5em ，没有边框。具体表现出来基本就是一根横的一象素灰色线了；

hr.space 这个样式是用在 <hr /> 标签内的，设定了背景色和字色都为白色。因为是用在 <hr /> 标签内，所以它同时具有 <hr /> 的设定样式，只是将背景色和字色从灰色覆盖为白色，所以表现起来其实就是一根横的一象素白色线。
给定清除浮动样式：
.clearfix:after 和 .container:after 设定 .clearfix 和 .container 之后的表现为：内容是“.”(一个小点)，显示为块元素，高度为零，两侧不允许有漂浮元素，可见度属性(visibility)为隐藏 (注：可见度 visibility 隐藏属性和 display 隐藏属性有占位区别，visibility 隐藏属性占据空间位置而 display 隐藏属性不占据空间位置)；
.clearfix 和 .container 设定显示样式为行内块(IE 不完全支持此属性，目前只是用这个来让 IE 获得 hasLayout )；
* html .clearfix 和 * html .container 设定在“通配符下的 html 下的.clearfix 和 .container 两个样式”属性高度为 1% (高度为 1% 作用和 zoom:1 的作用是一样的，IE 在 inline-block 加上 1% 或 zoom:1 获得类似 table-cell 的属性，只 IE6 以下识别)；
.clearfix 和 .container 设定显示样式为块模式(覆盖前面指定的行内块模式为块模式，但 IE 不会让 hasLayout 消失，目的由此达到)；
.clear 设定为两侧不允许有漂浮元素。
清除浮动的这三个类中的前两个比较复杂，除了清除浮动外还有一些其他的能力，基本上这几个样式的内容和先后顺序和代码层级设定完后就能在所有的浏览器下清除浮动了(如果某个浏览器不支持的话，那么估计也很难支持这个框架中的大部分 CSS 属性，那么这个框架对这个浏览器来说也没太大的意义了)，具体研究起来就太深了，我是搞不定，不过对我们用的人来说，只要知道你需要清除浮动的时候就用这两个类就可以了。顾名思义，.clearfix 类一般用在你不介意多加一个或者某些情况下你只能多加一个 div 或其他的 html 标签元素而本身内部不包含内容的元素身上来清除浮动，.container 类用在你的一个本身内部包含内容的元素身上来清除浮动。.clear 这个类嘛，没啥可说的了，就是不允许两侧有浮动元素。
表单元素部分：

这部分其实没有太多需要仔细研究的，大部分指定的是表单元素的一些字体、字号、字色和元素的边框、边距、宽、高等。这些就不详说了，说说可以稍微需要知道一下的。

给定了元素的获得焦点的样式(一象浅黑边)，可惜 IE 不支持，所以这个作用不是那么大，毕竟 IE 现在还是占据市场份额的巨头；
给定了三个类，可以用来标识有特殊意义的块区：.error, .notice, .success ，都具有不同的背景色和边框色；

.error 顾名思义标识“错误”
.notice 顾名思义标识“提示”
.success 顾名思义标识“成功”

blueprint可视化工具 - boks 下载

blueprint css frameworks下载




Blueprint CSS Framework 进阶
    css的框架设计能帮我们快速有效的建立高质量的页面，也有助于代码的规范性，当然每一个框架都是建立在无数前人努力的基础上的，下面就推荐一个css框架——the Blueprint CSS Framework
CSS Frameworks + CSS Reset: Design From Scratch

http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch

介绍

blueprint是一个所谓的css framework，相比较而言blueprint 代码中的注释还是比较详细的。

按照Jeff Croft的Frameworks for Designers(或中文版本 理解Web框架，和如何构建一个CSS框架)描述的如何构建一个css framework的方法：

blueprint的构建方式也与此类似：

分而治之：

buleprint在功能组织上，将诸如布局(layout)、排版(typography)、组件（widget）、重置（reset）、打印 (print)等功能分散到不同的css文件中。这样方便使用者只需要导入自己所要使用的功能，不用导入全部文件，提高页面装载性能。目前在组件部分只提 供了对button的处理，尚未做到麦肯锡的MECE（"相互独立，完全穷尽"）的道。

统一接口：

尽管功能分散到多个css文件，但是导入时候，仍然只需要包含同样的文件screen.css文件，具体的导入细节在screen.css中再处理，统一了对外接口。

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />

blueprint 所包含的css文件说明：

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.

类似于Jeff Croft的base.css功能，只需要包含此文件，就可以导入

print.css

This file sets some default print rules, so that printed versions included on every page.

用于处理打印，可以归类为widget。

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.

用于处理页面的布局（栏目）

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.

用于处理页面元素的排版。

lib/reset.css

This file resets CSS values that browsers tend to set for you.

用于重置页面，对没有指定css属性的页面元素指定缺省值。

lib/buttons.css
Provides some great CSS-only buttons.

用于处理按钮,可以归类为widget

lib/compressed.css

A compressed version of the core files. Use this on every live site.

See screen.css for instructions

提供压缩过的（包含grid.css,tyopgraphy.css,reset.css,buttons.css）的css文件。

2、各模块用法研究

2.1、grid.css研究

对跨浏览器居中处理的兼容性处理

一般而言，要处理firefox、ie在处理居中时候的不同，采用如下方式：

body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}        

摘自：http://www.maxdesign.com.au/presentation/center/

blueprint的处理方式：

body { text-align: center; /* IE6 Fix */ margin:36px 0;}

/* A container should group all your columns. */

.container { text-align: left; position: relative; padding: 0; margin: 0 auto; /* Centers layout */ width: 1150px; /* Total width */ }

分栏（Columns）的实现     

blueprint的处理方式：

blueprint定义了.column , .span-x ,.last ，两者结合来实现分栏功能。

其中：.column定义栏目的float属性；.span-x定义栏目宽度；.last将margin-right置为0px,

.column { float : left; margin-right: 10px; padding: 0;}

/* Use these classes to set how wide a column should be. */

.span-1 { width: 30px; }

.span-2 { width: 70px; }

.span-3 { width: 110px; }

.span-4 { width: 150px; }

....span-8 { width: 310px; }

.span-9 { width: 350px; }

.span-10 { width: 390px; }

....span-23 { width: 910px; }

.span-24 { width: 950px; margin: 0; }

.span-25 { width: 200px; }

.span-26 { width: 1150px; margin: 0; }

/* The last element in a multi-column block needs this class. */

.last { margin-right: 0; }

三栏的实现：

<div class ="container" >

<div class ="column span-24" > Header </div>

<div class ="column span-4" > Left sidebar </div>

<div class ="column span-16" > Main content </div>

<div class ="column span-4 last" > Right sidebar </div>

</div>

四栏的实现：

<div class ="container" >

<div class ="column span-26" > Header </div>

<div class ="column span-4" > Left sidebar </div>

<div class ="column span-3 " > Main content 0 </div>

<div class ="column span-25" > Main content 1 </div>

<div class ="column span-4 last" > Right sidebar </div>

</div>

注意把.container中的width(定义了整个页面的width)修改为1150px

空白栏目的实现：对于多栏目（例如5栏目），其中有空白栏目（例如左右两栏目为空白），可以使用.append-x和.prepend-x来填充。

其中.append-x在栏目后（padding-right）添加空白栏目，.prepend-x在栏目前（padding-left）添加空白栏目。

通用的容器定义

/* A container should group all your columns. */

.container { text-align: left; position: relative; padding: 0; margin: 0 auto; /* Centers layout */ width: 1150px; /* Total width */ }



2.2、reset.css研究

reset.css的最初代码应该来自于Eric Meyer,Eric Meyer有两篇关于reset的日志，用于处理跨浏览器缺省值不同的问题。Eric Meyer的文档写得很精彩：

Reset Reasoning：http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

Reset Reloaded：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

为何要reset
The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. (Okay, no two browser families—most Gecko-based browsers do have the same defaults.)
For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding. In past years, we tackled these inconsistencies on a case-by-case basis;

为何使用reset style，而不是universal selector

所谓universal selector 就是使用* 来代表document所有的元素，例如

* { margin: 0;} 关于reset style话题的一些资源：

YUI的reset库：http://developer.yahoo.com/yui/reset/

http://leftjustified.net/journal/2004/10/19/global-ws-reset/

以下几篇实际上是讨论css framework或tips的文章，只不过都提到了reset话题。

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

http://businesslogs.com/design_and_usability/my_5_css_tips.php

http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/

2.3、typography.css研究

typography.css用于确定页面元素缺省的排版格式（baseline）：

Setting Type on the Web to a Baseline Grid：

http://alistapart.com/articles/settingtypeontheweb

2.4、buttons.css研究

Rediscovering the Button Element 讨论了用button元素来替代input元素的种种好处，button元素是提供了较为丰富的功能。

http://particletree.com/features/rediscovering-the-button-element

2.4、print.css研究

Eric Meyer有一篇关于css实现print功能的文章，可以作为理解print.css的参考。

CSS Design: Going to Print

Print Different

2.5、compressed.css

compressed.css是对blueprint几个文件压缩合成包，同时也对css文件进行了压缩，去除了无用的空格、换行、注释等文本。

此种方式用于在上生产系统部署时候使用，避免在页面导入多个css文件，同时也有利于提高页面性能。

按照lib/screen.css中的说明，应该使用了teenage提供的css压缩服务：

http://teenage.cz/acidofil/tools/cssformat.php

另外类似的提供对css、javascrīpt进行优化、压缩的服务还有：

http://csstidy.sourceforge.net/ （开源）

http://www.cssdrive.com/index.php/main/csscompressor/

http://www.cleancss.com/ （基于csstidy）