11 款最好 CSS 框架 让你的网站独领风骚

网页设计和发展领域已经成为竞争激烈的虚拟世界。想要在网络的虚拟世界中生存，仅有一堆静止的在线网络应用是远远不够的，网页必须要有很多功能，配以让人无法抗拒的设计。网页编码一定要合适、精确，才能保证不发生错误，使网页能在浏览器上轻松加载出来。此外，还要在网页设计中留出足够的空间以充许日后的功能增加和改善，这样做才能让更多与时俱进的特征能加入到网页设计中。

网页设计员和研发者可用的最好工具之一便是 CSS 框架，它提供高端解决方案来适应高端网页研发需求。CSS 框架减化了编码结构、减少了编码时间，为研发者带来网页设计的便捷性。

CSS 框架倒底代表什么呢？

在网站繁荣的背后，一个非常基本的原因是活跃的 PSD 和 CSS 转换服务的存在。CSS 是层叠样式表语言 （Cascading Style Sheet Language） 的英文首字母拼写，它能使你的网站漂亮地展现出来。CSS 应用人类心理学和表示语义学，详细地组织数据，从而使得用户在浏览你的网站时不会失去兴趣。

CSS 给予研发人员在编码上极大的灵活性，它分离了标记内容，例如从 PSD 到 HTML 或 XHTML 的转换，以及表示内容，这些标记内容描述了页面布局、内容展现、字体和风格等等。CSS 另一个便捷特征则是 CSS 框架。CSS 框架是先前备制的元素，存在于网络数据库中。其扩展名为 .css，可以使研发者们回忆起某一特定编码。因此，研发者们不必一遍又遍地重写全部的编码，这样也就省下了大把的时间。由于去除了编码中的重复步骤，使得研发者们有足够空间把精力集中在重要的地方，制作出视觉上更另人震撼的网络应用。此外，减缩的编码直接隐藏于网页加载中，使得网页在浏览器上能快速地加载出来。

使用 CSS 框架是明智的选择，你不用每次做网页研发时再从零开始了。你可以做一份默认风格表和标记模版，在每次做网页研发时都可以用到。这些基本内容在框架中都有了，你可以把所有的力气和技术用设计的细节和独特性上了。

11 种最流行的 CSS 框架

1、 蓝图 （ Blueprint ）

一个叫做 Olav Frihagen Bjørkøy 的挪威理工学生是蓝图（最强大的 CSS 框架之一）研发背后的原因。蓝图提供稳固的平台以使用层叠样式表语言和开发排版网格。CSS 框架的设计目的是为你节省大量 CSS 研发的时间。蓝图提供了非常好用的网格发生器，借此用你可基于宽度尺寸的选择打造框架。此外，蓝图还提供定制风格表，使你可以把按键和排版、完整专业设计表格、和用于打印目的简便易用的风格表组合到一起。最后，蓝图最重要的优势之一是它可以执行你的浏览器默认风格的批量重设。

2、 雅虎 UI 数据库 CSS 基础

雅虎 UI 数据库由 JavaScript 和 CSS 大力支持，通过提供如 DOM 脚本语言、AJAX 和 DHTML 的高端技术，编汇了能够使你研发出高度响应和互动的网络应用的工具和控制器。雅虎 UI 数据库可以免费使用，也可以在 BSD 协议下使用。

雅虎 UI 由雅虎公司的前端工程师和全球的参与者们细心打造。它可以为提升你的网络应用的可扩展性并为其增速，同时提供夯实的基础，这一点已久经考验。如果你觉得用 JavaScript 比较舒服的话，那么它就是你最好最有效的解决方案了。

3、 另一个多栏布局 – YAML

另一个多栏布局是 Dirk Jesse 先生勤奋努力换来的结果，他是 YAML 的研发者。Dirk Jesse 先生对网页标准有准确的理解，他使得 YAML 与当下使用的多个相关网页浏览器兼容。还有，YAML 为你提供了除错样式表和打印样式表。YAML 的另一个优势特征为，它提供详细的文件编制，并用两种语言提供活范例 – 英语和德语。此外，YAML 还能使你在你的网页浏览器内研发 CSS 布局，其方法是通过一个叫做 YAML Builder 的有效编辑器，这款编辑器以“所见即所得”（WSYIWYG）的方式工作，且接着就会把不同有创意的设计元素融入到你的框架中去。

4、960GS

960 网格系统的诞生只有一个目的，就是通过提供一个普遍的 960 像素布局宽度平台，使得与研发网站相关的工作程流程更加顺畅。960 网格系统提供了 12 和 16 的两个不同包供选择，可以一起使用，也可分开使用。此系统把几个实用的模版和图表整合到了一起，为你提供了稳健的背景支持，也提供了一个透视图工具。

5、 流体 960GS

有着极大优势的流体 960 网格系统是 Nathan Smith 和他的原创 960 网格系统的结合体。

6、 弹性 CSS

这种 CSS 框架实际上是在 CSS 框架方案中的“松紧带”。它就像一条松紧带一样，能够伸缩自如，提供稳健的支持，允许要非常广泛的范围内操作，包括固定的、流动的和弹性的布局。不用折衷你想要的网络应用布局，仅仅通过在弹性 CSS 框架上运行数组排列和结合，直到得到了你想要的布局。弹性 CSS 框架唯一的美中不足便是它需要使用 JavaScript。JavaScript 能提供高质量和美学设计，但对不懂 JavaScript 的人来说，这可是个负担。

7、jQuery UI CSS 框架

这款 CSS 框架是为了研发以 jQuery 为基础的定制小工具而设计。这个 CSS 框架包含的类别涵盖了所有必要的用户介面的大多数。如果你使用 jQuiery UI CSS 框架，那么你将能够轻松地把相关插件融入到网站编码中，且能够使用共享的传统标记编码。如果你选择 jQuery，那么你就可以创建按钮，并在单个给定时间内选择多个按钮。

8、SenCSs

SenCSs 的全名将揭示其含义 – 合理标准 CSS （ensible Standards CSS），这是这款 CSS 的任务。它能让你合理地为所有 CSS 中的间歇（也就是重复）部分设计式样，因此可省出大把时间用手攻克其他网站研发的重要问题。

9、Typogridphy

这款 CSS 框架乃是基于 960 网格系统而成，它可以让你创造出极为动感和多变的网格布局。Typogridphy 是一个印刷和网格布局 CSS 框架，给网站设计员和研发员提供极限的范围，使他们快速地给有极强功能和美观的网格布局编码。

10、Tripoli

Tripoli 不能算作是一款 CSS 框架，而更应说是描述 HTML 元素的 CSS 标准。Tripoli 为研发动画布局提供稳健的绘制引擎，而不会改变编码的排印。它是非常成熟的 CSS 标准，可以重置默认浏览器，并静静地工作。

11、BlueTrip CSS 框架

这款 CSS 框架名副其实，提供了三种可能是最好的框架的综合体，即 960GS, Blueprint 和 Tripoli。

为什么要挑选 CSS 框架

在这个年代，仅仅是努力工作已不够了，要成功的必要条件是要聪明地工作，不只是努力。CSS 框架就可以让你实现聪明地工作。这是研发网站聪明的方式。它通过提供强健的研发网站基础，使研发人员免于所有的焦虑和沮丧，不用再从头开始。

此外，网站研发过程可谓相当无枯燥和费时，研发员可能在重复的编码中出错。CSS 框架可以避免这种情况发生。如果你所有项目都有默认的 CSS 编码，那么你不便不用检查网站每一页的源码了。一个详细的 CSS 框架保证了研发过程的工作流的果实，并节省了大量时间，避免了研发团队内部的误解和交流不畅。

正如你已在上文看到的内容，大多数 CSS 框架已经做到了跨浏览器兼容，所以你不必担心你的网站的兼容性。

最后，真的没有什么理由不推建使用 CSS 框架了。它节省你宝贵的时间，以极有利的特征和功能补充网站，并给予研发人员足够的空间和灵活度来作出最好的设计。

来源： http://article.yeeyan.org/view/371930/367072

© 推荐 for 互联网的那点事, 2013. |