blueprint--css framework研究

介绍

PHPChina 开源社区门户$s,_sW zd!ue6]8x4y

blueprint是一个所谓的css framework，相比较而言blueprint 代码中的注释还是比较详细的。PHPChina 开源社区门户)N0m@S9e

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

Y,H'K8apFV5gA|0PHPChina 开源社区门户S8H]K+wB

   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:.

m.d3r\eM0

• 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.

PHPChina 开源社区门户L Zxzq3a9Y

 PHPChina 开源社区门户+u?!IfW8fF

0`j*v]a-@3G7L0blueprint的构建方式也与此类似：

Y,a'|{{T._/X6t0PHPChina 开源社区门户GmX6nX];R$~w

   分而治之：

tw4R
}gbI0PHPChina 开源社区门户y
?.t7xk~R)sh7Q$BS

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

"C _A0WY8X0

%b#p'VR7yK"X0   统一接口：

y`qS)K){gA0PHPChina 开源社区门户8r"Bmk*d/J;sfD

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

"Yb ik O~}1H0

(L\8xE'w^-gBk0    <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />PHPChina 开源社区门户(m ?w(jf|1]W
q

;@o1c)Z3FLNr0   blueprint 所包含的css文件说明：PHPChina 开源社区门户nCXe*t

• screen.cssPHPChina 开源社区门户0@jA+Z'?7n |7`&COe
    This is the main file of the framework. It imports other CSSPHPChina 开源社区门户c,C4Ev z3x7B
  v
    files from the "lib" directory, and should be included onPHPChina 开源社区门户@f?$r]
    every page.

PHPChina 开源社区门户oJ6gz`n

           类似于Jeff Croft的base.css功能，只需要包含此文件，就可以导入PHPChina 开源社区门户Y1|6qy0_!Gq

• print.cssPHPChina 开源社区门户hT.bU+F5uN1sA
    This file sets some default print rules, so that printed versionsPHPChina 开源社区门户;BA ^Rx1VwK:F
    of your site looks better than they usually would. It should bePHPChina 开源社区门户^h9@0_}K2N7|
    included on every page.

8}
^(k+c4E,Iw@?R0         用于处理打印，可以归类为widget。

wLKM$Ly.Tn ~G0

• lib/grid.cssPHPChina 开源社区门户:J2?q}@X(H
    This file sets up the grid (it's true). It has a lot of classes
  s*t~'F2Rv0  you apply to divs to set up any sort of column-based grid.

LOdMz%@/n&C ~0           用于处理页面的布局（栏目）PHPChina 开源社区门户:]1ayk9Mgi"I

• lib/typography.cssPHPChina 开源社区门户2y(wx|#d~
    This file sets some default typography. It also has a few
  a? K kdx sa#Y(VW0  methods for some really fancy stuff to do with your text.

B'MaeJ0          用于处理页面元素的排版。PHPChina 开源社区门户5k.q6C#t'G+V%J#@

• lib/reset.css
  +i5R2W[a2P0  This file resets CSS values that browsers tend to set for you.

:F;Y}Y?-}i!v0           用于重置页面，对没有指定css属性的页面元素指定缺省值。

mR(Ou"{+BWJ0

• lib/buttons.cssPHPChina 开源社区门户;E Q6I'v0b"cyc
    Provides some great CSS-only buttons.

PHPChina 开源社区门户wsq8C:Ew

           用于处理按钮,可以归类为widgetPHPChina 开源社区门户zbA]-N*u

• lib/compressed.css
  Y"}5?$` dT0  A compressed version of the core files. Use this on every live site.PHPChina 开源社区门户%pnV1_3c,Y6E"i$e]
    See screen.css for instructions

PHPChina 开源社区门户c;G3]d g8`(g

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

q:^c!q*T}7u-Up0

2、各模块用法研究

2.1、grid.css研究

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

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

i Z4k7GQ'y_ z5s Zk0

bodyPHPChina 开源社区门户!GT;z.?)n)Y0]_|
{PHPChina 开源社区门户
FY-lyZ;q
Cx4\&r
text-align: center;
.]+]
dNp0}
L%p.AuO&I${gg0PHPChina 开源社区门户z5n5GxpNK-MU:u
div#containerPHPChina 开源社区门户J
t,Q3O^-\xxy
{PHPChina 开源社区门户3dO)hGb7Wc:A
margin-left: auto;
'|YK
z0~,Te8c0margin-right: auto;
3R(Zv0Gg(Gkf0width: 50em;PHPChina 开源社区门户6B%W1d!V oa-WMaJ?
text-align: left;PHPChina 开源社区门户
`B'Hr;u#J4~['QsI
}

$F _ PF)B~0          摘自：http://www.maxdesign.com.au/presentation/center/

0E;f&]9n:oz,^_0blueprint的处理方式：

i[n.m/QFe0

body {PHPChina 开源社区门户"S/D"QIU!S
text-align: center;/* IE6 Fix */PHPChina 开源社区门户O9Iiol-tVD5k#nif
margin:36px 0;PHPChina 开源社区门户
N}T,Ek
}PHPChina 开源社区门户3y3vTF2V4D

RbN1uu)L!i0/* A container should group all your columns. */PHPChina 开源社区门户Yw8PBW
lY
.container {
7ln,^6qT0text-align: left;
J1bs(j.[*@(P}0position: relative;
)n(Y1G*q3A0padding: 0;PHPChina 开源社区门户$p)U@
x`UL`CD1}
margin: 0 auto;/* Centers layout */PHPChina 开源社区门户
SH0@4B3cW
width: 1150px;/* Total width */PHPChina 开源社区门户i
e!m5I9_%Tsb"L
}

• 分栏（Columns）的实现

      blueprint的处理方式：

S.h6|a{1e0          blueprint定义了.column  , .span-x ,.last  ，两者结合来实现分栏功能。PHPChina 开源社区门户-\6N%rrO)L];g

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

.column {PHPChina 开源社区门户6PA2z4["z3x-v
float: left;PHPChina 开源社区门户,oN9Hj#T
\,sEl Z$bf
margin-right: 10px;PHPChina 开源社区门户2HY-V_
[/d$QOtHv
padding: 0;PHPChina 开源社区门户M}k](obJF/c
}PHPChina 开源社区门户-WG
xn i*j!Y
PHPChina 开源社区门户F(K
Y9H
x.\6|
B|

/* Use these classes to set how wide a column should be. */
T)s;O$C.L0.span-1   { width: 30px; }
w/zA	AG.[0.span-2   { width: 70px; }PHPChina 开源社区门户d4_)H"BcRF[
.span-3   { width: 110px; }PHPChina 开源社区门户U"NqDp%K4e
.span-4   { width: 150px; }
w9I@9Q?_(l:T
B0...PHPChina 开源社区门户wH+|:lv
.span-8   { width: 310px; }
&aod%^&C:L6q.w0.span-9   { width: 350px; }
M-Y.a.fi~`yeJf0.span-10  { width: 390px; }PHPChina 开源社区门户/_3x-](d%nrK
...
.Y(T;b5]'yL4l*q$h0.span-23  { width: 910px; }
 Y;Dk2O)n&l0.span-24  { width: 950px; margin: 0; }PHPChina 开源社区门户(]z8y
w5S1_Z'Q@
.span-25  { width: 200px; }PHPChina 开源社区门户#XO&z!vE`!q;i6s|*R%z
.span-26 { width: 1150px; margin: 0; }PHPChina 开源社区门户zf `hv
/* The last element in a multi-column block needs this class. */
$\)c'umSfk0.last     { margin-right: 0; }

三栏的实现：

<divclass="container">PHPChina 开源社区门户,B/]Z]1LB{)b
<divclass="column span-24">
2[*jz{7B `OQ%B0HeaderPHPChina 开源社区门户;_*C.z
X.BIN'}#{
</div>
2r}CC@Emm0<divclass="column span-4">
&Y3?[G/_'@5Z Pe!` ?0Left sidebar
ug5qYe0</div>PHPChina 开源社区门户R4sp5g{`PN
<divclass="column span-16">
X_6e	fa_'b0Main content
f%u
}}!A](f2m0</div>
obS%A3A0<divclass="column span-4 last">
(@oL0n8Nu7ZB0Right sidebarPHPChina 开源社区门户'MP/_|%c
</div>
ub8j$|8Y]-B0</div>

四栏的实现：

<divclass="container">PHPChina 开源社区门户
PyB4Q+U
<divclass="column span-26">PHPChina 开源社区门户C1kTc4q(ql
Header
Ovx.e1b$?0</div>PHPChina 开源社区门户2WIw5Q%l
<divclass="column span-4">
'U^%[fMZP'|*o8D0Left sidebarPHPChina 开源社区门户C8zG(YM
</div>
7FByE^2E
S2f0<divclass="column span-3 ">PHPChina 开源社区门户#~iU)S
T*?
Main content 0PHPChina 开源社区门户!a(YE{d7\)g:t
</div>PHPChina 开源社区门户Y0H;H1@;d%}
<divclass="column span-25">PHPChina 开源社区门户'd5}8Hx5T
Main content  1PHPChina 开源社区门户9~dH`|:O^
</div>
+KM
G9ej$]g1]0<divclass="column span-4 last">PHPChina 开源社区门户(_/_!?$E;j?}
Right sidebar
d{3M0_;Itr0</div>PHPChina 开源社区门户"C-k
fluA0\)U
</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 开源社区门户F%Q"SQ[pHU
.container {PHPChina 开源社区门户H-sirJ6|n+}
text-align: left;PHPChina 开源社区门户Zd	f(Y]$z:o
position: relative;
6yZSz(g:]L0padding: 0;PHPChina 开源社区门户f0tI8iC5i6M
margin: 0 auto;/* Centers layout */PHPChina 开源社区门户?e0_g
E-d:J,p;\!b
width: 1150px;/* Total width */PHPChina 开源社区门户5?L;gA(h
?C%B
}

2.2、reset.css研究

PHPChina 开源社区门户9]#olF'h-s

reset.css的最初代码应该来自于Eric Meyer,Eric Meyer有两篇关于reset的日志，用于处理跨浏览器缺省值不同的问题。Eric Meyer的文档写得很精彩：PHPChina 开源社区门户i0^:{t#a^Y \X
W

eU$F+LD|+nlhU0Reset Reasoning：http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

&K%rH| RFQT3z#p0

0e9PA&D].wbk!S0Reset Reloaded：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/PHPChina 开源社区门户!Bk*MG)u{$S%Q+m3v

• 为何要reset

PHPChina 开源社区门户uPK\"oXoY

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.)PHPChina 开源社区门户Z3R3k8o3B K5gT
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;PHPChina 开源社区门户P@+F[gC-F8tP

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

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

2i8_3n]5S(qEN0

* {PHPChina 开源社区门户0{
?5}A6fbG
margin: 0;
5m4w'B3T8|)\
?a_1S0padding 0;PHPChina 开源社区门户!qTj+z6WS@	k;S
}

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

%`b_a.Sq!~.T3p0YUI的reset库：http://developer.yahoo.com/yui/reset/

,\x;mu)S+O!m7v0

y&}n:Md~Q-d0http://leftjustified.net/journal/2004/10/19/global-ws-reset/PHPChina 开源社区门户\J*u-KK"vNG

u?&@S:D0 

#g-r3~o,u;RG y&u0PHPChina 开源社区门户\9G5~3K@{,P8`|5}

以下几篇实际上是讨论css framework或tips的文章，只不过都提到了reset话题。PHPChina 开源社区门户3e\(_4}rK}1^

#K9l&KEo5?X0http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

S"gI]"B)aTS{3O0

1ge,b/xi2c(ax+Z0http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/PHPChina 开源社区门户}
{&k ~/M(`Am

PHPChina 开源社区门户.bC5Z5MdWZ_

http://businesslogs.com/design_and_usability/my_5_css_tips.phpPHPChina 开源社区门户4@i U(v.qPm4V

PHPChina 开源社区门户%e3T4iX0`#f.k

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

0Y(?h~/k^@p0PHPChina 开源社区门户cm5gh%Ob
b

 PHPChina 开源社区门户r7sS9v_T

2.3、typography.css研究

PHPChina 开源社区门户z:G@%sq

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

8o#l3K^ C,w"Z V0PHPChina 开源社区门户j3^(Z+TD%W

Setting Type on the Web to a Baseline Grid：

&},i"B%LtTF0PHPChina 开源社区门户Z,F7GmK!x
L9wR

 http://alistapart.com/articles/settingtypeonthewebPHPChina 开源社区门户J![-l+K[q M

G0B3X:`/b0 PHPChina 开源社区门户A|eHmF&b&C.]

2.4、buttons.css研究

!uwY2IU%|f^0n0Rediscovering the Button Element讨论了用button元素来替代input元素的种种好处，button元素是提供了较为丰富的功能。

&pUvM^*z0

!F0B$WU w4A0http://particletree.com/features/rediscovering-the-button-element

;e6jH
`+O3LV0PHPChina 开源社区门户8GzucC0~.q+J

 

PW N
skml0

2.4、print.css研究

PHPChina 开源社区门户
E?kh5ij%gf

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

*iEj0M%w7ZX(o0

CSS Design: Going to Print

Print Different

2.5、compressed.css

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

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

,j$@P,x-QxQ0按照lib/screen.css中的说明，应该使用了teenage提供的css压缩服务：

u+cU)`7`*dxQ0

j$a&v0_AWg0 http://teenage.cz/acidofil/tools/cssformat.php

}
e^/[u {}1o#_o0PHPChina 开源社区门户si#|2Q3N^#N;| z ?

另外类似的提供对css、javascrīpt进行优化、压缩的服务还有：PHPChina 开源社区门户Oo)y?l&|(?a

PHPChina 开源社区门户:b6~;c8mV8c7U

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

E@0J T-HE;O0PHPChina 开源社区门户hF:v"b?
K6p"N

http://www.cssdrive.com/index.php/main/csscompressor/PHPChina 开源社区门户o+m+OG3g(|3zs:L

PHPChina 开源社区门户@$zO9V2O5Lb

http://www.cleancss.com/（基于csstidy）PHPChina 开源社区门户I `\{~

)c%y:Fjf0 PHPChina 开源社区门户[`pnI]

3、使用例子

0z#c!]QMd0 

q#_7PcE#F0 PHPChina 开源社区门户8dH)d'k`I1Y9D!sG

4、参考文档

5、相关项目

e8j*j!q/bTN0blueprint-generator:http://kematzy.com/blueprint-generator/

7fl H3vp#n_0

!eMbIK%R)j9[0tripoli :http://monc.se/tripoli/

R#B!NsY*J0

PHPChina 开源社区门户j8}(S6H!U:Z.y)c
PHPChina 开源社区门户F/N1Fv0pV4w0~s