首页

关于

轻量级的前端UI开发框架 - UIkit

轻量级的前端UI开发框架 - UIkit

UIkit是YOOtheme团队开发的开源的前端UI界面框架,可以帮助你快速的开发和创建前端UI界面。

基于下列开源项目:

  • LESS
  • jQuery
  • normalize.css
  • FontAwesome

主要特性

  • 支持LESS
  • 模块化
  • 支持自定义主题
  • 支持响应式设计

如何使用?

使用UIkit非常简单,下载后,请参考如下的框架代码:

    <!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="uikit.min.css" />
<script src="jquery.js"></script>
<script src="uikit.min.js"></script>

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

阅读更多

CSS3实现的图片加载动画效果

CSS3实现的图片加载动画效果

在线演示

使用CSS3实现的不同图片加载动画效果,支持响应式,非常适合针对瀑布流布局图片动态加载特效进行增强!

HTML

<ul class="grid effect-4" id="grid">
<li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>
<li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>
<li><a href="http://drbl.in/fWMT"><img…

标签: 分享, CSS3, CSS, 响应式设计

阅读更多

响应式的前端框架 - Groundwork

响应式的前端框架 - Groundwork

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

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

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

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

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

via gbtags

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

阅读更多

富有创意的菱形响应式页面设计

富有创意的菱形响应式页面设计

在线演示

如果你是一个追求个性的web设计师的话,是不是厌倦了千篇一律的网站设计形状,不管你浏览那个网站,在你眼中的只有形形色色的方形或者矩形的网页布局设计,如果你想让你的网站看起来与众不同的话,看看这个与众不同的响应式菱形布局吧!

这个设计来自于Trevor Davis,你可以在Github上免费下载使用,如果你想了解详细的信息,请查看Trevor的教程吧!相信你肯定会喜欢的!

via gbtags

标签: layout, 响应式设计, design

阅读更多

一个跨浏览器的响应式设计辅助工具类库 - 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, 响应式设计, 浏览器

阅读更多

帮助你在不同尺寸屏幕下浏览网站效果的工具 - Responsivator

Responsivator

如果你需要开发响应式的网站的话,使用一个必要的浏览工具来检验不同尺寸屏幕下显示效果还是非常有用的,相信你肯定还记得我们以前给大家推荐的响应式网站测试工具 - Screenqueri.es,这个工具可以有效的帮助你模拟iphone,ipad等设备的浏览效果。

在今天的这篇文章中,我们再给大家介绍另外一个不错的在线工具 - Responsivator,和Screenqueri.es不同的地方在于,它提供了很多不同的尺寸屏幕的展示效果,你只需要提供一个url,就可以看到你的网站在不同的屏幕下的显示效果。这里我们使用手机版GBin1:http://m.gbin1.com,效果如下:

Responsivator

Responsivator

最棒的地方在于,你可以把所浏览的网站地址分享给你的朋友。这样别人也能看到不同尺寸屏幕下的显示效果。

 

标签: responsive layout, 响应式设计, responsive layout testing tool, 响应式工具, Responsivator

阅读更多

【短讯】处理Media Queries的javascript类库 - enquire.js

【短讯】处理Media Queries的javascript类库 - enquire.js

enquire.js是一款超棒的轻量级处理CSS Media Queries的javascript类库。主要特性如下:

  • 帮助你处理匹配的media queries(不匹配的也可以)
  • 针对浏览器事件响应
  • 支持一次性的设置
  • 不依赖任何类库,甚至jQuery
  • 可以方便的应用到响应式设计中
  • 类库非常小,压缩版小于1kb

你可以在你的web设计中用来显示图片或者隐藏特定的页面部分。要知道相对于CSS来说使用javascript来控制将会使得开发更加灵动。

标签: javascript, media queries, 响应式设计, enquire.js

阅读更多

分享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

阅读更多

分享一个帮助你在线测试响应式设计的web工具 - Screenqueri.es

如果你使用responsive layout来设计网站或者web应用的话,如何有效的在不同的设备上进行测试是一个比较麻烦的事情,今天我们这里给大家分享一个在线测试responsive布局的设计工具 - Screenqueri.es,能够有效的帮助你测试不同分辨率下网站的视图,希望大家喜欢!

分享一个帮助你在线测试响应式设计的web工具 - Screenqueri.es

分享一个帮助你在线测试响应式设计的web工具 - Screenqueri.es

使用这个工具非常简单,你提供一个需要进行测试的网站或者url,比如,本地地址:http://localhost:8080或者其它在线的网站例如GBin1.com,然后再选择你需要展示的设备类型,例如,ipad,iphone,然后点击"view"即可看到效果。

主要特性

  • 支持众多的设备,包括手机设备,iphone,Galaxy Note,HTC,Blackberry torch等
  • 平板电脑ipad,Galaxy Tab10.1, Sony Tablet,blackberry,kindle,HP Slate500,HTC Flyer等等。
  • 支持设备旋转横屏,竖屏测试
  • 支持保存,并且分享给你的朋友

分享一个帮助你在线测试响应式设计的web工具 - Screenqueri.es

分享一个帮助你在线测试响应式设计的web工具 - Screenqueri.es

标签: responsive layout, 响应式设计, responsive layout testing tool, Screenqueri.es

阅读更多

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