首页

关于

帮助开发者快速创建响应式布局的Boilerplate - Responsive Boilerplate

帮助开发者快速创建响应式布局的Boilerplate - Responsive Boilerplate

在线演示

如果你需要开发一个支持不同客户端设备的应用或者网站的话,使用一些现成的响应式框架或者模板绝对是不错的选择,在这篇文章中,我们将介绍一款超棒的响应式布局Boilerplate - Responsive Boilerplate

这个模板使用CSS3来支持响应式设计,超轻量级,只有2kb大小。这个模板拥有一个容器 + 12个列的网格,支持图片的内容有图片,视频,媒体等等。

同时,下载包含了一个PSD网格,Sublime的代码片段和响应式导航变化的javascript。你只需要稍微修改就能够快速的生成一个响应式的网页。

网站地址:http://responsiveboilerplate.com/

标签: responsive boilerplate, 响应式布局, 响应式, responsive, css3

阅读更多

帮助你生成响应式布局的CSS模板 - xyCSS

帮助你生成响应式布局的CSS模板 - xyCSS

在线演示

在前面的文章中我们介绍了响应式的网格profound grid,用来帮助你开发固定或者响应式的流动布局设计,如果你希望使用纯CSS生成响应式的布局的话,相信xyCSS将会是一个不错的选择,xyCSS是一个简化的轻量级CSS框架,只使用一个CSS文件,能够帮助你创建流动或者响应式的布局。

这个框架包含了结构和版面字体相关的样式定义,帮助你有效的使用语义化方式管理你的布局结构。

主要特性

  • 通过CSS的media queries来生成响应式的设计
  • 通过使用CSS reset来解决缺省浏览器的样式问题
  • 水平风格的流体网格布局
  • 垂直风格的可缩放印刷版网格风格
  • 不使用class属性定义
  • 为HTML5设计,支持任何标记
  • 通过CSS3加强
  • 动态的media query过渡效果
  • 支持移动,iphone/ipad,桌面大屏幕
  • 支持prent media的网格样式定义
  • 轻量级的单个css文件
  • 开源并且免费使用
  • 拥有完善的文档和在线演示
  • 支持各种不同类库,例如,jQuery插件,兼容wordpress插件等等

如何使用?

标签: css, css模板, 响应式布局, xyCSS

阅读更多

另外一款超棒的响应式布局jQuery插件 - Freetile.js

另外一款超棒的响应式布局jQuery插件 - Freetile.js

在线演示 

我们曾经介绍过俩款知名的响应式布局插:isotopemasonary,今天我们这里再介绍一款相当不错的响应式布局插件 - Freetile.js,使用它同样可以生成超酷的动态布局效果。相信大家一定会喜欢!

主要特性

Freetie来自于AssemblageAssemblage Plus的内建布局引擎,设计灵感来自于Masonry,VGrid和Wookmark,但是和他们相比较,拥有以下独特的地方:

  • 允许包含任何尺寸的元素,并且不要求一个固定的列宽度,因此你不需要指定列宽度来迎合你的元素大小
  • 内建算法允许你很容易的自定义插入的位置,满足不同喜好的展示方式。例如,向左或者向右对齐,或者接近特定元素。
  • 智能的动画方式能够很好的判断是否需要动画特效。例如,刚加入的元素和不可见的元素。
  • 只要使用Assemblage 和 Assemblage Plus模板的网站都在使用它,所以说非常稳定。

如何使用

基本使用方式:

$('#container').freetile();

启用动画特效:

$('#container').freetile({…

标签: jQuery, jquery插件, 响应式布局, Freetile.js

阅读更多

使用media queries实现的超棒响应式(responsive design)页面设计效果

日期:2012/03/16  来源:GBin1.com

今天我们这篇文章将介绍来自 Arley McBlain (@ArleyM) 的一个超酷响应式设计,最除这个设计来源于他的个人网站ArleyM.com。 主要得效果在于当用户修改浏览器大小,或者使用不同尺寸的设备来访问这个网站的时候,会根据屏幕尺寸修改界面文字,一个典型的responsive text的效果。在这个演示中,将使用media query对于300px到1920px的每10px的宽度修改显示不同的文字。

使用media queries实现的超棒响应式(responsive design)页面文字设计效果

在线演示  本地下载

HTML代码如下:

<div class="row">
  <h2>Be <span></span></h2>
</div>

非常简单,使用CSS将span生成需要的文字。当然对于IE来说,我们使用条件语句来实现。

CSS代码

标签: responsive design, 响应式设计, 响应式布局, responsive

阅读更多

10款非常有效的帮助你设计超酷响应式布局的jQuery插件

日期:2012/02/24  来源:GBin1.com

10款非常有效的帮助你设计超酷响应式布局的jQuery插件

如果你关注最近几年的web设计,那么响应式布局(responsive layout)设计对于你来说肯定不是一个陌生的词汇。 相对于传统的页面设计来说,今天的设计者需要考虑的用户来源和用户体验对于设计者来说是一个非常大的挑战,因为随着硬件的更新,新设备的出现,你需要能够使得你的网站能够针对不同的设置做出最好显示响应。最初这个名称来自于Ethan Marcotte的文章"Responsive Web Design",设计的理念在于为了有效的利用空间和布局来满足用户阅读过程中产生的不同使用行为,并且及时的做出响应。现在的响应式设计中,我们网站也针对不同的设备的显示尺寸来有效的改变页面布局和样式。如果大家使用过jQuery mobile网站API文档的话,你可以看到它也是用了响应式设计的模式,如果你使用浏览器浏览文档,如果你变化你的浏览器尺寸,显示的内容也会根据浏览器尺寸变化。

今天这里我们将介绍几款非常不错的jQuery插件来帮助你构建你的响应式设计,希望大家喜欢,如果你喜欢我们的文章,请大家去我们微博或者留言区留言,谢谢大家!

相关文章:分享10款帮助你设计自适应布局(Responsive

标签: 响应式布局, responsive design, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.