全球响应式网站前端框架介绍

admin

响应式设计在2012年被提的比较多，但是响应式设计仍然在不断变化，不断创新。比如，新的设备不断出来(iPad Mini)，这让以前的设计想法土崩瓦解。而各种Web的响应式设计也获得了越来越多的注意，“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，所以Web设计也将迎来更多的响应式设计元素。
UIKit
UIkit 是一个轻量级、模块化的前端框架，可快速构建强大的web前端界面。它根据不同的屏幕分辨率与上网设备，会自动做出响应，提供一致的体验。
Bootstrap
由两个Twitter员工开发并开源的前端框架，目前已经更新到了v3.0版本，在Github上非常火爆，在国内也有很多粉丝，值得一试。
Adobe Edge Inspect
对移动开发者尤其有用的工具，其前身是 Adobe Shadow，用于帮助设计师和开发者同时在多个移动设备上预览应用设计，发现和解决跨平台问题。
Responsive Web Design Sketch Sheets
如果你还在用纸和笔来创建你的实体模型，你可以用这些现有的草图来设计你的交互网站了。
Foundation
号称是世界上最先进的响应式前端框架。
SimpleGrid
轻量级的响应式 CSS 网格系统，让你可以快速创建适应于手机和平板电脑的网站。
Responsive Testing
这个工具可以让你预览你设计网页在不同设备上的效果，只需要访问它的网站并输入你网站的地址就可以看到了。

弘帝告诉所有人：借鉴学习是好事，可以快速帮您提高前端设计水平，但框架并不意味着是好东西，不过能提高您的工作效率而已。
不要因为你懂多少框架，你就有多大本事！
真正的网页设计师，只有属于自己的框架，而不是借用别人的框架，因为框架意味着垃圾！
同时，弘帝告诉大家，框架越完美，就意味着垃圾代码越多，甚至有些页面引用了框架，结果90%以上的功能都用不上，您说是不是垃圾，只会增加服务器与客户端的资源占用！

admin

Gumby Framework
Gumby 2是建立在Sass基础上的。Sass是一款非常强大的CSS 预处理器，允许用户自主快速的开发扩展Gumby，同时提供很多新的工具来自定义和扩展Gumby框架。Gumby 2是一个非常棒的响应式CSS框架。
Get UI Kit
Get UI Kit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面，而且，它是一款开源的前端UI界面的框架，可以无任何限制的使用UIKit 来创建自己的风格。
Foundation
Foundation是一个易用、强大而且灵活的框架，用于构建基于任何设备上的Web应用。提供多种Web上的UI 组件，如表单、按钮、 标签等。
Semantic
UI是Web的灵魂！Semantic是为工程师而制作的可复用的开源前端框架。提供各种UI组件，使得开发更加直观、易于理解。
52Framework
52 Framework主要用于优化HTML5和CSS3的跨浏览器兼容性的框架，可在所有主流浏览器上运行。
PureCSS
Pure是一组小的、响应式CSS模块，可用于任意Web项目中。它可作为每个网站或Web应用的起步工具，帮助开发者处理应用程序所需的所有CSS工作，同时不会让每个应用千篇一律。
Responsablecss
Responsable使用最少的Sass，带给你最完美的响应式框架。
TukTuk
TukTuk支持代码重用功能，提供更加快速、高效的样式列表，易于添加与维护。
Kube
Kube是全球最为流行、最灵活的CSS框架之一。其带给你最强大的功能选择，极具创意性与美观性。
Ivory
Ivory是一款强大、灵活、易用的响应式框架。 Ivory基于12列的响应式网格布局，包含表格，按钮，表格，分页，拨动开关，工具提示，手风琴，选项卡等网站中常用的组件和样式。

admin

1.ProtoFluid 4
ProtoFluid简化了液态布局的开发，能够适应CSS和响应式设计，能够构建出精准、动态的视角。开发者可免费使用ProtoFluid，并且还允许开发者使用其它扩展工具，比如FireBug。
2.Viewport Resizer
Viewport Resizer是一款基于浏览器的测试工具，它能够测试任何网站的响应能力。用户只需把网页拖入书签，然后点击需要测试的网页即可检查页面的屏幕分辨率。此外，Viewport Resizer自带的分辨率尺寸不一定能够满足你的需求，所以，用户还可以自定义添加其它类型的屏幕尺寸。
3.Responsive.IS
用户只需输入要测试的网址，即会根据你所选的设备自动改变网页的大小。
4.Respondr
Respondr是一款轻量级、非常方便小巧的工具，用户只需输入网页的URL，然后选择你所要测试的设备，如iPhone、iPad、桌面浏览器等，即可看到网页在不同平台上的显示效果。
5.Froont
Froont是一款基于Web的设计工具，不需要程序员介入的设计编程工具，为设计师们提供了可视化的在线网页设计环境。
6.Responsivepx
Responsivepx 是一个功能简单、但却很方便实用的测试工具，可以测试网页在不同尺寸的显示器上所呈现的效果。此外，Responsivepx 能让你自行调整要显示的尺寸长宽px值。用户即可在线使用，也可以在本地上对网页进行测试。
7.Responsive
Responsive可以让你看到测试网站在同一个屏幕上显示不同分辨率下的效果，不需要切换到不同的模式。
8.Screenfly
Screenfly是一款免费的测试工具，可以用来测试不同客户端下（不同显示器或者移动设备）网站的显示状况。
9.Review.js
Review.js是一个动态的viewport系统，提供高效的响应式网页浏览选择。它是一个纯JavaScript实现的类库，更少的请求使得它对宽带的要求更少，支持插件式的扩展，并且可以支持自定义窗口改变事件。此外，该系统还提供了‘Opt-In’和‘Opt-Out’响应式设计状态。
10.Responsinator
Responsinator提供了仿真的Web界面来测试你的响应式设计，提供了iPhone，Android，iPad，Kindle及其多种设备上的预览效果，你可以方便地看到需要支持的设备的响应式设计效果图。
11.resizeMyBrowser
resizeMyBrowser是一个响应式网页设计工具，允许你选择需要测试的浏览器尺寸。用户可以在15种不同的预设尺寸中选择或输入自定义的尺寸。
12.Responsive Design Bookmarklet
Responsive Design Bookmarklet是一款响应式设计测试工具，用户需要把网页拖拽到书签上方的书签栏，浏览器即会自动应用。用户可以查看网页在不同设备上的预览效果。
13.Adobe Edge Inspect CC
Adobe Edge可以让你在设备上预览和检查响应式网站。
14.I am mobile
I am mobile可以测试网页在各种不同窗口上的显示效果，并且还会给出一些建议，让你的网站更具移动友好性。
15.Retina Images
Retina Images主要用来测试图片在不同的设备上的显示情况，这样有利于用户在开发出高清晰度的图片。此外，你无需更改任何img标签，并且Retina Images安装也十分方便。

admin

1.Aliceui
Aliceui是支付宝的样式解决方案，是一套精选的基于 spm 生态圈的样式模块集合，是 Arale 的子集，也是一套模块化的样式命名和组织规范，是写 CSS 的更好方式。

gitHub地址：https://github.com/aliceui/aliceui.github.io

2.Amazeui(太轻了，很多还是需要自己写)
Amaze UI 是一个轻量级、 Mobile first 的前端框架, 基于开源社区流行前端框架编写的。

官网地址：http://amazeui.org/

3.sui
SUI是一套基于bootstrap开发的前端组件库，同时她也是一套设计规范。
通过SUI，可以非常方便的设计和实现精美的页面。

官网地址：http://sui.taobao.org/

同时sui还有移动端版本msui，msui是阿里巴巴共享业务事业部UED团队的作品。目的是为了手机H5页面提供一个常用的组件库，减少重复工作。

地址：http://m.sui.taobao.org/

4.FrozeUI
Frozen UI是一个开源的简单易用，轻量快捷的移动端UI框架。基于手Q样式规范，选取最常用的组件，做成手Q公用离线包减少请求，升级方式友好，文档完善，目前全面应用在腾讯手Q增值业务中。

官网地址：http://frozenui.github.io/

5.uiKit
uiKit是一款轻量级、模块化的前端框架，可快速构建强大的web前端界面。

官网地址：http://www.getuikit.net/

6.H-ui
H-ui是轻量级前端框架，简单免费，兼容性好，适用于中国网站。

官网地址：http://www.h-ui.net/

7.Weui
weUI 是一套同微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信 Web 开发量身设计，可以令用户的使用感知更加统一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。

官网地址：https://github.com/weui/weui

8.layui
Layui 诞生于2016年金秋，是一款带着浓烈情怀的国产前端UI框架，她追求极简，又不失丰盈的内在，说她是史上最轻量的结晶，似乎并不为过。一切都源自于她对原生态的执着，对前端社区的那些噪杂声音的过滤，以及她本身的精心雕琢。

官网地址：http://www.layui.com/

9.YDUI Touch
YDUI Touch 专为移动端打造，在技术实现、交互设计上兼容主流移动设备，保证代码轻、性能高;使用 Flex 技术，灵活自如地对齐、收缩、扩展元素，轻松搞定移动页面布局;实现强大的屏幕适配布局，等比例适配所有屏幕。什么？用得不开心？轻松切换 px;自定义Javascript组件、Less文件、Less变量，定制一份属于自己的YDUI;

官网地址：http://www.ydui.org/

10、后台UI开发框架 MuseUI
一款基于bootstrap风格，兼容于主流浏览器（包括IE6）的后端UI开发组件。

官方网站：http://git.oschina.net/muse/museui

admin

1.DWZ  国产的jQuery UI富客户端框架

框架地址：http://jui.org/

2.jQuery LingerUI  国产前端框架

框架地址：http://www.ligerui.com/

3.JQuery EasyUI  帮助你快速构建web应用的前端框架

框架中文地址：http://www.jeasyui.net/

框架英文地址：http://www.jeasyui.com/

4.bootstrap  这个就不多说了，目前应用最为广泛的UI框架，组件样式都非常丰富

框架地址：http://www.bootcss.com/

5.BUI  感觉做的还是不错

框架地址：http://www.builive.com/

6.拼图  优秀的国产响应式css开源框架，自动适应手机，平板，电脑

框架地址：http://www.pintuer.com/

7、Alloy UI – 功能强大的CSS UI框架

Alloy UI是基于YUI 3的前段UI框架，包含一套丰富的（超过60）UI 部件，如图片库，对话框，树形结构，面板，自动完成，按钮，日历控件，工具条等。

官方网站：http://alloyui.com/

admin

国内
Plane UI
https://pandao.github.io/planeui/
感觉挺好的，但是github最后一次提交时间2015-06-28。
代码完整，值得学习，依赖第三方比较大是个缺点。
本站拷贝：http://wh.ac.cn/plus_ui/planeui/examples/index.html

ZUI
http://zui.sexy/
https://github.com/easysoft/zui

拼图(用过)
http://www.pintuer.com/

AmazeUI(用过)
http://amazeui.org/

SUI
http://sui.taobao.org/

BUI（界面水平较差,不推荐）
http://www.builive.com/

Layui(未发布)
http://www.layui.com/

ESUI（百度）
http://ecomfe.github.io/esui-family/index.html

国外
uikit(用过)
http://getuikit.com/

Semantic UI
http://semantic-ui.com/

类ext
EasyUI（用过）
http://www.jeasyui.com/

JUI(原名DWZ)
http://jui.org/

LigerUI
http://ligerui.com/

admin

如今出现了大量的CSS前端框架，但真正优秀的框架只有少数几个。

本文将会比较其中五个最佳的框架。每个框架都有自己的优点和缺点，以及具体的应用领域，你可以根据自己的具体项目需求进行选择。此外，许多选项都是模块化的，允许你仅使用所需的组件，甚至可以混合使用来自不同框架的组件。

本文依据各个框架的GitHub流行度来顺序介绍。

Bootstrap

Bootstrap是目前可用框架中无可争议的领导者。其人气日益增长，你可以放心的选择这个框架，而不必担心项目会失败，因为具有广泛使用基础的框架，不太可能被抛弃。

• 创作者： Mark Otto 和 Jacob Thornton.
• 发行： 2011
• 当前版本： 3.3.7
• 人气： GitHub上有111,000颗星
• 说明： “Bootstrap是最流行的HTML，CSS和JavaScript框架，用于在网络上开发响应式、移动的Web项目。
• 核心概念/原则： RWD和移动端优先。
• 框架大小： 154 KB
• 预处理器： Less和Sass
• 响应式布局：是
• 模块化：是
• 启动模板/布局：是
• 图标集： Glyphicons Halflings设置
• 附加/附件：无捆绑，许多第三方插件可用。
• 独特组件： Jumbotron
• 文档资源：良好
• 自定制：基本GUI定制器。但是你需要手动输入颜色值，因为没有颜色选择器可用。
• 浏览器支持： Firefox，Chrome，Safari，IE8 +（您需要IE8的Respond.js）
• 许可证： MIT
  

Bootstrap说明

Bootstrap的广泛流行是它的优势所在。在技术上，它不一定比列表中的其它框架更好，但它提供了比其它四个框架更多的资源（文章和教程、第三方插件和扩展、主题构建器等）。简而言之，Bootstrap 无处不在，这是人们继续选择的主要原因。

Foundation

Foundation是排在第二名的框架。ZURB这样坚实的公司一直支持着Foundation，所以这个框架有强大的基础。Foundation现已用于许多大型网站，包括Facebook，Mozilla，Ebay，Yahoo！和国家地理等。

• 创作者： ZURB
• 发行： 2011
• 当前版本： 6.3.1
• 人气： GitHub上有25,400颗星
• 说明： “世界上最先进的响应式前端框架”
• 核心概念/原则： RWD，移动端优先，语义。
• 框架大小： 197.5 KB
• 预处理器： Sass
• 响应式布局：是
• 模块化：是
• 启动模板/布局：是
• 图标集： 基础图标字体
• 额外/附加组件：是
• 独特的组件： Icon Bar, Clearing Lightbox, Flex Video, Keystrokes, Joyride, Pricing Tables
• 文档资源：良好，还有许多额外资源。
• 自定制：基本的GUI定制程序，类似于Bootstrap定制工具。
• 浏览器支持： Chrome，Firefox，Safari，IE9 +; iOS，Android，Windows Phone 7+
• 许可证：MIT
  

Foundation说明

Foundation是一个真正的专业框架，提供业务支持、培训和咨询。它还提供了许多资源来帮助你更快更轻松地学习和使用该框架。

Semantic UI

Semantic UI是一个语义化设计的前端开源框架。它利用自然语言原理，从而使代码更加可读和可理解。

• 创作者： Jack Lukic
• 发行： 2013
• 当前版本： 2.2
• 人气： GitHub上有34,762颗星
• 说明： “基于自然语言原则的UI组件框架”。
• 核心概念/原则：Semantic, tag ambivalence, responsive。
• 框架大小： 806 KB
• 预处理器：少
• 响应式布局：是
• 模块化：是
• 启动模板/布局：是，并提供了一些基本的入门模板
• 图标集： Font Awesome
• 额外/附加组件：否
• 独特的部件：Divider, Flag, Rail, Reveal, Step, Advertisement, Card, Feed, Item, Statistic, Dimmer, Rating, Shape。
• 文档资源：非常好，Semantic提供了一个非常有组织的文档，另外还有一个单独的网站提供入门指南、自定义和创建主题。
• 自定义：没有GUI定制器，只有手动定制。
• 浏览器支持： Firefox，Chrome，Safari，IE10 +（仅IE9浏览器前缀），Android 4，Blackberry 10
• 许可证：MIT
  

Semantic UI说明

Semantic是这里所讨论的所有框架中，最具创新性和全功能的框架。其框架的总体结构、类中清晰逻辑的命名约定方式和语义方面也超过了其它框架。

Pure

Pure是一种轻量级的模块化框架，采用纯CSS编写，具有可根据需要一起使用或单独使用的组件。

• 创作者：雅虎
• 发行： 2013
• 当前版本： 0.6.2
• 流行度： GitHub上有16,637颗星
• 说明： “一套小而灵活的CSS模块，能够在每个Web项目中使用。”
• 核心概念/原则： SMACSS，极简主义。
• 框架大小： 16 KB
• 预处理：无
• 响应式布局：是
• 模块化：是
• 启动模板/布局：是
• 图标集：无。可以改用Font Awesome。
• 额外/附加组件：无
• 独特组件：无
• 文档资源：很好
• 自定义：基本GUI皮肤生成器
• 浏览器支持：最新版本的Firefox，Chrome，Safari; IE7 +; iOS 6.x，7.x; Android 4.x
• 许可证： Yahoo! Inc. BSD
  

Pure说明

Pure为你的项目提供了一个干净的开始，只提供基本框架。对于不需要全功能框架但仅包含在其工作中的特定组件的人来说，pures是一个理想的选择。

UIkit

UIkit是一个易于使用和自定义的组件的简洁集合。虽然它不像其它框架那样受欢迎，但它提供了相同的功能和质量。

• 创造者： YOOtheme
• 发行： 2013
• 当前版本： 3.0.0
• 人气：GitHub GitHub上有9,422颗星
• 说明： “用于开发快速而强大的Web界面的轻量级和模块化的前端框架”。
• 核心概念/原则： RWD，移动端优先
• 框架大小： 326.9 KB（如果包含uikit-icons.min.js与SVG图标相关的功能，则为384.4 KB ）
• 预处理器：少，Sass
• 响应式布局：是
• 模块化：是
• 启动模板/布局：是
• 图标集： UIkit自带SVG图标系统和类库，其中包含越来越多的大纲图标。
• 额外/附加组件：是
• 独特的组件：Article, Flex, Cover, HTML Editor
• 文件：好
• 自定义：高级GUI定制程序仅在版本2（以前的版本）中可用
• 浏览器支持： Chrome，Firefox，Safari，IE9 +
• 许可证：MIT
  

UIkit说明

UIkit成功应用在许多WordPress主题中。它提供了灵活和强大的手动定制机制（以前版本的框架还提供了高级GUI定制程序）。

什么是最适合你的框架？

在选择框架时，可以从以下几个方面考虑：

• 所选的框架有足够的人气吗？更多的人气意味着更多的人参与项目，也意味着有更多的教程和社区文章、更多的实例和网站、更多的第三方扩展、更好的相关的Web产品可与其集成。受欢迎程度也意味着框架更具前瞻性，因为具有更大社区的框架不太可能被抛弃。
• 框架是否正在积极发展？一个好的框架需要不断地使用最新的web技术，特别是在移动端方面。
• 框架是否达到成熟？如果一个特定的框架在现实项目中还没有被使用和测试，那么将其用于你的专业项目，可能不是一个明智的选择。
• 框架是否提供了良好的文档？为了方便学习过程，总是需要良好的文档。
• 框架的特异性是什么？这里的要点是，与具有高级别特异性的框架相比，更通用的框架更容易使用。在大多数情况下，最好选择一个应用最小样式的框架，因为它更容易自定义。与重写现有的CSS规则相比，添加新的CSS规则是一个更方便有效的做法。
  

如果你还不确定使用哪个框架，那么可以采用混合搭配的方式。当某个特定的框架不能满足你的需求时，可以混合使用两个或多个项目的组件。

最后值得一提的是，现在Flexbox和Grid Layout在主流浏览器的最新版本中得到很好的支持，比以往任何时候都更容易构建复杂的布局。这可能会鼓励更多的开发人员放弃前端框架，从头开始编写他们自己想要的布局。