用户注册



邮箱:

密码:

用户登录


邮箱:

密码:
记住登录一个月忘记密码?

发表随想


还能输入:200字

小蜜锋    -  云代码空间

—— 技术宅拯救世界!

响应式设计资源库——css响应式框架 导航条响应式框架 响应式设计工具

2013-11-26|3701阅||

摘要:响应式设计起源:Ethan Marcotte在2010年写了一篇响应式的文章,宣扬这种新式的网页设计思想,经过3年的发展,响应式设计得到了众多设计师的认可。 本文的目的在于为大家集中推荐一些最有价值的响应式设计资源。包含了CSS框架、在线工具、准备阶段的工具等等。 C

想学响应式设计?来看史上最全的响应式设计资源库

响应式设计起源:Ethan Marcotte在2010年写了一篇响应式的文章,宣扬这种新式的网页设计思想,经过3年的发展,响应式设计得到了众多设计师的认可。

本文的目的在于为大家集中推荐一些最有价值的响应式设计资源。包含了CSS框架、在线工具、准备阶段的工具等等。

CSS 响应式框架

这一部分主要介绍了一些最新的CSS响应式框架,更轻量,而且兼容性也不差。(Foundation,Skeleton是较为老式的CSS响应式框架)

Girder
Girder 使用了Sass silent classes (占位符,输出时不会体现)在HTML中组织内容,标记能够额外处理一些表象类(presentational classes ),比如 “unit_1of4″, “small-2″, “grid4″.

responsive-design-1

Cardinal
Cardinal 是一个小型的、以”移动优先”为理念的CSS框架,默认样式很实用。灵活的字体和响应式的栅格线系统。

responsive-design-2

Typeplate
Typeplate是一款”排版初学者工具”. 一款简约的Sass/CSS库,能够采用合适的手段处理作品。

responsive-design-3

Furatto
Furatto 基于Sass,包含了JS插件,在Coffeescript中开发的,因此很容易阅读。交互性很强,支持多种设备。

http://icalialabs.github.io/furatto

Kraken
轻量、移动优先为理念的模板,适合前端开发者。

responsive-design-5

Gridism
Gridism 是一款简约的响应式栅格线系统,非常好用。

responsive-design-6

Sassaparilla
Sassaparilla 使用了Sass以及Compass技术,让响应式网页设计变得简单。注重于更好的版式布局,打造良好的阅读节奏。让编译更加轻松。

responsive-design-7

Cool Kitten
Cool Kitten是一款滚动视差响应式框架(个人最爱)

responsive-design-8

Responsive Boilerplate
Responsive Boilerplate 极度简约、非常轻量(2kb)的CSS栅格框架。易懂易用。

responsive-design-9

Javascript 响应式插件

这些脚本要么是一小段代码,要么是几个文件,能够实现网页设计作品的响应式。大部分自动注释,因此很方便使用。

Responsive elements
Responsive Elements 小型JS库,能够轻松实现元素的响应式。

responsive-design-10

jPanelMenu
jPanelMenu 是一款jQuery插件,由一款面板式的菜单创建。保证CSS动画更好的实现。

responsive-design-11

SelectNav.js
SelectNav 是一款JS插件,能够将网站的导航栏转换为可选择的下拉菜单。结合了Media Queries,能为移动设备节约空间。

responsive-design-12

Adapt.js
Adapt.js 轻量级JS文件,在浏览器载入页面前,能够根据宽度,智能判定并载入CSS文件。

responsive-design-13

Masonry
Masonry 是一款优秀的jQuery插件,能够打造动态、适应性的布局。能够帮助重新排列元素。

responsive-design-14

RoyalSlider ($12)
RoyalSlider 是一款很好用的jQuery图库或内容滚动插件,动效、响应式布局、支持触控,很适合移动端。无论是滚动栏、幻灯片窗还是内容滚动栏、图库、视频库都能用其实现。

responsive-design-15

UberMenu – WordPress ($16)
UberMenu 是一款非常友好的、高度定制化的、响应式的 Mega Menu WordPress插件。

responsive-design-16

Responsive Pricing Tables – WordPress ($15)
CSS3 Responsive Web Pricing Tables Grids For WordPress CSS3 价格表,两种价格表样式,20种可选颜色,可选项丰富。

responsive-design-17

响应式设计——导航篇

响应式设计中最难的部分大概就是导航了。即便你的导航菜单占地很小,但是移动端的设计依然很困难。传统的网页设计总是把导航菜单放在页顶,以便用户浏览。而响应式设计中,情况很复杂。这一环节,将推荐几种不错的解决方案。

Responsive menu patterns

responsive-design-18

A Responsive Design Approach for Navigation (文章)

responsive-design-19

Flexnav
FlexNav 是一款使用Media Queries和JS实现的多级菜单,支持触控、悬停。符合”移动优先”理念。

responsive-design-20

Naver
Naver一款面向响应式导航的jQuery插件

responsive-design-21

Navigataur
Navigataur 是一款简约的工具,帮助实现响应式导航菜单。

responsive-design-22

响应式设计——图像

如何根据浏览器尺寸、加载速度选择图片尺寸?

CSS Fluid Image Techniques for Responsive Site Design (Article)
Dudley Storey 创作的一篇优秀文章,阐述了该要如何打造”伸缩自如”的图像

responsive-design-23

Clown Car Technique for Responsive Images
Estelle Weyl, 写了一篇关于可缩放矢量图形(SVG)的文章,生动有趣。

responsive-design-24

Responsive Img
Responsive Img 是一款jQuery插件,能够变换图像的src属性,主要根据的是容器的宽度。

responsive-design-25

响应式设计工具

See your site responsive

responsive-design-26

Viewport Resizer
Viewport Resizer 是一款在线工具能够测试网页设计是否符合响应式设计的标准。

responsive-design-27

Screenqueri.es
Screenqueri.es 是一款细腻的响应式测试工具。能够在30多种不同的设备上展示你的网页设计。

responsive-design-28

Responsive Web CSS
Responsive Web CSS 让响应式网页布局变得轻松。只需要添加div,设置一下不同设备上的大小即可。

responsive-design-29 

注意:本文肯定会有所遗漏,如果你有什么好资源,请推荐给优设哥哟!

原文地址:9kdesigns

顶 1踩 0收藏
文章评论
    发表评论

    个人资料

    • 昵称: 小蜜锋
    • 等级: 高级设计师
    • 积分: 7088
    • 代码: 757 个
    • 文章: 360 篇
    • 随想: 211 条
    • 访问: 1263 次
    • 关注

    标签

    设计模式(4)java(9)命名规范(2)广告创意(1)愤怒的小鸟(1)游戏(5)jsp(1)配置(1)Surface(1)windows(1)javabean(1)设计方法(1)开发工具(2)web(4)大数据(2)GPU(1)硬盘(1)内部结构(1)黑客(1)窃取(1)编码(1)解决方法(1)php(28)mysql(9)数据库备份(1)数据库还原(1)命令(2)数据库(1)安装(1)2012(2)世界末日(3)仙剑5前传(1)默哀(1)电源(1)女生(1)装饰器模式(2)古剑奇谭(1)电脑桌(1)史上最牛(1)编程语言(2)小米(3)电视机顶盒(1)营销策略(1)Android(8)手势(1)诺亚方舟(1)Eclipse(1)汽车(1)操作系统(1)软件(1)互联网(5)大事记(1)设计师(2)壁纸(1)古剑奇谭2(1)古剑奇谭网络版(1)云计算(2)服务器(1)框架(2)Socket(1)jquery(1)构造函数执行顺序(1)火车票(1)3D(1)数据中心(2)正则表达式(2)Web前端(1)开发框架(1)系统瘫痪(1)12306(2)cpu(1)javascript(2)开发日记(15)体育馆管理系统(15)网页设计(1)CSS3(3)腾讯(3)小游戏(1)interface(1)平板(2)面试(2)设计(5)摄影(2)数据挖掘(1)钢琴谱(1)情人节(1)陈欧体(1)程序员(3)漫画(1)UserAgent(1)iPhone(2)NoSQL(1)ui(9)越狱(1)指南(1)abstract(1)css(3)git(2)八核(2)三星(1)linux(11)数据类型(1)html5(2)UML(2)perftools(1)创意(1)logo(1)色谱(1)响应式(5)Metro(2)虚拟机(1)jvm(1)垃圾回收(1)left(1)join(1)连接查询(1)溯源系统(1)Override(1)SAE(2)WordPress(1)指针(1)链表(1)系统分析师(1)中间件(1)corba(1)static(1)无线(1)监控(1)iPad(1)Apache(2)比特币(2)命名规则(1)手机支付(1)curl(3)笔记(1)导航(1)thinkphp(1)异常导致本地路径泄漏(1)web设计(1)网络安全(1)诗句(1)4K对齐(1)代码库(1)色彩(1)动画片(1)struts2(3)漏洞(5)确认框(1)心情驿站(1)ArscEditor(1)resources.(1)apktool(1)AppKey(1)新浪微博(1)app(5)广告(3)赚钱(1)响应式布局(1)html(1)淘宝(2)微信(1)重构(5)缓存(1)破解(1)后门(1)七夕(1)SEO(2)概念设计(1)面向对象(1)bootstrap(1)性能(2)优化(1)iis(1)爬虫(1)采集(1)算法(2)文本相似度(2)cto(1)js(1)fsockopen(1)扁平化设计(2)网页(1)心情(7)小米电视(1)开箱(1)励志(2)招聘(3)命名(1)notepad++(1)python(1)配色(3)扁平化(4)ps(2)搞笑(2)创业(3)渲染(1)电影(1)模板(1)微博(1)企业家(1)公司(1)总结(1)前端(1)运营(1)变形(1)svn(4)教程(3)搜狗(1)泄密(1)双11(1)天猫(1)UC(1)启动界面(1)光棍节(1)双十一(2)物流(1)备份(1)更新(1)插入(1)插件(2)jsTree(1)(1)海量数据(1)分辨率(1)草图(1)手绘(1)速度(1)文本处理(1)实习(1)感想(1)文件(1)简历(1)65.49.2.17(1)yum(1)解决办法(1)阿里云(2)推广(1)来往(1)春运(1)LBS(1)gb2312(1)utf-8(1)log4j(1)详解(1)收购(1)私服(1)TortoiseGi(1)post(1)异常(2)flappyBird(1)应用创新大赛(1)宙斯杯(1)学习方法(1)xp(1)退役(1)安全(1)技术贴(1)flash(1)刷机(1)京东(1)电商(1)Tomcat(1)JDK(1)免费(1)长投影(1)图标(1)Photoshop(1)云端集成开发环境(1)软件开发(1)可视化(1)工具(2)OpenSSL(1)Heartbleed(1)vsftp(1)中国知网(1)学术论文(1)免费下载(1)开发(1)手册(1)速查表(1)追随战略(1)sdk(1)文章(1)发布(1)文件管理(1)沙画(1)动效(2)原型(1)感悟人生(1)哲理(1)Bash(1)类图(1)知识管理(1)Console(1)调试命令(1)rpm(1)报错(1)挂载(1)数据盘(1)云主机(1)产品经理(1)原型设计(1)mql4(1)mt4(1)ea(1)程序化交易(1)CURLOPT_PO(1)阿里云​(1)CentOS6(2)OpenSSH(1)漏洞修复(2)升级(1)安骑士(1)链克(1)

    站长推荐