15个响应式设计前端框架 | Be For Web

不年不节不周末的,临时加演一篇资源帖。响应式框架,偏前端的同学可能会有所欲求。

之前念叨过,但凡资源帖,多数是自己眼前用的着的东西,才会趁自己搜罗的机会汇总一下放到这边。话说回来,根本也没做过几篇的样子,印象里有iOS7免费设计资源汇总iOS设备及界面模板免费资源汇总吧。这次拿来15个响应式前端框架;声明,我自己没用过,做这事起初只是为了我们自己有可能的项目收集有可能的素材和解决方案而已。如果您需要,可以挨个访问过去了解详情,也可以直接从Github获取,我最多算个牵线儿的,不做任何support方面的工作,还请理解了。

不多说了,直接上货吧。

Groundwork CSS

resp_framework_02.jpg

使用Sass创建的GroundCSS是一套全响应式框架,其中包含着具有高度的灵活性、可嵌套的液态网格系统,支持任意数量的列,能够帮你打造几乎任何类型的页面布局。

查看详情从Github上获取

MUELLER Grid System

resp_framework_03.jpg

基于Compass打造的MUELLER是一套模块化的网格系统,支持响应式或非响应式的布局,让你对列宽、基线网格和media queries拥有全面的控制权。

查看详情从Github上获取

Cool Kitten

resp_framework_04.jpg

Cool Kitten框架是一套轻量级的HTML/CSS/JS工具集,涉及技术包括Normalize.css、Stellar.js和jQuery Easing插件,可以帮你创建具有时差滚动效果的响应式页面。

查看详情从Github上获取

iOS Web应用开发:运用HTML5、CSS3与JavaScript
相关书籍推荐

Profound Grid

resp_framework_05.jpg

使用SCSS构建的Profound Grid是一个弹性化(可以液态也可以固定宽度)的响应式网格系统,你可以根据需求添加预置媒体文件的布局结构(通过调整列的宽度或增减列)。与其他的网格系统不同,Profound Grid使用负边距(Negative Margins)来计算列,所以液态布局在任何浏览器当中看上去都能保持一致。

查看详情从Github上获取

Centurion

resp_framework_07.jpg

利用SASS和CSS3 media queries构建,Centurion是一套非常易用的响应式Web框架。它的解决方案中提供了可以方便进行定制化的导航、表格、标签(使用CoffeeScript构建)等元素。即使是CSS样式表也是通过Sass创建的,使其能够在代码中的任何地方根据需求包含或排除特定的样式定义。

查看详情从Github上获取

34 Responsive Grid System

resp_framework_09.jpg

34Grid基于“等量分布式纵列(equally distributed columns)”布局构建。与其他各类优秀的网格系统相比,34Grid能够为每一行内容都提供等量分布的纵列。它是完全可定制的,允许你根据自己的需求(最大纵列数量、纵列边距、行间距等)下载代码包。

查看详情

One% CSS Grid

resp_framework_10.jpg

One% CSS Grid是一款基于百分比的12列液态CSS网格系统,专门针对想要快速构建响应式网页的用户而设计。你可以选择两种方式上手,一种适用于1280px宽的界面,另一种适用于1024px的规格。

查看详情

RWD Grid

resp_framework_11.jpg

RWD Grid是一款基于流行的960.gs网格系统打造的响应式框架。它的命名规则与960.gs相仿;为了增加代码的可读性,所有的下划线都被替换为连字符。

查看详情

Sassaparilla

resp_framework_01.jpg

Sassaparilla并非一套样板化和主题化的框架,它能通过SCSS和Compass来创建出可重用的弹性化样式表。

查看详情从Github上获取

Base

resp_framework_13.jpg

Base是一款12列的960px响应式CSS框架,它能提供你快速创建响应式Web项目所需要的一切。Base内置一套最小化的HTML5模板(包含jQuery),一套基本样式表,一个默认的JS文件,一个用于定制样式表的LESS文件。

查看详情从Github上获取

Bourbon Neat

resp_framework_14.jpg

Neat是一款基于Sass和Bourbon构建的语义化网格框架。它简洁而强大,可以帮你快速构建响应式布局结构。通过使用breakpoint() mixin,你可以为每种media query调整纵列的数量,并将这些设置存储在项目全局的变量当中。

查看详情从Github上获取

Extra Strength Responsive Grids

resp_framework_17.jpg

Extra Strength可以创建适应性很强的基于百分比的液态响应式网格。对齐的方式很容易,你可以对网格进行嵌套,它的class命名方式也很容易记忆,并且适用SASS。

查看详情从Github上获取

Blok Grid System

resp_framework_18.jpg

Block网格系统是一款移动优先的框架,可以帮助开发者充分控制页面在手机、平板和桌面设备上的表现。它基于12列的网格构建,你可以为每个div及断点选择不同的纵列数。

查看详情从Github上获取

Gumby 2

resp_framework_19.jpg

Gumby 2是一款基于SASS构建的免费开源响应式框架。它的特色是随需随用,默认提供了960网格布局,其代码库中包含了Google Webfonts、Entypo图标、模块化的排版以及全定制化的UI工具集。

查看详情从Github上获取

Foundation 4

resp_framework_20.jpg

来自ZURB的著名框架,最近经历了一次重大升级。代码完全以移动优先为目标进行了重构。所有的JS插件也都重新进行了优化,变得更快更强。另外它们也转为使用Zepto.js框架,相比与jQuery来说更轻量。

查看详情从Github上获取

响应式Web设计:HTML5和CSS3实战
相关书籍推荐