Foundation框架 - 快速创建跨平台的网站页面原型
整个一周都在揪心的猫事中度过。从十月底到现在的这段日子里,倒是越发懂得珍惜每天中片刻的宁静时光。有时会怀疑家里是否有时空漩涡一类的东西,不然钟表怎么会走的那么快,一点儿也不愿停下等等我的样子。一切都会好起来。
独白终了,进入正题。最近两篇译文都有涉及框架和跨平台方面的话题:前一篇中,我们了解了一些用于移动应用开发的前端框架工具;今天这篇的立足点偏向设计开发流程的上游,它将向我们展示怎样使用Foundation框架快速创建跨平台的、可以在多种设备上进行测试的响应式页面原型。下面开始正文部分。
开门见山的说,作为网页设计和开发人员,我们面临着以下几个严峻的问题:
- 每天,人们用来上网的设备种类和数量都在不断上升。
- 为每种设备设计开发不同的界面是不可能的。
- 即使你专门为某些设备定制打造,这些设备也很有可能在不久的将来退出主流舞台。
真心欢乐。别怕,大家一起面对并解决问题。其实,不同类型的设备及屏幕的这个问题,很早以前就开始存在了,只是多年来我们一直忽视这个状况,一厢情愿的守着960像素的网格系统。
如今,我们需要从设计流程的上游改变长久以来的习惯,比如尝试快速创建可以在不同设备上进行测试的原型,而不只是针对台式机浏览器或笔记本。这就是我们(英文原文作者的团队)开发Foundation框架的原因。
Foundation是一款开源的前端框架,我们可以使用它快速创建页面原型。相比于其他同类型工具,Foundation的移动化方案更加出色;借鉴响应式Web设计的思路和方法,Foundation对内容结构在不同类型设备中的的呈现方式进行了相应的预设。(关于响应式Web设计,可以参考我们之前的几篇文章,包括响应式设计的概念、组成要素及基本实现思路,怎样通过CSS3 Media Query实现响应式Web设计,以及相关的产品需求和设计流程案例学习)
接下来,我们将通过一个完整的实例,来演示怎样使用Foundation快速创建跨平台的页面原型。走着!
资源概览
首先到foundation.zurb.com下载代码包;果断点击大蓝按钮即可。代码包中包含以下文件及结构:
- index.html - 我们将从这里开始创建第一个页面。
- javascripts和stylesheets路径 - 主要的静态资源文件,包括jQuery及所需的样式表。
- humans.txt和robots.txt - 里面的代码算是不错的样板,有空的时候可以溜几眼。
JS方面的东西基本不在本文讨论范围,我们继续来看看stylesheets路径中的文件:
- global.css - 全局基础样式表,包括相对常规的12列固定宽度的网格系统、快速创建复杂布局的可嵌套工具等。另外还有其他全局字体、布局等方面的样式定义。
- ui.css - 用来对那些组成原型的常规UI元素进行样式定义。
- mobile.css - 负责移动设备方面的样式,涉及响应式的样式定义都在这里。
分别在浏览器和代码编辑器中打开index.html文件。在浏览器中,我们可以看到该页面包含了一些用于构筑原型的基础布局结构及UI元素。
接下来,我们将从网格系统、快速创建原型、移动化这三个方面依次进行实例讲解。
网格系统
首先来简单看看global.css中的网格系统。如果你熟悉960网格系统或是Blueprint CSS框架,那么对Foundation的网格结构也应该不会陌生。下面是一段典型的结构代码:
<div class="container"> <div class="row"> <div class="eight columns" id="mainContent"> ... </div> <div class="four columns" id="sidebarContent"> ... </div> </div> </div>
该结构由三部分组成:外层容器container、行容器row和列容器columns。外层容器的作用只是为页面添加左右内边距(padding)。
行容器拥有一个固定的最大宽度值,防止页面在大显示器中过宽;当然,如果你想打造纯粹的液态布局,也可以在样式表中去掉这个属性。
列容器是最内层的内容容器,在我们的网格系统中,每行最多可以放置12个列容器。上面的代码中,我们创建的是典型的“内容+侧边栏”布局,宽度分别为全宽的2/3和1/3。
网格布局可以进行嵌套:
<div class="container"> <div class="row"> <div class="eight columns"> <div class="row"> <div class="four columns"> ... </div> <div class="four columns"> ... </div> <div class="four columns"> ... </div> </div> </div> <div class="four columns"> ... </div> </div> </div>
Foundation官网中有一些布局范例可以参考。
译文代表原作者观点。欢迎发表评论,或到译者微博进一步交流探讨。