首页风格
门户
博客

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

HTML5的仿本地应用移动端UI互动开发框架 – Ionic

Native App Development With HTML5 - Ionic

本地移动应用往往速度更快,更流畅并且拥有更好的用户体验,作为web开发设计人员来说,寻找新的方式和技术来实现类似的效果和UI是我们的重要的责任。

Ionic,是一个前端的框架,帮助你快速的使用HTML5,CSS3,Javascript创建本地效果的移动应用。

使用Ionic不是为了取代PhoneGap或者JS框架,它主要是帮助开发人员创建UI界面和互动。

这个框架使用SASSS和AnguarJS扩展,并且包含其它的组件,例如,按钮,切换,页头/页脚,tab栏及其其它。

拥有完整的文档,包含了完整的教程和例子 ,大家可以方便的了解和学习

网站地址: http://ionicframework.com/
下载地址: https://github.com/driftyco/ionic/

标签: ionic, 前端框架, frameworks, HTML5

阅读更多

Backbone.js系列教程二:Backbone.js深入解析之基础要求

Backbone.js系列教程二:Backbone.js深入解析之基础要求

在网上关于Backbone的描述很少,现有的关于Backbone的内容五花八门,基本上都不同程度的提到了如何运用Backbone来实现应用程序的创建,当然也有很多的是讨论它是否匹配 Model/View/Whatever。有挺多华而不实的视频教程是讲程序设计的,但其实没有什么太大的价值。我认为关键是缺少了关于Backbone本身的详细介绍,以及对于每行代码的真正用意的细节描述。有篇文档专门讲述 Backbone各部分的功能,在一定程度上解答了上述问题,并且提供带有注释的源代码,还有更多相关Backbone.js的内容介绍。这些虽然远远不够,但最起码,能换个角度带大家了解Backbone的组成部分与功能。

在这套Backbone.js解构系列教程中,我们将从代码层面验证Backbone库的功能。

相关阅读: Backbone.js系列一 - Backbone.js初探

具体而言,在这套教程的前一部分中我们将探讨学习Backbone的基础,介绍单页面应用程序(SPAs)所需一些关键的细节,以便能更好的掌握Backbone的组成与用途。在对SPAs有一定基础之后,我们将系统深入到Backbone代码部分各个细节,包括Backbone.Events、创建Backbone对象、Backbone.Router()Backbone.History()Backbone…

标签: backbones.js, html, javascript, 前端框架

阅读更多

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

阅读更多

基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine

基于javascript和canvas(画布)的开源HTML5应用开发框架 - iio Engine

随着HTML5的发展,越来越多的基于HTML5技术的网页开发框架出现,在今天的这篇文章中,我们将介绍iio Engine,它是一款开源的创建HTML5应用的web框架。

整个框架非常的轻量级,只有45kb大小,并且整合了debug系统,并且跨平台支持。

不依赖任何第三方的类库,可以支持Box2D,拥有完整的文档支持。支持快速的开发。

使用这个类库你只需要使用10多行的代码就生成一个tic-tac的游戏,代码如下:

    TicTacToe = function(io){

var grid = io.addObj(new iio.ioGrid(0,0,3,3,120)
.setStrokeStyle('white'));
var xTurn=true;
io.canvas.addEventListener('mousedown', function(event){
var c = grid.getCellAt(io.getEventPosition(event),true);

标签: 分享, HTML5, 前端框架, canvas

阅读更多

帮助你更快的进行网站设计 - 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, 前端框架

阅读更多

使用前端框架Foundation 4来帮助简化响应式设计开发

使用前端框架Foundation 4来帮助简化响应式设计开发

Foundation是一套使用广泛的前端开发套件,可以帮助你快速的网站。最近ZURB发布了一个新版本的Foundation 4前端框架,能够有效的帮助你快速的开发响应式的网站。

使用前端框架Foundation 4来帮助简化响应式设计开发

和另外一个套知名的前端框架BootStrap类似,Foundation同样也提供了一套HTML/CSS的模板,可以帮助你快速的搭建网站基础,包括:布局,组件,字体,表单元素和其它常用的页面元素。

使用Foundation有三种途径,包括:

  • 直接下载压缩版本的CSS,自定义使用自己需要的部分
  • 自定义编译来生成你需要的元素
  • 使用SASS版本的Foundation来自定义代码

Foundation4 最强大的地方在于有效地整合了SASS,你可以使用SASS中的Mixins概念来简化开发。使得组件的使用更加的简单和便捷。

注意新的移动实现方式并不支持media queries,所以有可能影响IE8上的体验。如果你需要支持IE8,这里有一个修改版本的Foundation…

标签: 前端框架, foundation前端框架, foundation4, 响应式

阅读更多

响应式的前端框架 - Groundwork

响应式的前端框架 - Groundwork

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

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

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

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

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

via gbtags

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

阅读更多

拥有大量特性的前端框架 - Maxmertkit

拥有大量特性的前端框架 - Maxmertkit

前端框架能够有效的帮助你减轻开发过程并且可以有效的提高开发效率。可能大家也使用过很多不同的前端框架,例如,bootstrap或者foundation,其它的框架例如HTML kickstart,还有profoundworklessRezueHTML5 junior等等前端框架。

今天介绍的Maxmertkit是一个全新的前端框架,拥有类似boostrap的UI但是提供了不同的组件内容。

这个框架使用SASS来处理CSS部分包括所有主要的网格,排版字体,表格,表单,按钮和列表等等。

拥有丰富的"widget",包括了,按钮,标签,元素分组,徽章,下拉,工具提示和菜单等等

拥有非常实用的javascript组件,例如,提示,轮播,按钮,悬浮层等等。

和Bootstrap在某些部分上很类似,但也有区别,例如,使用字体图标 Awasone和Zocial。

拥有完整的文档,并且包含了大量的例子,并且提供了拖拽生成代码的功能。

标签: 前端框架, maxmertkit, gbtags

阅读更多

现在就开始使用AngularJS的三个重要原因

现在就开始使用AngularJS的三个重要原因

在线演示

如果你不熟悉什么是Angular.js的话,小编我强烈推荐你阅读 Javascript教程:AngularJS的五个超酷特性。简单来说Angular.js是google开发者设计和开发的一套前端开发框架,帮助你简化前端开发的负担。当然,这里有很多其它的前端开发框架,但是如何选择合适的前端框架对于我们这些开发人员来说就不是那么容易了!在今天的这篇文章中,我们将介绍三个你应该使用Angular.js的重要原因,希望大家觉得有帮助!

原因一:Google开发的框架

要知道开源界的很多框架都是开发人员由于个人兴趣或者激情而开发出来的,比如,Cappucino 还有 Knockout。而angularJS是由互联网巨人Google组织开发的。这意味这你有更加强大的社区支持。谁都不希望第一天开始使用一个框架,第二天发现这个框架已经被遗弃了吧!

其实这不是Google第一次尝试开发javascript的前端框架,大家可能还记得Web…

标签: gbin1, gbtags, javascript, 前端框架, angularjs

阅读更多

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

?ü?à

今日推荐