Foundation框架 - 快速创建跨平台的网站页面原型

2011-12-13 13:55 稿源:beforweb  0条评论

门见山的说,作为网页设计和开发人员,我们面临着以下几个严峻的问题:

每天,人们用来上网的设备种类和数量都在不断上升。

为每种设备设计开发不同的界面是不可能的。

即使你专门为某些设备定制打造,这些设备也很有可能在不久的将来退出主流舞台。

真心欢乐。别怕,大家一起面对并解决问题。其实,不同类型的设备及屏幕的这个问题,很早以前就开始存在了,只是多年来我们一直忽视这个状况,一厢情愿的守着960像素的网格系统。

如今,我们需要从设计流程的上游改变长久以来的习惯,比如尝试快速创建可以在不同设备上进行测试的原型,而不只是针对台式机浏览器或笔记本。

Foundation是一款开源的前端框架,我们可以使用它快速创建页面原型。相比于其他同类型工具,Foundation的移动化方案更加出色;借鉴响应式Web设计的思路和方法,Foundation对内容结构在不同类型设备中的的呈现方式进行了相应的预设。

接下来,我们将通过一个完整的实例,来演示怎样使用Foundation快速创建跨平台的页面原型。走着!

资源概览

首先到foundation.zurb.com下载代码包;果断点击大蓝按钮即可。代码包中包含以下文件及结构:

1、index.html - 我们将从这里开始创建第一个页面。

2、javascripts和stylesheets路径 - 主要的静态资源文件,包括jQuery及所需的样式表。

3、humans.txt和robots.txt - 里面的代码算是不错的样板,有空的时候可以溜几眼。

4、JS方面的东西基本不在本文讨论范围,我们继续来看看stylesheets路径中的文件:

1、global.css - 全局基础样式表,包括相对常规的12列固定宽度的网格系统、快速创建复杂布局的可嵌套工具等。另外还有其他全局字体、布局等方面的样式定义。

2、ui.css - 用来对那些组成原型的常规UI元素进行样式定义。

3、mobile.css - 负责移动设备方面的样式,涉及响应式的样式定义都在这里。

分别在浏览器和代码编辑器中打开index.html文件。在浏览器中,我们可以看到该页面包含了一些用于构筑原型的基础布局结构及UI元素。

接下来,我们将从网格系统、快速创建原型、移动化这三个方面依次进行实例讲解。

网格系统

首先来简单看看global.css中的网格系统。如果你熟悉960网格系统或是Blueprint CSS框架,那么对Foundation的网格结构也应该不会陌生。下面是一段典型的结构代:

该结构由三部分组成:外层容器container、行容器row和列容器columns。外层容器的作用只是为页面添加左右内边距(padding)。

行容器拥有一个固定的最大宽度值,防止页面在大显示器中过宽;当然,如果你想打造纯粹的液态布局,也可以在样式表中去掉这个属性。

列容器是最内层的内容容器,在我们的网格系统中,每行最多可以放置12个列容器。上面的代码中,我们创建的是典型的“内容+侧边栏”布局,宽度分别为全宽的2/3和1/3。

网格布局可以进行嵌套:

Foundation官网中有一些布局范例可以参考。

有好的文章希望站长之家帮助分享推广,猛戳这里我要投稿

相关文章

相关热点

查看更多