HTML5PC端框架
1.Bootstrap
Bootstrap是Twitter推出的一个开源的用于前端开发的工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。Bootstrap提供了优雅的HTML和CSS规范，Bootstrap的源代码是使用less编写的；基于jQuery框架开发，并在jQuery框架的基础上进行了更为个性化和人性化的完善，形成一套自己独有的网站风格，并兼容大部分jQuery插件。Bootstrap自带一个默认的图标集。
特点：
1)适应各种技术水平
无论是设计师还是程序员，大牛还是菜鸟。既能用来开发简单的小东西，也能构造更为复杂的应用。
2)12列栅格布局
栅格系统不万能的，不过在应用的核心层有一个稳定和灵活的栅格系统确实可以让开发变得更简单。
3)响应式设计
从Bootstrap2开始，提供完整的响应式特性。所有的组件都能根据分辨率和设备缩放，从而提供一致性的用户体验。
4)样式化的文档
与其他前端工具箱不同，Bootstrap优先设计了一个样式化的使用指南，不仅用来介绍特性，更用以展示最佳实践，应用以及代码示例。
5)基于jQuery的js交互插件
这些小插件包括对话框、下拉导航等等，不但功能完善且精致。
6)HTML5
符合HTML5标签和语法。
7)开源
全部托管于GitHub。
缺陷：
对IE的支持可能不如Firefox和chrome好
官网：http://www.bootcss.com/
2.HTML5Boilerplate
HTML5Boilerplate是一个由Paul lrish(Google Chrome开发人员、jQuery项目成员、Modernizr作者、yayQuery博客主持人)主导的“前端开发模板”。
HTML5Boilerplate是一套具有非常多先进特性的框架。
特点：
1）由Paul lrish首创的在HTML页面的body上使用IE条件注释判断浏览器版本，从而大大简化了针对IE Hack的成本（在后来的版本中升级为在标签中加入条件注释）；
2）HTML5集成，默认使用很多HTML5的特性，并且使其兼容旧版本浏览器；
3）大量针对服务器的默认配置，无需修改即可配置一个安全、标准的web服务器；
4）完整的js调试机制——即使在IE下；
5）大量使用CSS3技术，并且集成了几乎所有来自框架中和技术大牛们口头相传的CSS3技巧；
6）为所有浏览环境做了优化，包括移动版本和打印版本；
7）默认内置Modernizr，可以检测浏览器对新特性的支持能力，方便针对旧版本浏览器优化。
缺陷：
因受其功能限制，它最适用的目标是单页web app或者静态页面，对于复杂的项目来说，需要和其他框架做互动。
官网：http://www.bootcss.com/p/html5boilerplate/
3.Foundation
Foundation是一款开源的前端框架，我们可以使用它快速创建页面原型。相比于其他同类型工具，Foundation的移动化方案更加出色；借鉴响应式web设计的思路和方法，Foundation对内容结构在不同类型设备中的呈现方式进行了相应的预设。
就是说，Foundation是为当前移动互联网而生的，更多是对付日益多样的移动设备。
特点：
1）响应式网站
Foundation可以快速创建响应式网站，提供大量的HTML、CSS、JavaScript组件和功能
2）web应用
Foundation web应用可以快速、简单的构建复杂的布局、交互动画。通过响应式Flexbox的布局，使自己的项目可以运行到任何设备和浏览器上。
3）语义化
使用Foundation框架语义化结构，可以编写更干净、更优雅的前端代码。
4）移动设备优先
通过同一份代码快速、有效适配手机、平板、PC设备。
5）可定制
可以根据自己项目情况完全自定义定制（定义栅格、颜色、字体大小等）。
缺陷：
Foundation无法支持旧版IE，默认不带图标集。
官网：http://foundation.zurb.com/
4.UIKit
UIkit 是 YOOtheme 团队开发的一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。UIKit提供了全面的HTML、CSS及JS组件，它们使用简单，容易定制和扩展。
它基于LESS开发，代码结构清晰简单，易于扩展和维护，并且具有体积小、反应灵敏的响应式组件，可以根据 UIKit 基本的风格样式，轻松地自定义创建出自己喜欢的主题样式。
特点：
1）LESS
UIkit基于LESS开发，代码结构清晰简单，易于扩展和维护。
2）组件
体积小、反应灵敏的响应式组件，使用一致的、无冲突的命名规则。
3）定制
可根据UIkit基本的风格及样式，轻松地自定义创建出自己喜欢的主题样式。
4）响应式
根据不同的屏幕分辨率与上网设备，UIkit会自动做出响应，提供一致的体验。
缺陷：
针对IE 兼容性还有待改进。
官网：http://www.getuikit.net/
5.HTML5 KickStart
HTML5 KickStart是一款可以用来方便创建任何布局集合HTML5，CSS和jQuery的工具包。它提供了干净，符合标准以及跨浏览器兼容的代码。
特点:
1）HTML5KickStart拥有精简的HTML5、CSS和js的构建模块；
2）程序包中囊括了响应式网格布局、触摸功能的幻灯片、带有小图标的导航栏等等。
官网：http://www.99lime.com/elements/
6.skeleton
skeleton是一个很小的CSS文件，它轻量级，可以快速的开发网站，响应式的设计能够适应各种不同类型的显示器。
skeleton响应式框架采用960宽度为基础，适用于浏览器窗口，平板电脑，移动电话（横向和纵向）；一个CSS文件且命名语义化，利于阅读使用。
特点：
1）网格
skeleton基础网格是一种变异的960网格系统。
2）媒体查询
媒体查询实现针对不同尺寸的屏幕进行设计，有效处理不同的浏览器和移动设备。
3）浏览器支持
兼容主流的浏览器
缺陷：
对IE的兼容性还不是特别好。
官网：http://getskeleton.com/
7.Groundwork
Groundwork是一个响应式前端框架，基于SASS和Compass并提供了一个高级的响应式布局，开发人员通过一个模板进行高效的开发。
特点：
1）UI效果组件
除了基本的模板和页面框架，这套工具中还提供了UI效果组件，在设计过程中可以提供高效的布局支持。
2）文档支持
就像是一个CSS+JavaScript的HTML5配套工具，本身提供了完整的文档支持使用。
3）布局设计
在布局设计上，Groundwork提供了多种UI组件支持部署，包括导航，按钮，框架，图标。
官网：http://groundworkcss.github.io/groundwork/?url=docs/home
【HTML5 PC端框架】8.Less Framework
lessFramework是一个CSS自适应web站点设计网格系统前端框架。它包含了4个网页布局方案和3套网站字体预设方案，都基于一个单一的网格布局系统。
特点：
1）默认的布局
10列在992像素。桌子上的笔记本电脑所有的旧的浏览器。可根据分裂黄金比例6列，这也是长期形成的文本的最佳宽度。
2）片布局
8列在768像素。为iPad和其他平板电脑。完美的使用为中心的长时间阅读文本，6-column宽。
3）移动布局
3列在320像素。为iPhone，iPod的触摸，和其他大多数现代的移动设备。有宽大的外边缘。
4）全移动布局
5列在480像素。对于大的移动设备，如iPhone和iPod触摸的横向。快速的代码，因为它继承的方式从默认的布局和移动布局。
官网：http://www.jonikorpi.com/less-framework/
9.SkelJS
skeljs是一款轻量级的前端框架，用于构建响应式网站和app。
特点：
1）CSS网格系统
一个复杂的CSS 12列网格系统具有简洁的语法，无限嵌套的支持和许多更酷的功能。
2）响应式布局
对于CSS媒体查询的设计来处理所有需要的一个精简置换反应。简单的配置，建立处理任何数量的断点，并可以做更多简单的样式表。
3）CSS快速编译
方便快捷迅速处理各种常见的CSS任务，如浏览器的CSS规范和盒模型。
4）丰富的插件
一种skeljs延伸而不损害其轻量级足迹平台。
5）浏览器兼容
skeljs能够兼容主流的浏览器。
缺陷：
暂时不支持老版本的IE浏览器。
官网：https://github.com/n33/skel
10.JX（腾讯）
JX是一个类似Google Closure Library的Web前端开发框架，服役于WebQQ等大规模webAPP。
JX是模块化的非入侵式web前端框架，开发于2008年，并于2009年开源于GoogleCode,于2012年切换到Github。JX框架同时适用于webPage和web App项目的开发，特别适合构建和组织大规模、工业化的webApp,腾讯Q+等产品都是采用JX框架开发，兼容目前所有主流浏览器。
特点：
1）微内核设计
内核可完全分离出来，用于构建其他的框架。
2）原生对象零污染
随着js的App越来越复杂，对原生对象的零污染也体现的越来越重要。
3）模块封包
采用命名空间、闭包等方式建立了模块封包的体系，帮助更好的组织海量js代码。
4）模块自由拼装
自身模块做了良好的架构分离，尽可能让各个模块之间可以自由的拼装组合。
5）无缝集成各种js框架
与jQuery、Yui、Mootools、Prototype.js等框架无缝集成；与多种局部框架无缝集成，如：Mini、Sizzle、cssQuery、xPath、JSON等等。
6）多版本共存
如采用的jx版本过旧，旧有的JavaScript代码不能与新版本jx兼容，则可以采用多版本共存的方式保持程序的可延续性。
7）分层设计
JavaScript核心层，与JavaScript解释引擎无关的封装和扩展；浏览器端JavaScript层，对浏览器中的JavaScript引擎部分的封装和扩展。
架构：
第一层：
Core JavaScript扩展模块/代码组织模块（可用于NodeJs等其他js引擎，轻松组织大型应用，无缝接入其它js库）。
第二层：
Browser JavaScript扩展模块（跨浏览器，基础封装）/可选模块（设计模式相关模块，选择器模块..）。
第三层：
UI组件/实时动画模块/游戏引擎模块。
官网：http://alloyteam.github.io/JX/#home
11.KISSY（淘宝）
KISSY是一款跨终端、模块化、使用简单的JavaScript框架。有完备的如DOM、Event、Ajax、Anim等工具集合，提供金典的面向对象、动态加载、性能优化解决方案。作为一款全终端支持的JavaScript框架，KISSY为移动端做了大量适配和优化，让程序在全终端均能流畅运行。
特点：
1）跨终端
作为生长于淘宝/天猫的前端JavaScript类库，在全网数以万计全终端的硬件设备中运行测试，KISSY在国内互联网环境下各色终端、浏览器、移动设备中具备一流的健壮性和兼容性。
2）模块化
KISSY采用高度的模块化设计，通过加载器按需加载。模块高度解耦，并具有极强的扩展性。核心组件完整齐全，借口一致。适合多种应用场景，尤其适合团队协作的大型项目开发。
3）高性能
库的实现的基本要求是兼容性和性能，KISSY在核心模块比如Node、Event、Base上做了极致的性能优化，特别是选择器性的读写效率，在各种终端里都达到很高的性能体验。KISSY在面向对象的设计上秉承一贯的轻量级，保持轻巧高速的性能。
4）使用简单
KISSY核心功能的设计遵循二八原则，保持最常用API的精简子集，自动探测终端主动适配，可以非常方便的开始项目。清晰的面向对象功能以及轻松的架构性，更增强了KISSY的易用性。
5）设备普适性
KISSY支持PC、读屏器、NodeJS、移动端浏览器以及各种外壳、win8等。组件的无障碍支持（遵循WAI-ARAI规范），实现盲人对组件功能的使用。KISSY支持触屏设备的手势操作，手势操作在ios和Android中表现一致。对此作了封装，在底层多点触摸touch事件的基础上模拟出tap rotate pinch等触屏设备上独有的事件，用户可以把这些事件当做原生事件使用。
官网：http://docs.kissyui.com/
12.QWrap（百度）
QWrap是百度有啊前端团队推出的一个JavaScript框架，支持IE6+、Firefox、Chrome、Safari、Opera等浏览器，在BSD协议下开源发布。
特点：
1）提供jQuery一样方便的dom功能，同时又打破jQuery“专注于dom”的约束，提供非dom的许多功能。
2）提供prototype方便的原型功能，同时又提供JavaScript1.6的泛型功能，并且提供用户有选择方便与严谨的自由。
3）提供YUI2一样的静态方法库，同时又用Helper规范来做到真正的绝对静态，让组件开发者可以发布无依赖的组件。
4）学习YUI3的use，同时摒弃YUI3的严谨洁癖，让use更实用。
5）QWrap独创Helper+Wrap+Retouch+Apps设计，让QWrap有更多的灵活性。
官网：http://www.qwrap.com/
13.Tangram（百度）
Tangram是一款实用的JavaScript基础库，可以快速构建出高度互动的web应用程序。Tangram浏览器兼容，平滑升级体验以及自由定制输出最小尺寸。
特点：
1）体积小巧，性能优良，使用简单；
2）模块化架构，方便定制与扩展；
3）适合团队开发，丰富的中文文档和本地技术优化，适合中国用户；
4）多浏览器支持：IE6、7、8+，Firefox3.x+，遨游2.x+，Opera10.x，chrome4.x+，Safari4.x+；
5）经过专业QA团队的测试以及百度各大产品线的应用，质量有保障。
官网：http://tangram.baidu.com/
14.Como（康尚实验室）
Como由上海康尚实验室开发，是一款简易而功能强大的js框架，对String等原生对象进行了扩展，支持常用的CSS选择器，高效的动画播放，强大的包扩展机制。
特点：
1）对原生对象如String扩展常用函数；
2）支持类的声明与继承，简易Ajax；
3）简约而快速的CSS选择器；
4）高效、易操作的动画执行；
5）强大的js包扩展机制，支持CSS按需加载；
6）非侵入式切换调用，与第三方框架并存；
7）兼容主流浏览器：IE6+，Firefox2，Safari2+，Chrome，Opera9+，以及基于IE内核的如Maxthon、360、Sogou等浏览器。
官网：http://www.benlai.com/
15.SenchaExa JS
是Sencha基于Ext JS开发的前端框架，控件、特效等支持非常丰富，表格、图画、报告、布局、甚至数据连接都包含在内。基于Sass和Compass，使得用户对格式的修改和特效制作更加方便；Sencha Animator基于CSS3更加方便用户对特效的制作，同时支持移动端。
特点：
1）现代应用程序框架
适用于Web框架的Ext JS4向前迈进了一大步。Ext JS3.3基础上，最新版本增加了超过350个新的应用程序，50个新的种类，多于65%的文档。
2）无需插件的图标
Ext JS4提供所有JavaScript框架中最高级的制图和图表功能，并能在任何操作系统的任何浏览器上实现完美像素的可视化。
Ext JS4新的制图程序包充分利用SVG和VML，帮组开发人员设计和编程其图表，而且不必担忧这些图表是否能够有效工作。
3）MVC应用程序架构
Ext JS4带来了一个全新的方式来建立客户端应用程序，通过引入流行的模型-视图-控制器模式到Ext JS。通过允许数据管理的分离，逻辑和界面元素，对大型开发团队去独立工作来说Ext JS4使得它更容易。
4）跨平台浏览器兼容性
Ext JS4帮助开发人员使用相同的代码，构建出一个适用于大量浏览器和更多操作系统的应用程序。无论使用Ext JS内置的UI组件、使用新的制图程序包，还是为应用程序定制主题，Ext JS都能轻松简便地构建跨浏览器的web应用程序。
Ext JS支持主流web浏览器：IE6+、Firefox3.6+（PC、Mac）、Safari4+、Chrome10+、Opera11+（PC、Mac）。
缺陷：
除了Ext JS太过重量级之外，Sencha规定，凡是商业化的应用，都需要付费；Sencha的辅助产品也全部收费，否则只能是试用版。
官网：http://extjs.org.cn/
16.Mootools
Mootools是一个简洁、模块化、面向对象的开源JavaScript web应用框架。它为web开发者提供了一个跨浏览器js解决方案。在处理JS 、CSS、HTML的时候，它提供了一个比普通js更面向对象的documentAPI。
特点：
1）灵活，模块化的框架，用户可以选择自己需要的组件；
2）Mootools代码强壮，有力，有效；
3）高效的组件机制，可以和flash进行完美的交互；
4）对于DOM的扩展增强，使开发者更好的利用document；
5）兼容性：IE6+、Safari2+、MozillaFirefox2+、Opera9+、Camino1.5+。
官网：http://mootools.net/
17.EdoJS
EdoJS是一个跨浏览器的富客户端界面框架解决方案。
EdoJS使用JavaScript开发，与服务端平台无关。通过Ajax数据交互方式，可以支持多种服务端平台，如ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails等。
特点：
1）易学性
可以很快掌握EdoJS的编程精髓。
2）强大的功能、丰富的组件库
已有超过60个组件和100个示例，并且不断增加中。
3）代码体积小，内存占用少，运行速度快
卓越的架构和发挥到极致的DOM编程控制，使EdoJS达到浏览器所能的极限。
4）超强的列表系列
做到极致的表格Table、树形Tree，甚至TreeGrid等。
5）美观、百搭的界面
只需要编码，即获得专业、精美的界面。
6）跨服务端平台支持
支持多种服务端平台，如ASP.NET、ASP、PHP、JSP、ColdFusion、Ruby on Rails等。
7）跨浏览器支持
一次编码，可多次运行。
官网：http://www.edojs.com/
18.Semantic UI
SemanticUI对单词和类以可交换的概念处理。classes使用类似名词/修饰词关系的自然语言语法，对语序，多连接有直观概念。Semantic用简洁的短语来触发功能。在组件中任意设计都是作为一个设置，开发者可以修改。简洁调试，性能日志可以让用户不通过堆栈挖掘来跟踪瓶颈。Semantic给予了完全的设计自由。高层次量变与直观的集成系统让用户只写几行代码就可改变用户自己部件的外观与感觉。
特点：
1）拥有丰富的CSS模块；
2）常用的JS组件；
3）CSS3动画特效；
4）漂亮大气的新式。
缺陷：
CSS太多重复样式，导致CSS文件过大。
官网：http://www.semantic-ui.cn/
19.Pure
Pure来自于雅虎，是一款纯CSS编写，轻量级的、模块化的框架，包含各种整合和独立的组件。
特点：
1）框架基于纯CSS，无任何JavaScript代码，渲染速度比较快；
2）由Yahoo出品，技术上可以信任；
3）框架十分小巧，压缩后仅5.7k；
4）组件很丰富，包括表格、表单、按钮、导航等；
5）CSS类的标识十分简单，因此在使用Pure的过程中代码会比较友好。
官网：http://purecss.io/
20.Kube
Kube是一款轻量级、CSS样式框架，兼容性可适用于目前的主流浏览器。
特点：
1）Kube足够的简单，足够小，具有很强的自适应能力；
2）拥有最新最酷的网格和漂亮的字体排版，没有任何样式绑定；
3）拥有最大的灵活性和定制性，给开发人员以绝对的自由；
4）Kube没有定义部分，它没有过多的UI元素和额外的风格，没有jQuery UI功能插件，当然不会带来“卡”的影响；
5）Kube框架只有一个CSS文件，带来不会让人头痛的响应式布局。
官网：https://imperavi.com/kube/
21.Fbootstrapp
Fbootstrapp基于Bootstrap并且提供了跟Facebook iframe apps和设计相同的功能。包含用于所有标准组件的基本的CSS和HTML，包括排版、表单、按钮、表格、栅格等等，风格与Facebook类似。
特点：
1）基于Bootstrap
Fbootstrapp基于Twitter，名称可能会提示。
2）facebook的样式
Fbootstrapp有更直观的用户应用程序，有与facebook网站相似的外观元素样式。
3）建立fanpage选项卡
Fbootstrapp中的520px网格完全适合创建fanpage的选项卡。
4）构建画布上的应用程序
在520px网格中，画布适用于更大的独立应用程序。
官网：https://github.com/ckrack/fbootstrapp
22.Ink
Ink是由Zurb公司推出的一款快速创建响应式的HTML邮件模板（EDM模板）的框架，使用简单并且可扩展，能够实现良好的互动。
EDM是“Email Direct MarKeting”的缩写，即电子邮件营销，简称为邮件营销。是利用电子邮件与客户进行商业交流的一种直销方式。“EDM模板”使用表格来制作，并且都是通过行内样式来控制页面的渲染风格，致使很多效果在“EDM模板”中受到限制，因制作时受到很多条件限制以及兼容众多版本的客户端邮件系统问题，致使Ink的出现。
特点：
1）网格
Ink的网格由三个组件组成：容器、行、列，其中包括子网格（非叠加网格布局）、块网格（不使用媒体查询，块网格元素自动左对齐，在小屏幕下时放不下会推到下一行单独放置）。
Ink在580px容器上使用12列网格，在移动端设备上（580px宽度下），列变成全屏宽度并垂直排列。
2）可视类
在不同的屏幕大小中选择性的显示内容。
3）面板
快速突出重要内容。
4）按钮
可根据自身需求调整按钮的尺寸、颜色、是否圆角。
5）图像
Ink灵活处理PC端和移动端的图像处理。
6）兼容性
Ink兼容主流的浏览器与移动端系统。
官网：http://foundation.zurb.com/emails.html
23.Furatto
Furatto是一个扁平化风格，功能强大的前端开发框架，该框架基于Bootstrap和Foundation等框架，可以用它快速web开发。Furatto框架使用流行的FlatUI（扁平化界面）且以响应式布局为中心。
特点：
1）样式
除了排版和网格，Furatto还包含网站开发的所有主要元素样式，如按钮、表单、表格等。
2）组件
Furatto有如对话框、Tooltips等各种JavaScript组件
3）易用性
由于Furatto使用SASS，所以颜色和样式非常容易修改和定制。
官网：http://icalialabs.github.io/furatto/index.html
