Foundation框架下网站页面栅格布局的研究

刘振强

(廊坊职业技术学院，河北 廊坊 065001)

0 引言

网站页面的布局类似于杂志的排版，是通过在有限的页面空间中将文字、图形、流媒体等元素根据特定的需求进行组合。Ethan Marcotte于2010年提出了响应式布局的概念，其中3个设计宗旨分别是流动式栅格布局、灵活的多媒体元素及媒体查询[1]。响应式布局能让网站页面在多种设备屏幕尺寸上进行完好的呈现。现今有很多的响应式布局UI框架可供选择，Foundation框架即是其中使用较多的一个。本研究将对Foundation框架下网站页面栅格布局进行梳理分析。

1 Foundation框架简介

Foundation是集HTML，CSS和JavaScript为一体用于开发响应式布局的前端UI框架，提供了如导航、表单、按钮等UI组件，可以帮助前端设计开发人员进行快速的原型或生产产品开发[2]。

2 Foundation开发环境的设置及工程结构简介

Foundation开发环境的安装有多种方法，在此使用最常用的NPM进行安装。NPM是NodeJS包的管理工具，为此，应先下载NodeJS进行安装，NodeJS安装结束后可使用npm install-global foundation-cli命令进行全局安装Foundation CLI。Foundation CLI安装完成后键入foundation new命令进行模板工程的创建。通过对相应问题的回答Foundation CLI将帮助建立一个Foundation工程。进入工程目录后键入foundation watch命令来侦听SCSS文件的变化以便随时生成对应的CSS文件；在浏览器地址栏中键入http：//localhost：3000可对初始工程进行查看。工程中的node_modules/foundation-sites/scss目录中存有以功能进行细分的“components即组件”“forms即表单”及“grid即栅格”等目录，与其相关联的js代码存在于node_modules/foundation-sites/js目录中。当工程开发结束后键入foundationw build命令进行编译，编译后的文件存在于dist目录中。

3 Foundation栅格布局设计方法

Foundation在V6.4版后使用了新的XY Grid栅格布局。XY Grid栅格布局的工作方式与之前的Float Grid布局非常相似，但也包含很多仅Flex Grid布局可使用的方法，如自动调整大小、垂直栅格布局等，可以说XY Grid栅格的启用是Foundation布局的一次巨大飞跃。为此本研究仅讨论XY Grid栅格布局的设计方法[3]。

当对块级元素设置.grid-container类后将产生一个栅格容器如图1中block1-1所示。容器的宽度默认为1200像素，也可以通过修改_settings.scss文件中的$grid-container变量进行设置。如需要容器的宽度充满全部宽度时可添加.full类。

图1 large状态

Foundation默认使用12列栅格并支持栅格的嵌套，对块级元素设置.grid-x类可建立横向栅格布局的水平块。设置.cell类并添加.small-#、.medium-#或.large-#类来设置在不同媒体上显示的列宽。其断点分别为640px、1024px，通过修改_settings.scss文件中$breakpoints变量可进行自定义断点设置。本例中block2-1添加了.small-3、.large-4类；block2-2添加了.small-9、.large-4类；block2-3添加了.small-12、.large-4类。这使得block2-1、block2-2、block2-3在large状态下平均分布在一行里如图一中所示，而在small状态下block2-1、block2-2占用一行且比例为3∶9，block2-3单独占用一行如图2所示。另外在block2-2中进行了栅格嵌套。

图2 small状态

当对块级元素进行平均分配列宽时可采用两种方法。一是为各块级元素添加.[size]-auto类如图一中block3-1等元素均添加了.large-auto类；二是在需平分列宽元素的父元素上添加.[size]-up-[n]类，其中n表示列数，图1中在block4-1等的父元素上添加了.large-up-2类，以使其列宽相等。添加.[size]-auto类能方便地产生块级元素自适应宽度的效果，如图2中block5-2的代码是这样的：。当块级元素中含有文字并也需要其呈现出自适应宽度的效果时添加.shrink类到此块级元素中，如图2中的block6-1的代码如下：。

使用.[size]-offset-#可以方便地设置列的偏移量，例如对block7-2块级元素设置了.large-offset-8和.small-offset-4类，使得block7-2在large状态下向右偏移8列，在small状态下向右偏移4列。在此要说明的是偏移量的值与本行中块级元素的列宽值之和应为12。对于列的内外边距通过添加.grid-margin-x和.grid-padding-x类至需添加边距的块级元素的父元素上是很方便的一种应用。图1中的block8-1的父元素上添加了.grid-margin-x类，block9-1的父元素上同时添加了.grid-margin-x和.grid-padding-x类。编辑_settings.scss文件中的$grid-margin-gutters变量可对.grid-margin-x和.grid-padding-x中的值进行自定义修改。如需列的内外边距在不同显示状态下或出现或隐藏，可以在其父元素上添加.[size]-[gutter-type]-collapse类，如block10-1的父元素上添加了.large-margin-collapse类通过图1、图2中block10-1边距的对比可以看出在large状态下block10-1的外边距被隐藏，但在small状态下block10-1的外边距被显示出来。

XY Grid也同时支持纵向栅格布局的垂直块。添加.grid-y类至块级元素便可建立纵向栅格布局，这里指出要使垂直块正常显示应进行块的高度设置。如图1、图2中的block11-1、block11-2的代码是这样的：

。

4 结语

通过对Foundation框架下栅格布局的分析，可以发现Foundation简化了网站页面在多种设备屏幕尺寸下界面的创建，其基于XY Grid布局是一个易用且灵活的栅格系统。