blueprint--css framework研究

介绍

k_-I y%?Z-Q&}0blueprint是一个所谓的css framework，相比较而言blueprint 代码中的注释还是比较详细的。

Z+X7A;Vm"U M0

S)Hn P TIG9A H0按照Jeff Croft的Frameworks for Designers(或中文版本理解Web框架，和如何构建一个CSS框架)描述的如何构建一个css framework的方法：PHPChina 开源社区门户K"[mn9Y

PHPChina 开源社区门户Lv8{ U)h'a_/P

   There are several possible ways to go about building a framework, but the most common and arguably the most useful is to abstract your common CSS into individual stylesheets that each cover a particular part of the whole. For example, you may have a stylesheet that sets up the typography and another that handles the mass reset. The beauty of the approach is the ability to selectively include only the styles that you need. You may end up with six or seven different stylesheets in your framework, but if a particular project doesn’t need one or two of them, they don’t have to be included. The framework we created in our office has five stylesheets:.PHPChina 开源社区门户C9sfH T#}

• reset.css—handles the mass reset.
• type.css—handles the typography.
• grid.css—handles the layout grid.
• widgets.css—handles widgets like tabs, drop-down menus, and “read more” buttons.
• base.css—includes all the other stylesheets, so that we only need to call base.css from our (X)HTML documents to use the entire framework.

u1CzO$k0 PHPChina 开源社区门户JP#XC!VG F;g(i

+u.L"S"fG0blueprint的构建方式也与此类似：PHPChina 开源社区门户oaH*T(X!C

g+/5v#gQ} W0   分而治之：PHPChina 开源社区门户 xw1p0l
g3x2S

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

CY}�/(p$@Ja0

Mt3Kd9S%c0   统一接口：

cR:hTi.A0PHPChina 开源社区门户8o:Qm1/C

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

]E i)hc0PHPChina 开源社区门户#F9K6MFXu.W

    <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />PHPChina 开源社区门户!S"f0?.X-VI

2GfO P,_8J)@0   blueprint 所包含的css文件说明：

1I E+d7O_0

• screen.css
  AV*/n0LtQ/h0  This is the main file of the framework. It imports other CSS
  "@{rw�jw0  files from the "lib" directory, and should be included onPHPChina 开源社区门户O#K0@fAM8v
    every page.

E1[�ac#l'v"J�m0           类似于Jeff Croft的base.css功能，只需要包含此文件，就可以导入

a5K7I l}Z"e0

• print.css
  `)D8S.Vl|6{0  This file sets some default print rules, so that printed versionsPHPChina 开源社区门户"kv5^&?h3C|
    of your site looks better than they usually would. It should be
  h"X�v:Z�^)`-gZ0  included on every page.

PHPChina 开源社区门户xnq2U?3lx V

         用于处理打印，可以归类为widget。PHPChina 开源社区门户J3x(A k%Hap/l

• lib/grid.css
  x k V?VD8k#k:]$p0  This file sets up the grid (it's true). It has a lot of classesPHPChina 开源社区门户"|:?8QN b Z K9Nw-M
    you apply to divs to set up any sort of column-based grid.

rH"?ED:d9N�G0           用于处理页面的布局（栏目）PHPChina 开源社区门户2c4@(F ^3?&j

• lib/typography.cssPHPChina 开源社区门户cJ v8/;pm:}
    This file sets some default typography. It also has a fewPHPChina 开源社区门户Q8pP ]o$v
    methods for some really fancy stuff to do with your text.

ZX _Wy8|RJd6X.n0D0          用于处理页面元素的排版。PHPChina 开源社区门户8jh^ eK}n

• lib/reset.cssPHPChina 开源社区门户;j"sIE'[p'k*zR:T"s|
    This file resets CSS values that browsers tend to set for you.

PHPChina 开源社区门户5js)u.C#B Fxvj

           用于重置页面，对没有指定css属性的页面元素指定缺省值。PHPChina 开源社区门户},xU h5O[.[ P+D

• lib/buttons.cssPHPChina 开源社区门户(J%FN ^c X3_3H
    Provides some great CSS-only buttons.

PHPChina 开源社区门户m-n6i|R`^

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

!e9D6ow7TKx3a0

• lib/compressed.css
  YW'V
  LxA0  A compressed version of the core files. Use this on every live site.
  &bpZT~,i_ cf0  See screen.css for instructions

!N/hl%zD+c*c_0          提供压缩过的（包含grid.css,tyopgraphy.css,reset.css,buttons.css）的css文件。PHPChina 开源社区门户e1|*jS;C

2、各模块用法研究

2.1、grid.css研究

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

k@/G7_%lo&L9`/|0一般而言，要处理firefox、ie在处理居中时候的不同，采用如下方式：PHPChina 开源社区门户GD&B:c9J M�n

body
u$`5[1N1{0{
1rG_g:udy6`j@:l0text-align: center;PHPChina 开源社区门户'ihJ3P3|t{0P
}
D-H }b7Ja
_b0
qjh}!lz1z4V:}5@0div#container
Z�_#@hN,wf"q%}0{
5/ XNT)y3Ch6m*^/Z/t0margin-left: auto;
pi;k([1[4Q/TV0margin-right: auto;
Z%^
~PsP0width: 50em;PHPChina 开源社区门户-Q.x6D.{ xey'V
text-align: left;
w7R6uw6R1I0}

n4~ m,v@0          摘自：http://www.maxdesign.com.au/presentation/center/

:PW.z6n z0

PHPChina 开源社区门户;Aa�JK)r)_Zl&A1O

blueprint的处理方式：PHPChina 开源社区门户&a_{-t$C$H4He2Us8xg

body {
Ll;qhK0text-align: center;/* IE6 Fix */
8X�j7y1qp;k0margin:36px 0;PHPChina 开源社区门户:[}hp_:vq:O9{
}
9j*p3O~5Qg0PHPChina 开源社区门户FCa$V%pnG
/* A container should group all your columns. */
7H+J2b^k0.container {PHPChina 开源社区门户+Z%ig|dJm$B
J
text-align: left;PHPChina 开源社区门户NG2F5DT8`0r#b
position: relative;PHPChina 开源社区门户2@Ka1/8R3ep
padding: 0;PHPChina 开源社区门户7UT]sHC5E(o,xAX
margin: 0 auto;/* Centers layout */PHPChina 开源社区门户VI|;ztD4?x`
width: 1150px;/* Total width */
StUy,rOL0}

• 分栏（Columns）的实现

[eH!{,o0      blueprint的处理方式：

2PwDt0c0

W.G4]#u6ubW0          blueprint定义了.column  , .span-x ,.last  ，两者结合来实现分栏功能。PHPChina 开源社区门户7S m uC8JC

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

X(}.w4S;j#dk-F0

.column {PHPChina 开源社区门户;SDGYW6a$w!Cdq
float: left;
n�xhni2H0margin-right: 10px;
7WNKI^Kgj7UW0padding: 0;PHPChina 开源社区门户}Z"XFa
}
x*S8c|&rCK0D0PHPChina 开源社区门户0SG3l1j#}z"tb

/* Use these classes to set how wide a column should be. */
e7Di)zGr@sN0.span-1   { width: 30px; }
%I n&v$M@#u/S0.span-2   { width: 70px; }
/*H;Q&w5^5q.ms%{0.span-3   { width: 110px; }
0C%]I$?d0.span-4   { width: 150px; }
[CW@ ~t]0...PHPChina 开源社区门户dYR1N0j?x:N
.span-8   { width: 310px; }
A2F~@#Of sRAt0.span-9   { width: 350px; }PHPChina 开源社区门户�N!ND�e:e
.span-10  { width: 390px; }
Blu:v,u0...PHPChina 开源社区门户!E{7y`#G(K2g
.span-23  { width: 910px; }PHPChina 开源社区门户t-PeCTe2pK
.span-24  { width: 950px; margin: 0; }
 c7r{z+z0.span-25  { width: 200px; }PHPChina 开源社区门户d0}6bcE.@;z!Xn
.span-26 { width: 1150px; margin: 0; }
W#Ygs.REA`5d0/* The last element in a multi-column block needs this class. */PHPChina 开源社区门户Qp'H!S%x:K
.last     { margin-right: 0; }

三栏的实现：

<divclass="container">PHPChina 开源社区门户7JX|RYiV
<divclass="column span-24">PHPChina 开源社区门户!@/$Vsc)_|d1{
Header
Jh5]KU$f
`R0</div>PHPChina 开源社区门户4r1U#K&H!dAK
<divclass="column span-4">PHPChina 开源社区门户 _.C(U6H'l
Left sidebar
;c'KAVH
b5{#Q0</div>
2UZE+rb)pLw0<divclass="column span-16">
i2uDy)RW0Main content
:z:|4I1TL}0kZ"N x0</div>
vi|F7Zwu;N0<divclass="column span-4 last">
.JR1pa{hX[2W0Right sidebar
imLv/C;O0</div>PHPChina 开源社区门户9m2M+S7Ohz{x,n
</div>

四栏的实现：

<divclass="container">
2R9}t(Yb:y0<divclass="column span-26">PHPChina 开源社区门户zrC9b.n3z{$i
pB8Q
HeaderPHPChina 开源社区门户!q&q&w7vfV"Pc:ds
</div>PHPChina 开源社区门户3i4S@dR
<divclass="column span-4">
[$lFSs9u9E0Left sidebarPHPChina 开源社区门户�_/jW-g8W`@
</div>PHPChina 开源社区门户F(/_5m
Fc5l;h`!@
<divclass="column span-3 ">PHPChina 开源社区门户(l+/rJ,R1MP.o
Main content 0
4Nhjy[y@eH0</div>PHPChina 开源社区门户i)CJh3_8R
t!v
<divclass="column span-25">
0J#j9ZWZcN0Main content  1

j
EA�X;`/eN0</div>PHPChina 开源社区门户:wac"zkN
<divclass="column span-4 last">PHPChina 开源社区门户!x0Y'Tkg/*S
Right sidebar
/_g~/8]fC;iH0</div>PHPChina 开源社区门户/$^;|.HOT2ym'~5_
</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. */PHPChina 开源社区门户hqmK!u8/0y(z2t
.container {PHPChina 开源社区门户R)fAn*Ttq2w
text-align: left;PHPChina 开源社区门户]BL0RHSw ~
position: relative;
 }:a o7@u7l0padding: 0;PHPChina 开源社区门户S2WD5P#FW
_i
margin: 0 auto;/* Centers layout */PHPChina 开源社区门户p+T{xc6k
_
width: 1150px;/* Total width */PHPChina 开源社区门户2u{8LG`E#x)[
}

2.2、reset.css研究

Ya:FDB_ o0reset.css的最初代码应该来自于Eric Meyer,Eric Meyer有两篇关于reset的日志，用于处理跨浏览器缺省值不同的问题。Eric Meyer的文档写得很精彩：PHPChina 开源社区门户%y!}-C4/ q

PHPChina 开源社区门户U[ vKh!G/Y1Tu3F

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

]
nN's_7v;s l~6I0

;LP O.{n ])?*}g0Reset Reloaded：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

&?$}WJ/xN.sy WTU0

• 为何要reset

PHPChina 开源社区门户o&Y a X%C;C5Z:F

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.)
n} p-pKMw2M0For 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;PHPChina 开源社区门户5H5Bv~Ur

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

e s F~ [ [4D0所谓universal selector 就是使用* 来代表document所有的元素，例如

$BI8I%i8T.uB0

* {
0M ?9V_ t6L3Xa0margin: 0;PHPChina 开源社区门户[wDO8sU
padding 0;
zh1F4zdl
~0}

• 关于reset style话题的一些资源：

PHPChina 开源社区门户&YVo)[,T[

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

]2Z-QIp0j0PHPChina 开源社区门户;R9D awj0j@'c'xdEc

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

4_$VVQ$R
H_6N0PHPChina 开源社区门户v5t]2I Vgi B

 PHPChina 开源社区门户//~,r:B0R$B7i3U)F1c

:zY+B{&TY_0以下几篇实际上是讨论css framework或tips的文章，只不过都提到了reset话题。PHPChina 开源社区门户 ^H_vW;k4~;p

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

C_U@�cp5y0PHPChina 开源社区门户I;D5Og*Q d

http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/PHPChina 开源社区门户/Sq ct|k8`*o/n

PHPChina 开源社区门户V"Oa;HzY2d1y

http://businesslogs.com/design_and_usability/my_5_css_tips.phpPHPChina 开源社区门户YVvi.?"i9K'|Q u

'uA4?j?t*RC0http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/PHPChina 开源社区门户:h]3Om/}a|

;T2Eg1d? M``3|0 

6}/}V*s:lE0

2.3、typography.css研究

gx0gT RwZ0W6um `+P0typography.css用于确定页面元素缺省的排版格式（baseline）：

b'N9s3_Q#pMQD0PHPChina 开源社区门户P;|m&i!|/_e

Setting Type on the Web to a Baseline Grid：PHPChina 开源社区门户 h ~-? gm5B'y3V

3}C [-[d/V)N9|P0 http://alistapart.com/articles/settingtypeonthewebPHPChina 开源社区门户V9re!d3yCv3e+B

PHPChina 开源社区门户^@U j9^6A${:q'M}

 PHPChina 开源社区门户%Au�QnNW X6w

2.4、buttons.css研究

.S{ ^)s.f;M0Rediscovering the Button Element讨论了用button元素来替代input元素的种种好处，button元素是提供了较为丰富的功能。

/K/Kj H.U-O h
[0PHPChina 开源社区门户 O3g?2T,G.ej9dq

http://particletree.com/features/rediscovering-the-button-elementPHPChina 开源社区门户0RRG'H7}

y�U+c4Sm)e9o$F0 

qY^}OFw9t0

2.4、print.css研究

&z$n E$[([0Eric Meyer有一篇关于css实现print功能的文章，可以作为理解print.css的参考。

[ n*]#[2w+AJ/a;K-bjEX0

CSS Design: Going to Print

Print Different

2.5、compressed.css

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

}2K%A1K6|#R~t0

jc�j ~-J(lA+R0      此种方式用于在上生产系统部署时候使用，避免在页面导入多个css文件，同时也有利于提高页面性能。

V p_%P_ aX&UD;c0

-COyg6f.U#wZ(R0按照lib/screen.css中的说明，应该使用了teenage提供的css压缩服务：

dI3sy BNB&| ^4?6Z0

Qc3@;n$j0 http://teenage.cz/acidofil/tools/cssformat.php

:OwM].b0PHPChina 开源社区门户 C$f~'k C dV

另外类似的提供对css、javascrīpt进行优化、压缩的服务还有：PHPChina 开源社区门户TP1T:H$U�Z;Z1U

PHPChina 开源社区门户+sb tV.n0}4SR

http://csstidy.sourceforge.net/（开源）PHPChina 开源社区门户B0LL4R
L5Q#G@?,O

PHPChina 开源社区门户U'F3W4I;S ?

http://www.cssdrive.com/index.php/main/csscompressor/PHPChina 开源社区门户1^$B`*yU7Vv;_H&y

jX&^7{eo�e0http://www.cleancss.com/（基于csstidy）PHPChina 开源社区门户/}Q9z5o.M6p?

PHPChina 开源社区门户#P"]6~ h.p'p.p D

 PHPChina 开源社区门户q
b,[ e#tU O-a6e#m

3、使用例子

PHPChina 开源社区门户v S M3QG.O

 

M+^9P/H@U0

-l!u8Z-pNf/b~&G0 PHPChina 开源社区门户@9`8lQD

4、参考文档

http://code.google.com/p/blueprintcss/wiki/Tutorial
8X/Xo5Y)C4LR1TF0

e-nP$pS0Qm`%a0 

.f5FAgFm5wgIo0

5、相关项目

PHPChina 开源社区门户Zb8E6A jM v

blueprint-generator:http://kematzy.com/blueprint-generator/

0j6~X�m3M7K4_0

Wx!ML/rA"@0tripoli :http://monc.se/tripoli/