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布局是一個易用且靈活的柵格系統。