17 款常用响应式 web UI 框架

bypass
 bypass
发布于 2013年01月13日
收藏 354

1. Bootstrap

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。
官方网站: http://twitter.github.com/bootstrap/
github: https://github.com/twitter/bootstrap





2. Foundation

Foundation 是一个易用、强大而且灵活的框架,用于构建基于任何设备上的 Web 应用。提供多种 Web 上的 UI 组件,如表单、按钮、Tabs 等等。
官方网站: http://foundation.zurb.com/
github: https://github.com/zurb/foundation





3. Skeleton

Skeleton 是一个小的 JS 和 CSS 文件的集合,可帮你快速开发漂亮的网站,适合各种屏幕设备包括手机。Skeleton 基于 960 grid 开发。它是一个 UI 框架。
官方网站: http://www.getskeleton.com/
github: https://github.com/dhgamache/Skeleton





4. Less Framework

Less框架是一个用于设计自适应网站的CSS网格系统,它包含4个布局和3套预设布局,这些都以一个单一网格为基础。Less框架的目标是更高效地创建多布局网站,并在布局之间保持一致。
官方网站: http://lessframework.com/
github: https://github.com/jonikorpi/Less-Framework





5. ResponsiveAeon

ResponsiveAeon 是一个HTML5/CSS3的框架,可以非常快速的创建响应的布局。它有一个网格系统是基于总1104px宽度12列,提供了3个非常容易理解的基本类供使用。该框架使使用@mediaqueries的,支持任何尺寸的设备。除了网格系统,也有排版,列表,表格,按钮和表格的样式。
官方网站: http://www.newaeonweb.com.br/responsiveaeon/
github: https://github.com/newaeonweb/ResponsiveAeon-Cssgrid





6. Gumby

Gumby 是一个响应式的以及 960 像素宽度的 CSS 网格框架,支持 PC、平板和手机屏幕显示。类似 Twitter 的 Bootstrap,它包括一个Web UI工具包,有好看按钮,表格,导航+标签和一个很小的JavaScript文件。
官方网站: http://www.gumbyframework.com/
github: https://github.com/dsurgeons/Gumby





7. Gridpak

Gridpak 的目的是实现了响应式的 Web 页面设计,提高您的工作流程,节省了时间。通过生成PNG图像,CSS和JavaScript,,让 Gridpak 创建响应式的简单界面。Gridpak 产生的CSS 兼容 IE 8+,但它使用很多实验性的CSS属性,如媒体查询,盒大小和背景剪辑属性,所以我们建议您结合 Modernizer 来使用,确保向后兼容性。
官方网站: http://gridpak.com/





8. Responsive GS

Responsive GS 是一个流体网格 CSS 框架,用于快速开发响应式的 Web 网站。 Responsive GS 提供三种风格:12、16 和 24 列,使用 media queries 支持所有标准设备。
官方网站: http://responsive.gs/
github: https://github.com/StudioSnapsize/responsive-gs





9. Amazium

Amazium 是一个基于 960 Grid System 的响应式 CSS 框架,使用 960px 宽度,以适应大多数 1024*768 分辨率的屏幕。Amazium 使用 4 个主要的 media queries 来调整所适应的分辨率大小。
官方网站: http://www.amazium.co.uk/





10. Golden Grid System

Golden grid system是为增强网页兼容性设计的折叠式grid。具有四个特征:列、跨页、底线、script。
官方网站: http://goldengridsystem.com/
github: https://github.com/jonikorpi/Golden-Grid-System





11. Centurion

Centurion 是一个基于 SASS 和 CSS3 构建的响应式 Web 框架。
官方网站: http://jhough10.github.com/Centurion/
github: https://github.com/jhough10/Centurion





12. The 1140 CSS Grid

1140网格可以完美适应1280分辨率显示器。在较小的显示器上,它可以根据浏览器的宽度变成流体形式,并自适应浏览窗口。
官方网站: http://cssgrid.net/
github: https://github.com/andytlr/cssgrid/





13. Frameless Grid

Frameless和Golden Grid System类似,是通过逐列(column by column)形式来自适应页面布局,而不是通过逐像素(pixel by pixel)形式。Frameless不是一个框架,因为它不包含任何代码,它只是一个特定类型的自适应网格的想法,你可以将它作为设计工作的一个很好的出发点。
官方网站: http://framelessgrid.com/
github: https://github.com/jonikorpi/Frameless





14. inuit.css

该框架用于使用较少的代码实现在较小屏幕(平板电脑、手机)上运行的项目,支持IE6+。
官方网站: http://inuitcss.com/
github: https://github.com/csswizardry/inuit.css





15. Fluid Baseline Grid

Fluid Baseline网格系统是一个HTML5 & CSS3开发工具包,为网站快速设计提供了坚实的基础。
官方网站: http://fluidbaselinegrid.com/
github: https://github.com/thedayhascome/Fluid-Baseline-Grid





16. HTML5 Boilerplate

HTML5 Boilerplate基于HTML/CSS/JS模板,可以帮助开发者使用HTML5技术快速开发稳健、功能齐全的网站。你可以把它当作自己的新项目模板,在此基础上建立自己的项目。
该模板包含了帮助开发HTML5站点和应用程序的组件和一些优秀的最佳实践,只需开发者最少的前期工作,就能为项目提供一个非常稳固的基础。另外,该模板是高度可定制,可轻松删除不需要的一些特性。
官方网站: http://html5boilerplate.com/
github: https://github.com/h5bp/html5-boilerplate





17. 320 and Up

320 and Up使用一个小型屏幕样式表,以防止移动设备加载桌面资源。其中样式表中包含了一些颜色、排版布局等设置属性。
官方网站: http://stuffandnonsense.co.uk/projects/320andup/
github: https://github.com/malarkey/320andup/

 

以上就是17款常用的的响应式web UI框架,排名不分先后,适合自己的才是最好的。

原文链接

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区。
转载请注明:文章转载自 OSCHINA 社区 [http://www.oschina.net]
本文标题:17 款常用响应式 web UI 框架
加载中

最新评论(14

拼图
拼图
建议用用中国版的Bootstrap,国内优秀的拼图跨屏响应式前端CSS框架(pintuer.com),更适合中文网站,是国内CSS框架的先驱及领导者,完美兼容IE8,还有丰富的案例。
独-奏
独-奏
我来总结一下~IE就是死对头~
shown
shown

引用来自“panhan”的评论

IE9也是痛啊

IE都是痛啊
panhan
panhan
IE9也是痛啊
Marser_cn
Marser_cn
楼下都是正解,楼下全是误解
IMU
IMU
很多客户现在还用xp
y
ylmotol7

引用来自“1inus”的评论

ie6?不鸟它也行,osc在ie下表现的也不是很好

政府机关好多还是6好吧,你敢不鸟你们公司不敢
高跟男爵
高跟男爵
在中国 第一克服 360浏览器 第二克服IE6 7。
水牛叔叔
水牛叔叔
ie6?不鸟它也行,osc在ie下表现的也不是很好
gtd
gtd
IE6,就让他们痛去吧。
返回顶部
顶部