/ Web Design

[Layout] Web Design Part 0.5

中場休息時間,我們來聊一些有趣的東西。畢竟是假日,所以再繼續談一些切版的瑣碎,難免會喘不過氣來。倦怠是難免,就像是切版切久了總是會膩,會手癢想玩一些新的把戲。

像是 CSS Framework 這樣的玩具(哪裡有輕鬆啊你)。


CSS Framework

雖然名字叫做樣式表框架,但是事實上稱他們為框架是有點過而不及。簡單的說,CSS Framework 提供了我們一定的規則可以依循,依照這些規則,能夠快速的打造一些較為制式的樣式輸出。

我比較推崇 960 或是 YUI 對於 CSS Framework 的說法,叫做 Grid CSS。這種說法是比較貼切的,因為他的確提供了我們固定的規則可以依循。但是,我也說過,有些規則是用來打破的

是,這些規則適合用來打破。

其實上 Google 查詢這一類的資源,可以查到非常多。我只列出這四個是因為我都用過。實際上我也用過前兩個(Blueprint, 960 Grid CSS),在工作上實作出許多樣板。所以,我可以來告訴你這些Grid CSS有什麼利弊。

好處是:

  • 固定的命名規則
  • 固定的樣式規則
  • 漂亮的元素輸出
  • 適用多種頁面尺寸
  • 快速上手
  • 樣式無用論

Style Agnostic: 樣式無用論(是我擅自胡亂翻譯的),意思是說,你不用知道 CSS Framework 裡面的設定到底要幹麼,你只要知道怎麼用就行了。

缺點是:

  • 區塊樣式不合用時不易修改
  • 區塊樣式不合用時不易修改
  • 區塊樣式不合用時不易修改
  • 區塊樣式不合用時不易修改
  • 區塊樣式不合用時不易修改
  • 區塊樣式不合用時不易修改

我不是來亂的,我是認真的。舉一個 Blueprint 的例子來說:

<section id="main" class="span-5">
</section>
<aside id="sidebar" class="span-19 last">
</aside>

大家大概不能理解,上面到底在做什麼,我來說明一下。span-5span-19Blueprint中,是代表著使用 5, 19 欄的設定。欄位寬度是固定的,所以這樣的結果,就是使用 5 欄寬,與 19 欄寬。接著 lastBlueprint中,是代表著這個區塊不使用留白設定

問題在哪裡?

Blueprint的設定來說,span-1 單一欄位寬度預設是 30px,而留白固定是右方留白margin-right),寬度設定是 10px。所以,以剛剛的 span-5span-19 來說,我們得到的區塊就是 200px 加上 750px,總共寬度就是 950px 了。

萬一,我們的 <aside> 要的是 220px 怎麼辦?萬一,我們的 mainsidebar 之間的留白需要 15px 怎麼辦?

打破規則的問題

我們有一個可以作弊的地方,利用這種Grid CSS每一個欄位中間會有留白的特性,將我們所需要的尺寸溢出到這些空白中。當然,這是治標不致本的作法。所以這是一個很麻煩的缺點。

既定的規則可以帶來一些好處,但是,在這些規則背後被綁死的東西,其實很有可能比你想像的還多,例如樣式無用論。雖然像是Blueprint有一些計算機可以用,不過,這也就代表著你必須去對於Blueprint的結構有一定程度的理解。

這也就違背了最初的樣式無用論

Blueprint Calculator: http://bluecalc.xily.info/

自己刻,比較快

這種事情也沒個準,不想被規則束縛的話,自己從頭開始做當然是比較自由的。但是,如果每一次的專案都要從頭來過,是不是又太過於惱人了點?所以要不要用要這寫Grid CSS來當作切版的基準,就見仁見智了。

好工具,就算打破規則也是好工具。樣式無用論背後所代表的意義,其實就是基於規則,做你自己。這才是Grid CSS的最終精神。並不一定要完全拋棄,且戰且走才是上上之策。

邊開火邊移動,你遲早會贏