blueprint--css framework研究
介绍
PHPChina 开源社区门户i5i"~5N?n6d9RAblueprint是一个所谓的css framework,相比较而言blueprint 代码中的注释还是比较详细的。
|z/j`g0PHPChina 开源社区门户-VO6|V+WZ v6v按照Jeff Croft的Frameworks for Designers(或中文版本理解Web框架,和如何构建一个CSS框架)描述的如何构建一个css framework的方法:
,kt Av~1m `0PHPChina 开源社区门户 GiK%c-zcThere 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 开源社区门户s,\xz0xI,t;r
PHPChina 开源社区门户rT{,\Wr
- 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.
c g4c@!}i|0PHPChina 开源社区门户k_y5}b
blueprint的构建方式也与此类似:
c7e F:vo\2z0W|R"^ f(uXEy0 分而治之:PHPChina 开源社区门户t-dL8j0C"v
PHPChina 开源社区门户xrGptC rx2jbuleprint在功能组织上,将诸如布局(layout)、排版(typography)、组件(widget)、重置(reset)、打印 (print)等功能分散到不同的css文件中。这样方便使用者只需要导入自己所要使用的功能,不用导入全部文件,提高页面装载性能。目前在组件部分只提 供了对button的处理,尚未做到麦肯锡的MECE("相互独立,完全穷尽")的道。PHPChina 开源社区门户O6v0J*t0t(C
Ib}?J?l_ L8aan0 统一接口:PHPChina 开源社区门户a-A.S8PtV
PHPChina 开源社区门户-jQ4`/uX j,M尽管功能分散到多个css文件,但是导入时候,仍然只需要包含同样的文件screen.css文件,具体的导入细节在screen.css中再处理,统一了对外接口。PHPChina 开源社区门户'x:Nb\.I!K M
X)Y4F*lm!J#q6a*c+e0 <link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />
&JU|4^`T:d J0PHPChina 开源社区门户.jw!bpWQ+J+y1lBblueprint 所包含的css文件说明:PHPChina 开源社区门户a"@#x2Ob hz W M'``
- screen.css
~2^){!}lh/`l:WBi0 This is the main file of the framework. It imports other CSSPHPChina 开源社区门户lyH3P!GS,CT;Z
files from the "lib" directory, and should be included onPHPChina 开源社区门户+F WR,Cz
every page.+A4w<S7pE0 类似于Jeff Croft的base.css功能,只需要包含此文件,就可以导入
4Ch.c p)d8a5fzo0PHPChina 开源社区门户 z @T ZP]2IU E] E(C-v
- print.css
XBI'BC2Yw0 This file sets some default print rules, so that printed versionsPHPChina 开源社区门户Tw5[*t?LT:r
of your site looks better than they usually would. It should be
z$N#H+IY*K0 included on every page.用于处理打印,可以归类为widget。PHPChina 开源社区门户:iIJrT\7U
PHPChina 开源社区门户G%I$g.F+h
- lib/grid.css
uT6^;oO9B:t)V B6N0 This file sets up the grid (it's true). It has a lot of classesPHPChina 开源社区门户v)R6d'@"s%i#?Qs
you apply to divs to set up any sort of column-based grid.用于处理页面的布局(栏目)
+Ep#~t7[-m*a0PHPChina 开源社区门户+_&JDw_
- lib/typography.cssPHPChina 开源社区门户%DN'mm^4b
This file sets some default typography. It also has a few
)C$Y&}\GX3D*D0 methods for some really fancy stuff to do with your text.用于处理页面元素的排版。PHPChina 开源社区门户%s4c;Je6y[
PHPChina 开源社区门户4[5V-vR*aY%z
- lib/reset.cssPHPChina 开源社区门户?mt ?,o
This file resets CSS values that browsers tend to set for you.用于重置页面,对没有指定css属性的页面元素指定缺省值。PHPChina 开源社区门户T xkfQd/LeY
PHPChina 开源社区门户.|J%V`5Dv
- lib/buttons.cssPHPChina 开源社区门户%~3r+vxW5u;Kt
Provides some great CSS-only buttons.用于处理按钮,可以归类为widgetPHPChina 开源社区门户RS!DJ(?8o%z%t
PHPChina 开源社区门户:]{\*w;U%e`"vp)d%x
- lib/compressed.cssPHPChina 开源社区门户|)~b~ ^Q.o8d`
A compressed version of the core files. Use this on every live site.PHPChina 开源社区门户;ye#a't*lLS;g,N
See screen.css for instructions提供压缩过的(包含grid.css,tyopgraphy.css,reset.css,buttons.css)的css文件。
Halw"yz0
2、各模块用法研究
2.1、grid.css研究
- 对跨浏览器居中处理的兼容性处理
|I@w5t4xg,r0一般而言,要处理firefox、ie在处理居中时候的不同,采用如下方式:PHPChina 开源社区门户{!Qn8G+`0A P%Wf
bodyPHPChina 开源社区门户9H4zVEYm~f^'WT
{
LZ;G Fd!af3O3dKA0text-align: center;
)r1fsa*W\s0}
@"z t \kEb0
D|*W:ludo)t du0div#container
:v9s%bA,Y0{
4O2c9y9y0\ROI5Q,p.f ^*b0margin-left: auto;
,OqY-s%G0margin-right: auto;PHPChina 开源社区门户!^+fbI v:oy
width: 50em;PHPChina 开源社区门户:M G({&v4B.|8~
text-align: left;PHPChina 开源社区门户4{4\}k8AR$E)If
}
l Aw3Y A`q;|K0 摘自:http://www.maxdesign.com.au/presentation/center/
$e2GYz ED!gy5g}.h$B0k4Wf ?s&|4Y;`:S0blueprint的处理方式:
e [0o't:[GC;g kr0
body {
tRe%r vc
Z)e0text-align: center;/* IE6 Fix */
}4@O%u2h+w0margin:36px 0;
X*|9x1{'N(un0}PHPChina 开源社区门户!j,b8R'S0xp