5个通用CSS Frameworks框架/工具/教程

当表现和内容混合的网页布局逐步淡出时，网页设计最复杂的操作就集中在了CSS布局上，对于每一个新的网站，我们可能都会使用不同的样式命名规则、定义方式。CSS定义不能重复使用的问题，加重了我们的网站项目开发任务。

在这种状态下，CSS Frameworks框架出现了。将项目中的CSS文件进行按照相应的规则分类，用来定义布局的CSS样式存放在一个独立的CSS文件中，用来定义字体的 CSS样式存放在一个独立的CSS文件中…如此将所有的CSS文件系统化、规范化，形成一个完备的解决方案。

一个好的CSS Framework必须具备的特征有：

1、快速高效的开发效率，节约项目开发时间，降低开发成本；

2、框架源代码足够精剪，不臃肿；

3、有详细完整的操作文档和教程，方便学习和二次开发；

4、有清晰的结构，易于理解的框架思路；

5、必须满足当前绝大多数的浏览器兼容性问题。

只有满足了这些基本的需求，这个CSS Frameworks才有可能被广泛地应用和推广。

本文raozou介绍5个最实用通用的CSS Frameworks框架，及其精心编写的使用教程，帮助你在项目开发中减少重复的工作，提高效率。

5个CSS Framework框架分别是：

1，960 CSS Framework

2，Blueprint CSS Framework

3. The jQuery UI CSS Framework

4. YAML

5. Yahoo YUI Grids CSS

1，960 CSS Framework

960 CSS Framework／960 CSS 网格框架系统，可以帮助你快速进行网页设计的工具。960网络系统包含一个PDF网格页面，Fireworks模板，OnmiGraffle模 板，Photoshop模板和一套CSS框架下的HTML演示。如果你正准备进行一个网格设计，可以下载了使用一下。之所以叫960，就是说模板的宽度是 960像素。而之所以用960像素来做为标准，是因为960像素宽具有高度的灵活性，它可以按2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320和480来进行划分。

在线演示地址：960 CSS Framework DEMO

960 CSS Framework的详细介绍

介绍了960网格系统（960 Grid System）问世的过程及960网格系统的特性及使用方法等。

960 Grid System 基本原理及使用方法

彬Go在其博客中详细介绍了960 Grid System CSS Framework的原理和使用方法帮助你熟练掌握960网格系统，节约你的CSS编写时间。

2，Blueprint CSS Framework

Blueprint 是一个 CSS 框架，它的目的是减少你的css开发时间。它提供一个可靠的css基础去创建你的项目，BP由一个易用的网格、合理的布局和一个打印样式。

在线演示地址：Blueprint DEMO

Blueprint CSS Framework 学习笔记

DeadFire在其博客翻译的一遍非常详细的Blueprint CSS 框架学习笔记，你可以通过这篇文章具体地了解Blueprint CSS 框架的使用。

Blueprint CSS Framework 研究

Blueprint作为一个成熟的CSS Framework框架，被全球无数的网站设计用户使用，这里就是一篇非常不错的有关Blueprint研究的总结性文章。

3. The jQuery UI CSS Framework

jQuery UI是 jquery官方推出的配合jquery使用的用户界面组件集合！包含了许多的界面操作功能，如我们常用的表格排序，拖拽，TAB选项卡，滚动条，相册浏 览，日历控件，对话框等 JS插件~~可以很方便的开发用户界面上的功能，使得您的开发工作事半功倍~~不用写繁琐的JS代码。

jQuery UI下载地址：http://ui.jquery.com/download

jQuery UI提供了一个强大的CSS Framework，为用户定义使用jQuery widgets。其中的ThemeRoller更是让你随心所欲地操作设计不同风格的网页界面。

jQuery UI是一套基于jquery构建具有皮肤更换功能的UI控件和鼠标交互组件。用于帮助开发人员构建具有良好用户体验的Web应用程序。交互组件包括 drag/dropping、sorting、selecting和resizing等。基于这些核心交互组件构建的UI控件有：accordion、 date picker、dialog、slider、table sorter和tab等。

jQuery UI库介绍及使用

文章介绍了jQuery UI框架的基本功能和具体的使用方法，并辅以实例作为参考。

jQuery UI操作手册下载：下载地址1 下载地址2

4. YAML

Yaml (Yet Another Multicolumn Layout)是一款结构简约而不简单的css框架，拥有Bulletproof & 灵活的布局，可以创建时尚、流体弹性布局，结构相当灵活，实用与大多数用户。下面看看YAML的特性：

基于web标准，采用xhtml&css架构；容易被初学者理解并接受；内置布局灵活；方便使用；充分记录。

Yaml 在线文档：http://www.yaml.de/en/documentation.html

YAML框架包含一些基本的内容：文档，实例，工具，核心部分。

使用YAML可以轻松创建两栏、三栏、混合的流体、弹性布局。YAML包含核心文件（基本css框架：print.css base.css iehacks.css）,调试文件（debug.css），导航部分，patches（patch_layout_draft.css patch_nav_vlist.css ），printe文件，screen文件，central_draft.css等，方便使用。

在线演示地址：Yaml DEMO

5. Yahoo YUI Grids CSS

YUI Grids CSS是最著名的CSS框架之一，是由Yahoo开发小组开发而成。为开发者提供了预先设置的四种不同页面宽度，六种不同的模板。

在线演示地址：Yahoo YUI Grids CSS DEMO

YUI Grids CSS介绍

经典论坛的WEB标准化专栏中关于YUI Grids CSS的介绍和使用说明。

YUI Grids CSS 解读

文章编写参考了国外网站NOUPE的有关CSS Framework 文章。