常用响应式web UI框架搜集整理

作者：仓颉
出处：http://www.liujingze.com/responsive-web-ui-framework-collection.html

Bootstrap

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

Foundation

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

Skeleton

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

Less Framework

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

ResponsiveAeon

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

Gumby

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

Gridpak

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

Responsive GS

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

Amazium

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

Golden Grid System

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

Centurion

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

The 1140 CSS Grid

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

Frameless Grid

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

inuit.css

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

Fluid Baseline Grid

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

HTML5 Boilerplate

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

320 and Up

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

Ingrid

ingrid是一个轻量级、流式布局系统，其主要目标是减少对单个元素的类的使用。ingrid易扩展，并且很容易根据需要来定制。
官方网站: http://piira.se/projects/ingrid/
github: https://github.com/robertpiira/ingrid

Responsive grids for Compass

Responsive grids for Compass是一个灵活、自由的流式网格布局的响应式web框架，可以轻松适配平板电脑、智能手机。
官方网站: http://susy.oddbird.net/
github: https://github.com/ericam/susy

Columnal

Columnal让响应式网页设计变得更加容易.它的最大宽度为1140px，不过由于采用响应式网页布局，所以可以适配大部分的浏览器。
内置的调试CSS工具可以显示正在构建的任何网页的结构；Sub-columns(columns和columns之间)有更多的布局可供选择；在columns的内容的前后可以定义额外的样式；垂直间距的CSS类；在构建之前可以用PDF网格系统勾勒出网站样式；网格式模板。
Columnal正在积极开发中，所以你有可能在使用过程中遇到bug。
官方网站: http://www.columnal.com/

Semantic Grid System

Semantic Grid System是一个响应式web框架，可设置列和分隔的宽度，并且可以在像素和百分比之间自由切换。
官方网站: http://semantic.gs/
github: https://github.com/twigkit/semantic.gs

BluCSS

BluCSS是一个响应式布局框架，可以适配桌面屏幕、笔记本电脑、平板电脑和手机，并且还附带了一些内置的样式，可以让你轻松构建网站。BluCSS有图像响应式显示的功能（仅适用以"blu_"开头的类 ），图片会根据浏览器的宽度自动调整大小。
官方网站: http://designlunatic.com/projects/blucss/

Gridless

Gridless支持IE 6+,Firefox 3.5+,Opera 11+,Chrome 11+,Safari 5+。使用了漂亮的印刷字体、HTML 5和CSS 3，响应式布局可以适配不同的浏览器。
官方网站: http://thatcoolguy.github.com/gridless-boilerplate/
github: https://github.com/thatcoolguy/gridless-boilerplate

转载于:https://www.cnblogs.com/leonxyzh/archive/2013/01/13/7289130.html