首页

关于

响应式的前端框架 - Groundwork

响应式的前端框架 - Groundwork

前面我们介绍过了很多响应式的前端框架,例如,Responsive BoilerplateCenturion等等,在这篇文章中我们将再介绍一个响应式的前端框架 - groundwork。

Groundwork是另外一个超棒的响应式前端框架,使用SASSCompass并且提供了一个高级的响应式布局。

拥有了一个灵活的,流动式的镶套grid系统,可以帮助你设计任何类型的布局。这个框架包含了很多UI的组件,例如,tabs,按钮,导航,图标等等

拥有非常完整的文档,并且包含了一个帮助你快速开发布局的模板,相信你会觉得非常实用!

来源网站:http://groundworkcss.github.com/

via gbtags

标签: UI, 分享, 响应式设计, 前端框架, responsive

阅读更多

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

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

在线演示

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

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

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

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

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

阅读更多

一个跨浏览器的响应式设计辅助工具类库 - CSS Browser Selector +

一个跨浏览器的响应式设计辅助工具类库 - CSS Browser Selector +

如果你曾经开发过响应式的网站或者应用的话,肯定会遇到过书写指定浏览器或者操作系统CSS的情况。

今天介绍的这个工具CSS Browser Selector +就是一个帮助你书写指定浏览器或者操作系统CSS的javascript类库。

它不使用任何hack而使用兼容性的代码来实现,并且支持低版本浏览器的mediaquery。它能够探测浏览器,操作系统,浏览器版本,操作系统版本,设备尺寸,及其横纵屏等等。

这里是一个例子:

<html lang="pt-br" class="webkit chrome chrome21 win win8 js orientation_landscape minw_980 maxw_1199">

是不是很简单,class属性知道是什么意思了!希望大家喜欢这个工具类库!

标签: javascript, responsive, browser, 响应式设计, 浏览器

阅读更多

一个帮助你实现pinterest页面布局的jQuery插件 - jQuery.Shapeshift

一个帮助你实现pinterest页面布局的jQuery插件 - jQuery.Shapeshift

在线演示

如果你使用过pinterest的话,应该非常熟悉它的图片布局方式,今天这里我们介绍一款新的jQuery布局插件 -  jQuery.Shapeshift,能够帮助你生成类似pinterest页面布局的展示方式。

相关阅读:分享一个jQuery动态网格布局插件:Masonry

主要特性:

  • 网格系统:所有的项目都是自左向右,自下向上的流动布局
  • 支持拖拽:点击和拖拽来移动元素,支持不同的容器间的拖拽
  • 支持响应式:你可以重新缩放浏览器,可以看到内容自适应。
  • 支持Media Queries:支持响应式的网格。  
  • 支持触摸:  使用jQuery UI Touch Punch可以支持触摸设备的拖拽功能

标签: jQuery, jquery.shapeshift, pinterest, responsive, masonry

阅读更多

【简报】超棒的javascript响应式视图(viewport)切换工具类库

超棒的响应式视图(viewport)切换工具javascript工具

ReView是一个动态的viewport系统,能够帮助你设计更灵活的响应式视图选择方式,可能大家有的时候不希望网站布局在不同的设备上的显示不同的布局结构,这个时候viewport就可以派上用场了。

Review 是一个纯javascript实现的类库,针对每一个session提供单独的持久viewport信息。更少的请求使得它要求更少的带宽。支持插件式的 扩展,并且可以支持自定义viewportChange事件。 相信如果你需要开发定制更灵活的响应式设计网站布局的话,它肯定能够成为你的一大利器。

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

标签: 响应式, responsive, responsive design, responsive layout

阅读更多

分享20个响应式web设计的必备jQuery插件

响应式设计(responsive design)在近些年是非常流行的web设计,能够帮助你有效的针对不同设备的显示屏幕自适应的显示内容,大大的提高了用户的使用体验和web设计的要求,作为最为流行的jQuery来说,也提供了很多现成的插件帮助你实现响应式设计,在今天的这套插件推荐中,我们将推荐给大家20个不错的响应式设计常用插件,希望大家喜欢!

jQuery Masonry - A layout plugin for jQuery

相信大家对于这个jQuery布局插件肯定不陌生,很多网站都使用它开发瀑布流布局。

jQuery Masonry

Isotope - An exquisite jQuery plugin for magical layouts

另外一个不错的布局插件,以前文章中我们也介绍过。

Isotope -- An exquisite jQuery plugin for magical layouts

jQuery picture

以前文章中介绍过这个超棒的响应式图片处理插件

jquerypicture

还记得这个插件吧,针对不同的屏幕设备应用不同大小的图片

Really Simple Slideshow

simpleslider

超简单的幻灯,支持响应式设计

Hoverizr…

标签: jQuery插件, 响应式设计, jQuery, jQuery plugin, responsive, responsive design

阅读更多

使用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

阅读更多

标签

© Copywrite by gbin1.com, all rights reserved.