怎样选择正确的CSS框架

我们在Web开发的时候,如果选择了正确的CSS框架就能快速改进并且节省你的开发时间,因为它提供了一个强大的方式灵活并高效得样式化我们的网站以及应用程序。

那我们该怎样选择适合自己的框架呢?

首先,你要确保你所要用的框架已经建立了并有了能准确描述细节方面的文档。这一步对于你下一步的实施以及使用你准备好的框架,都是至关重要的。然后,你就应该分析你所选择的框架能够解决怎样的问题。不过,当你碰上几个你自认为是最适合这个项目的框架的时候,你应该明智的对它们进行筛选并仔细衡量是否真正符合你的需求。

同样,你可以大胆的去请教其他开发人员或是同事,哪个框架更加合适,为什么选择这个框架。这样可以帮助你在其他有经验者的基础上获取更多有价值的见解。另外一点,要提的就是,你在这次框架选择的过程中扮演怎样的角色.是主要人物?或只是一个乐于帮忙的普通成员而已?它是否能给你带来价值?每个问题都会帮助你决定是否使用所选的框架。

下面让我们看看同时适合开发人员和设计人员的8个最好的框架

Blueprint CSS

Blueprint CSS 框架使用了栅格化系统来预先构建了字体样式并包含多款插件,内建表单样式等等。同时,你还会发现Blueprint具有良好的文档,Wiki,以及活跃的社区组,以及一些使用Blutprint框架的网站例子。

Elements CSS Framework

总体上来说,Elements 框架使编写CSS代码变得更加简单而又高效。它是能使你的文件安排的有条理 收集当前类这个功能,将使你的开发过程变得更加友好,而且它能给外链自动增加各种icon图标,这样用户就能快速找到并定位到它们。

Content with Style

Content with Style也是一款能帮助你通过一些不可思议的设计和排版元素来设计并构造你的网站的CSS框架。它有6种不同的布局供你选择,包括垂直导航,两个内容栏,两栏式的水平导航及一个内容栏。总之,Content with Style是一种高效的方式来排序你网站的内容并且能顾及到头部、主题部分、及子部分。

Emastic

一款轻量级的CSS框架,它使用了px,em,或是%为单位来标志页面的宽度,而且它同样是基于弹性布局的。Emastic为你的字体排版预先定义了多种样式。主要一点,它的栅格化是由5到75em大小的区块组成。默认的尺寸大小也能随时改变,而且框架的设计选项也是基于栅格设计的。

960 Grid System

960 Grid System是一款非常强大的CSS框架,它能帮助我们迅速开发网站的原型。它是基于12-16栏布局的并且布局模板同样支持Illustrator, Photoshop, Expression Design, Fireworks 等工具。而且,你能用纸笔构造出最适合你自己的一款模板。

Yui Grids

基本的Yui Grids CSS 提供了四种预先定义的页面宽度,六种模板,而且这些都可以再细分成两栏、三栏或者四栏。仅4kb的文件却整合了超过1000中的页面布局样式。支持流式宽度,简单的用户定制化,灵活的模板栏等多种特性。

YAML

YAML(Yet Another Multicolumn Layout)另一款适合创建新式和灵活布局的Xhtml/CSS框架。使用它能编写通用性极强的结构,而且用户的可访问性也很强。YAML专注于Web标准及可访问性,包含了众多扩展的轻量级框架核心,完整的多语言文档,强健灵活的布局思想。

SenCSs

SenCSs(Sensible Standards CSS baseline,发音“sense”).它为你CSS重复的部分提供了合理的样式,这样你就能更加关注于自己网站的样式。SenCSs不像其他CSS框架那样,它不包含各种杂乱的布局样式或是预定义的栅格系统,那SenCSs能刚什么呢?baseline, fonts, paddings, margins, tables, lists, headers, blockquotes, forms 等等都是SenCSs所能办到的。

5 Comments

  1. zwwooooo Says On 四月 03 At 5:05

    很强很大没用过

    {Reply}

    A.shun Reply: 四月 03 At 11:11

    @zwwooooo, 我是来坐大腿的

    {Reply}

  2. 数数 Says On 四月 05 At 5:05

    我喜欢这个网站的设计~~

    {Reply}

    controlsea Reply: 四月 05 At 6:06

    呵呵,谢谢捧场~~

    {Reply}

  3. 收缩机 Says On 四月 06 At 7:07

    写的好,学习了。。。

    {Reply}

Post a comment