劉振強(qiáng)

(廊坊職業(yè)技術(shù)學(xué)院，河北 廊坊 065001)

0 引言

網(wǎng)站頁面的布局類似于雜志的排版，是通過在有限的頁面空間中將文字、圖形、流媒體等元素根據(jù)特定的需求進(jìn)行組合。Ethan Marcotte于2010年提出了響應(yīng)式布局的概念，其中3個設(shè)計宗旨分別是流動式柵格布局、靈活的多媒體元素及媒體查詢[1]。響應(yīng)式布局能讓網(wǎng)站頁面在多種設(shè)備屏幕尺寸上進(jìn)行完好的呈現(xiàn)。現(xiàn)今有很多的響應(yīng)式布局UI框架可供選擇，F(xiàn)oundation框架即是其中使用較多的一個。本研究將對Foundation框架下網(wǎng)站頁面柵格布局進(jìn)行梳理分析。

1 Foundation框架簡介

Foundation是集HTML，CSS和JavaScript為一體用于開發(fā)響應(yīng)式布局的前端UI框架，提供了如導(dǎo)航、表單、按鈕等UI組件，可以幫助前端設(shè)計開發(fā)人員進(jìn)行快速的原型或生產(chǎn)產(chǎn)品開發(fā)[2]。

2 Foundation開發(fā)環(huán)境的設(shè)置及工程結(jié)構(gòu)簡介

Foundation開發(fā)環(huán)境的安裝有多種方法，在此使用最常用的NPM進(jìn)行安裝。NPM是NodeJS包的管理工具，為此，應(yīng)先下載NodeJS進(jìn)行安裝，NodeJS安裝結(jié)束后可使用npm install-global foundation-cli命令進(jìn)行全局安裝Foundation CLI。Foundation CLI安裝完成后鍵入foundation new命令進(jìn)行模板工程的創(chuàng)建。通過對相應(yīng)問題的回答Foundation CLI將幫助建立一個Foundation工程。進(jìn)入工程目錄后鍵入foundation watch命令來偵聽SCSS文件的變化以便隨時生成對應(yīng)的CSS文件；在瀏覽器地址欄中鍵入http：//localhost：3000可對初始工程進(jìn)行查看。工程中的node_modules/foundation-sites/scss目錄中存有以功能進(jìn)行細(xì)分的“components即組件”“forms即表單”及“grid即柵格”等目錄，與其相關(guān)聯(lián)的js代碼存在于node_modules/foundation-sites/js目錄中。當(dāng)工程開發(fā)結(jié)束后鍵入foundationw build命令進(jìn)行編譯，編譯后的文件存在于dist目錄中。

3 Foundation柵格布局設(shè)計方法

Foundation在V6.4版后使用了新的XY Grid柵格布局。XY Grid柵格布局的工作方式與之前的Float Grid布局非常相似，但也包含很多僅Flex Grid布局可使用的方法，如自動調(diào)整大小、垂直柵格布局等，可以說XY Grid柵格的啟用是Foundation布局的一次巨大飛躍。為此本研究僅討論XY Grid柵格布局的設(shè)計方法[3]。

當(dāng)對塊級元素設(shè)置.grid-container類后將產(chǎn)生一個柵格容器如圖1中block1-1所示。容器的寬度默認(rèn)為1200像素，也可以通過修改_settings.scss文件中的$grid-container變量進(jìn)行設(shè)置。如需要容器的寬度充滿全部寬度時可添加.full類。

圖1 large狀態(tài)

Foundation默認(rèn)使用12列柵格并支持柵格的嵌套，對塊級元素設(shè)置.grid-x類可建立橫向柵格布局的水平塊。設(shè)置.cell類并添加.small-#、.medium-#或.large-#類來設(shè)置在不同媒體上顯示的列寬。其斷點(diǎn)分別為640px、1024px，通過修改_settings.scss文件中$breakpoints變量可進(jìn)行自定義斷點(diǎn)設(shè)置。本例中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狀態(tài)下平均分布在一行里如圖一中所示，而在small狀態(tài)下block2-1、block2-2占用一行且比例為3∶9，block2-3單獨(dú)占用一行如圖2所示。另外在block2-2中進(jìn)行了柵格嵌套。

圖2 small狀態(tài)

當(dāng)對塊級元素進(jìn)行平均分配列寬時可采用兩種方法。一是為各塊級元素添加.[size]-auto類如圖一中block3-1等元素均添加了.large-auto類；二是在需平分列寬元素的父元素上添加.[size]-up-[n]類，其中n表示列數(shù)，圖1中在block4-1等的父元素上添加了.large-up-2類，以使其列寬相等。添加.[size]-auto類能方便地產(chǎn)生塊級元素自適應(yīng)寬度的效果，如圖2中block5-2的代碼是這樣的：。當(dāng)塊級元素中含有文字并也需要其呈現(xiàn)出自適應(yīng)寬度的效果時添加.shrink類到此塊級元素中，如圖2中的block6-1的代碼如下：。

使用.[size]-offset-#可以方便地設(shè)置列的偏移量，例如對block7-2塊級元素設(shè)置了.large-offset-8和.small-offset-4類，使得block7-2在large狀態(tài)下向右偏移8列，在small狀態(tài)下向右偏移4列。在此要說明的是偏移量的值與本行中塊級元素的列寬值之和應(yīng)為12。對于列的內(nèi)外邊距通過添加.grid-margin-x和.grid-padding-x類至需添加邊距的塊級元素的父元素上是很方便的一種應(yīng)用。圖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中的值進(jìn)行自定義修改。如需列的內(nèi)外邊距在不同顯示狀態(tài)下或出現(xiàn)或隱藏，可以在其父元素上添加.[size]-[gutter-type]-collapse類，如block10-1的父元素上添加了.large-margin-collapse類通過圖1、圖2中block10-1邊距的對比可以看出在large狀態(tài)下block10-1的外邊距被隱藏，但在small狀態(tài)下block10-1的外邊距被顯示出來。

XY Grid也同時支持縱向柵格布局的垂直塊。添加.grid-y類至塊級元素便可建立縱向柵格布局，這里指出要使垂直塊正常顯示應(yīng)進(jìn)行塊的高度設(shè)置。如圖1、圖2中的block11-1、block11-2的代碼是這樣的：

4 結(jié)語

通過對Foundation框架下柵格布局的分析，可以發(fā)現(xiàn)Foundation簡化了網(wǎng)站頁面在多種設(shè)備屏幕尺寸下界面的創(chuàng)建，其基于XY Grid布局是一個易用且靈活的柵格系統(tǒng)。