?

joomla 2.5默认配置了一个空白模板atomic，方便用户利用它来创建自己网站模板。比起joomla 1.5，也算是一个贴心的改进。Atomic空白模板是基本blueprint CSS框架来框建的，下面我们就来看一下blueprint CSS框架的官方中文教程。

blueprint CSS框架在github上链接的中文教程在墙外，为方便大家浏览，故转载此教程，并做了一定的文章排版与内容修改。

原教程页面地址：http://chuanliang.wordpress.com/2007/09/14/blueprint-css-framework/?

blueprint CSS框架的介绍

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

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

构建一个框架有几种可能的方式，但最常见，可以说是最有用的，抽象通用的CSS放到一个独立样式表文件，该样式表文件只包含整体的一个特有部分。例如,你可以，一个样式处理排版，另一个处理大量重置。这种好的方法能使你选择性引入你需要的样式，在你框架里可能有六七个不同的样式文件，但不需要其中的一两个，只要不引入即可。我们团队创建的框架包含5个样式文件：

• reset.css —处理重置
• type.css —处理排版
• grid.css —处理布局
• widgets.css —处理小零件（widgets），如tab菜单、下拉菜单、以及“更多”按钮
• base.css —包含所有的其他样式表文件，以便我们只需要在(X)HTML引用base.css即可使用整个CSS框架

然后，我们把框架存放在一个单独的地方，使每一个站点都引入这个框架。当然，每一个网站也需要有特有样式表，特有样式对框架进行了必要的补充。

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 of your site looks better than they usually would. It should be 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文件。

blueprint CSS框架的使用研究

grid.css研究

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

一般而言，要处理firefox、ie