Fundation 5发布:号称最快版本,响应式用户体验更完善

原创 2013年12月03日 12:00:17

Foundation,作为一款优秀的响应式前端框架,可帮助开发者快速构建原型及搭建跨平台的网站及应用。其强大的功能,可嵌套的12列响应式网格布局,使Foundation成为Github中最棒的20个明星级别项目之一。

近日,Zurb发布了Fundation 5,号称Fundation的最快版本,编码更快、学习更快、构建的Web应用访问速度更快。这是继Fundation 4的又一重要版本发布。


最新版本在Foundation 4基础上做出众多改进。Fundation 4利用媒体查询(Media Query)可根据用户不同的浏览器,响应式加载不同尺寸的图片。Fundation 5中,该响应式方案不再只适用于图片,而是进一步扩展至HTML中的任何一个元素。开发者可在标记容器(比如div)中使用“data-interchange”属性,通过判断设备的类型,选择组件合适的显示方式。

下面代码将根据不同的设备类型显示不同样式的地图。如果是智能手机,就加载小尺寸静态的地图;如果是中等大小尺寸的设备,就显示稍大尺寸的静态地图;若是大型显示设备,则显示完整的交互式Google地图。

<div data-interchange="[../examples/interchange/default.html, (small)], [../examples/interchange/medium.html, (medium)], [../examples/interchange/large.html, (large)]">
  <div data-alert class="alert-box secondary radius">
    This is the default content.
    <a href="#" class="close">&times;</a>
  </div>
</div>

Fundation 5另一大改进是新增了Off Canvas强大功能,可用来构建Off Canvas类型的导航菜单。该类型的菜单通常放置在视图窗口之外,被激活后才会滑动显示在视图中。借助Off Canvas,在Fundation中构建此类型导航菜单将十分简单。

下面代码展示了如何构建一个基本的、无样式的Off Canvas类型导航菜单。过程简单,仅使用了几行代码。 

<div class="off-canvas-wrap">
  <div class="inner-wrap">
    <a class="left-off-canvas-toggle" >Menu</a> 
    <!-- Off Canvas Menu -->
    <aside class="left-off-canvas-menu">
        <!-- whatever you want goes here -->
        <ul>
          <li><a href="#">Item 1</a></li>
          <li><a href="#">Item 2</a></li>
          <li><a href="#">Item 2</a></li><li>
<a href="#">Item 2</a></li><br>        </ul>
    </aside>
    <!-- main content goes here -->
    <p>Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire. Hari Seldon, a mathematician and psychologist, has developed psychohistory, a new field of science and psychology that equates all possibilities in large societies to mathematics, allowing for the prediction of future events.</p>
  <!-- close the off-canvas menu -->
  <a class="exit-off-canvas"></a>
  </div>
</div>

此外,应广大开发者的要求,Fundation 5新增了中等网格系统,其介于大、小网格之间,为开发者开发中间尺寸大小的网格布局节省了大量时间。默认情况下,中等网格延用了小网格的样式。当然你可利用中类网格系统,定制自己的网格布局。(文:陈秋歌 审核:张红月)

关于Fundation 5的更多特性请见:Fundation官网

下载Fundation 5: http://foundation.zurb.com/develop/download.html

Github托管地址:https://github.com/zurb/foundation

国内镜像地址:https://code.csdn.net/OS_Mirror/foundation

CSDN链接:http://www.csdn.net/article/2013-11-22/2817598-zurb-releases-foudation-5

相关文章推荐

MYPM 国产非开源免费测试管理工具软件 WEB2.0用户体验零配置安装版本发布

内容来自本人javaeye贴子在用开源的或是其他测试管理软件时,除了安装比较麻烦外,本人最不满意的一点是,需要自己去找自己要办理的BUG   BUG和CASE都不能直接插图,看起来不直观,界面不友好...

前不久,微软发布了其网络硬盘的正式版本:Windows Live Skydrive。它面向公共用户免费提供5G空间,最大单个文件支持到50M,还提供个人文件夹。微软的东西,当然会让人更放心一些,而且最重要的是它提供永久存储服务,还提供超链接!

对于个人用户而言,网络存储早在数年前就不是陌生概念了。但在“云存储”时代,个人存储将不仅仅局限于传统的照片、音乐文件等,更高级的应用如邮件归档、数据恢复、个人信息共享等,都将挑战传统的存储模式。微软的...

HTML5如何重塑O2O用户体验

低频次垂直O2O服务应该继续开发原生APP吗? 大家有没有发现做一个APP的推广成本和获取用户的成本越来越高?第二,用户安装APP之后,用户并不是经常点击使用APP的,那这是为什么?数据表明90%的O...

使用HTML5,CSS3和jQuery来增强网站的用户体验和使用乐趣

日期:2011/11/16  来源:GBin1.com 记得几年前如果你需要添加一些互动元素到你的网站中用来改善用户体验? 是不是立刻就想到了flash实现?这彷佛年代久远的事了。使用现在最流...
  • jjfat
  • jjfat
  • 2011年11月16日 20:27
  • 721

用户体验设计5大目标

我们常说产品的用户体验设计很重要,但究竟怎样才算好的用户体验呢?以下5大UX设计目标层层递进,帮你在最短的时间内明确用户体验设计方向,成为一名合格的UX设计师。 UX设计师掌握的主要...
  • jongde1
  • jongde1
  • 2017年05月17日 15:47
  • 260

如何创造出更优秀的用户体验?

对于互联网公司来说,用户体验起到至关重要的作用,能否给用户留下深刻的印象;开发出的产品是否实用、易用?等等这些都是开发者必将思考的话题。当有用性一样的时候,大家的竞争重点就是易用性了,这就是互联网产品...

提升用户体验:HTML5 拖放文件上传

来源:http://sofish.de/1545 话说,还是有不少项目里提供让用户上传东西的。小到一个 wordpress 博客,大到一个文件存储网站。为了更好的用户体验。来学习两个新知识吧...

H5游戏的开发特性及用户体验

都说H5游戏是新一代的营销利器,受到了众多商家和用户的追捧,而且为了做好与微信的结合,H5游戏在很多方面都做了一些改进,这些改进都非常有利于用户体验,使其在游戏市场中具备了极高的优势。今天,我们就来分...

BAT三家互联网公司哪家更注重用户体验?

这几天百度的用户体验又成了设计圈关注的对象,李彦宏好不容易刷出来的好感度一下子被打入了冰点,通过此次事件,不难看出现在的互联网用户对于产品的体验要求越来越高,作为一名美图秀秀级别选手,很难领悟“好设计...
  • proginn
  • proginn
  • 2016年07月06日 16:32
  • 269

网站建设不仅要考虑美观更需要兼顾用户体验。

互联网的病毒式光速发展,改变的不仅仅是每个人消费者习惯,更多的是每个人对于互联网这块大蛋糕的利益分割。十年前,一个企业在制作一个网站的时候,他们所考虑的可能仅仅是让这个网站做得漂亮些,能将公司更多的一...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Fundation 5发布:号称最快版本,响应式用户体验更完善
举报原因:
原因补充:

(最多只允许输入30个字)