首页风格
门户
博客

GBin1博客视图 - 最近发布的文章-demo

轻量级的前端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, 分享, 响应式设计, 前端框架

阅读更多

帮助你更快的进行网站设计 - Markup Framework

帮助你更快的进行网站设计 - Markup Framework

Markup是一套布局,小组件,UI组件和字体排版样式的框架,可以帮助你快速的执行web相关的设计和开发,相信没有人愿意自己花时间从最基础的层次开发web应用或者是网站,而Markup恰好很方便的帮助你解决了所有的dirty work。

主要的特性

  • 使用最新的HTML5和CSS3标准
  • 最小化标签,页面体积小
  • 搜索引擎友好
  • 纯CSS和HTML,没有JS
  • 没有任何的Hack
  • 结构清晰,语义化
  • 模块化,很方便的混合组件
  • 高效的样式继承,优化了性能
  • 使用命名空间,减少了CSS规则冲突
  • 响应式,支持移动设备
  • 使用media queries
  • 扩展类库,重用界面小组件
  • 整合了开源的字体
  • 完整的文档
  • 快速的代码编写标准

浏览器支持

  • 所有的现代浏览器
  • 使用polyfill可以支持Internet Explorer 7和8.

网站地址:http://www.markupframework.org/

 

在线演示:http://www.markupframework.org/demos/

 

标签: UI, 分享, CSS3, HTML5, 前端框架

阅读更多

超棒的CSS开源UI界面元素类库 - TopCat

超棒的CSS开源UI界面元素类库 - TopCat

TopCoat是一套免费的开源UI元素类库,整套类库不使用任何javascript,而是使用CSS和HTML来生成。

整套UI元素非常丰富,使用标准兼容的HTML/CSS来开发,并且支持响应式的布局,支持两套样式:移动和桌面,你可以直接在网站上查看所有的UI元素样式,当然,还有些元素依然在开发状态中,目前版本0.2。

TopCat的使用非常简单,直接包含对应的CSS,使用HTML结构并且支持自定义设置。如果你需要寻找一套前端CSS的框架的话,Topcat可能是你不错的选择,绝对能够帮助你快速的开发web应用。

支持现代浏览器,如果你使用IE6的话,恐怕支持的非常有限了!

网站地址:http://topcoat.io/

via 极客标签

标签: UI, 分享, CSS, 前端框架

阅读更多

超棒的页面checkbox和radio美化jQuery类库 - iCheckbox

超棒的页面checkbox和radio美化jQuery类库 - iCheckbox

在线演示

iCheckbox是一个超棒的界面美化Javascript类库。

主要特性

  • 跨浏览器和设备统一的input样式和UI(包括了桌面和移动设备)
  • 支持触摸设备 - iOS,android,blackberry,windows phone
  • 支持键盘控制 - Tab,空格,方向键和其它快捷方式
  • 完全自定义 - 使用任何HTML和CSS来控制输入的样式
  • 轻量级 - 1kb
  • 15个选项来自定义checkbox和radio
  • 8个回调函数支持
  • 6个方法来编程控制
  • 支持任何jQuery的选择器
  • 支持IE7+(如果不使用CSS chain也可以支持ie6),Chrome,Firefox和Safari等浏览器
  • 支持移动浏览器(Opera mini, Chrome mobile, Safari mobile等),支持iOS, Android, BlackBerry and Windows Phone设备

使用代码

// customize all inputs (will search…

标签: UI, jQuery, 分享, jQuery插件

阅读更多

响应式的前端框架 - Groundwork

响应式的前端框架 - Groundwork

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

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

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

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

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

via gbtags

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

阅读更多

免费的jQuery UI组件 - Chico UI

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

免费的jQuery UI组件 - Chico UI

Chico UI是一个免费的jQuery组件,可以帮助开发人员快速简单的web应用和网站。这个UI组件集合包含了很多实用的组件,这篇文章将介绍如何使用它们来开发web相关的应用。希望大家喜欢!

主要特性

支持组件包括:

支持浏览器

  • Google Chrome
  • Safari
  • Firefox 4+
  • Internet Explorer 7+
  • Opera

拥有一个CSS布局框架 - Chico Mesh帮助你构建各种类型的web布局和网格。

同时也存在一个CSS类库用来定义HTML和UI元素的样式,例如,列表,表,按钮,字体,分页等。

这个类库拥有非常完善的文档,你可以方便的在这里查阅相关的API…

标签: Chico, jQuery, UI, widget, UI组件, jQueryUI组件

阅读更多

2012年令人崩溃的百度收录量变化

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

不知道是不是最近为了配合百度统计,最近收录量非常奇怪,2月份一天就丢失了一半的收录量,更让人崩溃的是今天3月2号突然又全回来了,貌似百度收录量查询现在按天来计算了。有图为证:

2012年令人崩溃的百度收录量变化

人生大起大落莫过于此啊。 也不知道是不是百度调整搜索算法还是调整百度统计。无语啊!

来源: 2012年令人崩溃的百度收录量变化

标签: SEO, 百度收录, 最新文章, blog, gbin1, 博客, keyword, 博客首页, jQuery, UI, 下载, html, htm5, css, css3, javascript, 前端, 设计, design

阅读更多

轻量级的超酷时间序列javascript类库 - Morris.js

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

轻量级的超酷时间序列javascript类库 - Morris.js

在线演示  本地下载

是不是寻找一个轻量级的时间序列javascript类库,今天我们将介绍的这个时间序列类库morris.js可能就是你需要的图形利器。希望大家有机会在自己的项目中使用到。如果你喜欢们的文章,请给我们留言!

主要特性

最初morris.js用来开发网站 howmanyleft.co.uk,现在已经成为一个开源项目。

依赖类库:

支持浏览器:

  • IE6+
  • Safari/Chrome/Firefox
  • iOS 3+
  • Android 3+

如何使用?

morris.js的使用很简单,你只需要使用一个方法:

Morris.Line(options)

选项:

  • element(必选): 用来插入图形的元素 (注意:这个元素必须宽度和高度定义在自己的样式表里)
  • data(必选):用来绘图的数据,可以使对象数组,包含了x和y轴属性(注意:排序在这里不重要,你可以按你的需要随意的排序)
  • xkey…

标签: time-series, morris.js, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

一个页面内滚动的jQuery插件 - PageScroller

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

一个页面内滚动的jQuery插件 - PageScroller

在线演示  本地下载

今天介绍一款页面内滚动的jQuery插件-pagescroller,以前我们也介绍过类似的jQuery插件 jQuery的滚动插件Waypoints

主要特性:

  • 支持缺省方式左侧导航
  • 支持向上及其向下滚动图标,支持俩个主题
  • 支持顶端固定导航菜单
  • 支持右侧导航 
  • 支持IE9+,firefox,chrome等浏览器

如何使用?

  1. 倒入相关类库
  2. 定义滚动区域:$('#wrapper').pageScroller()
一个页面内滚动的jQuery插件 - PageScroller

Javascript

$(document).ready(function(){

// instantiate page scroller plugin

var navLabel = new Array('Introduction', 'How It Works', "What's Included?", 'Documentation',…

标签: PageScroller, jquery滚动插件, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

11个灵活可定制的jQuery内容幻灯插件

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

jQuery的图片幻灯实现很多,可能有几百个。如果你有兴趣,可以阅读我们相关文章

这里我们将介绍内容幻灯,和图片幻灯不同,内容幻灯除了图片以外可以展示更多的内容,比如,HTML,内容,视频等等。这里我们挑选了11个不错的jQuery内容幻灯插件,有些在我们以前的插件介绍中也有过介绍,希望大家喜欢!

Orbit

Zurb可能对于大家来说并不陌生,他们使用CSS3创建了很多的相当酷的东西和web体验。这次他们创建了jQuery图片幻灯,可以同时支持图片和内容。而且将它整合到了他们的框架 Foundation中。虽然目前他们不支持这个幻灯了,但是依旧很出色。

Zurb Image Slider

Slidorion

一个图片幻灯和手风琴效果的整合。支持大量的特效,传统幻灯外的一个很不错的选择。

11个灵活可定制的jQuery内容幻灯插件

Slides JS

基于简单实现的jQuery插件。拥有很多有用的特性,例如创建友好的幻灯展示。

11个灵活可定制的jQuery内容幻灯插件

标签: 幻灯, jquery幻灯, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

CSS3属性的快速说明信息图

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

今天分享一张CSS3主要属性的信息图,帮助大家更好的理解和记忆CSS3的关键属性,相信大家一定喜欢!

CSS3属性的快速说明信息图

来源: CSS3属性的快速说明信息图

标签: CSS3属性, CSS3信息图, css3 infographic, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

使用绘图类库flotr2来绘制HTML5的图形和图表

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

使用绘图类库flotr2来绘制HTML5的图形和图表

在线演示  本地下载

今天介绍一个款不错的HTML5绘图和制表类库-flotr2。 它可以有效地帮助你绘制基于HTML5的图表和图形,包括线图,柱状图,饼图,气泡图等等,对于浏览器的兼容性也非常不错。

flotr2主要特性

  • 移动支持
  • 独立框架
  • 可扩展的插件框架
  • 自定义的图表类型
  • FF, Chrome, IE6+, Android, iOS
  • 线装图
  • 柱状图
  • 烛柱图
  • 饼图
  • 气泡图

HTML

<div id="container" class="container"></div>
<div class="controls">
<h3>Function:</h3>
<p>

标签: flotr2, 图表类库, html5图表类库, 绘图类库, HTML/HTML5, CSS/CSS3, JS, jQuery, jQuery UI, jQuery Mobile, jQuery插件, UI, 图标, 模板

阅读更多

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, 图标, 模板

阅读更多

下一页

喜欢我们的文章请您与朋友分享:

?ü?à

今日推荐