HINA :: 工程幼稚園

 PLURK: http://www.plurk.com/p/3mf2mt

其實在許久之前，我有寫過一篇關於 Blueprint CSS 的介紹了，但是我覺得還是有些地方稍嫌不足。特別是今天為了要找一些東西，又繼續看了 Bblueprint CSS，覺得上次那一篇時在是寫的不夠，所以就來補充一下。

特別提一下這個，Blueprint CSS How To Customizing Typography Baselines，他是介紹怎麼樣修改在 Blueprint CSS 中的 Typography  基準，請務必要看看。

首先還是回到 Grid 這個設定上面，你可以從 src 裡面看到這個檔案的基本設置：

   grid.css
   * Sets up an easy-to-use grid of 24 columns.

   By default, the grid is 950px wide, with 24 columns
   spanning 30px, and a 10px margin between columns.

基本的寬度就是 950px，共有 24 欄，每個欄寬 30px，每個欄位間隔 10px 的留白（使用 margin-right）。倘若你要增加或是減少這個預設的寬度，需要自己去執行 lib/compress.rb 這個程序（使用 Ruby）。我們假設都以這種寬度來開發，暫時不考慮重新製作新的 Grid 為前提。

首先，你確認好自己的 Layout 之後，就可以開始利用 Grid 來編排 Layout 中所有元件的位置。這裡需要提醒一下的是，這個 Grid 他是依照預設的欄寬去做編排的，所以若你的 Layout 不符合欄位寬度的設置，就必須小心處理這個部分。雖然他只是個 Grid，但是做為參考的標準，規則還是不要太輕易的打破比較好。

假設我們要做兩欄式的網站，那麼我們就有左邊（或右邊）跟中間兩個欄位。那左（或右）的欄位寬度可以這樣計算，這裡我們以左邊欄位跟中間欄位的例子來說：

5 * 40 - 10 = 210px（Grid 範圍）
5 * 40 = 200px（內容範圍）

我要 5 個欄位（30 * 5 + 10 * 6）來當做左邊（或右邊）的欄位，那剩下的就是中間的區塊：

19 * 40 - 10 = 750px

要留意的是，左邊的欄位會多出 10px 的留白，是無法被使用的區塊，真正能使用到的範圍其實只有 200px 而以。當然，你的欄位切割的越多，可以使用的區塊相對的就會越少，因為每切割一次就會少 10px。



問題來了，萬一我的 Layout 沒那麼剛好符合 Grid 怎麼辦？

有兩種解決方法：

1. 計算出欄位與留白，重新產生 Grid.css！
2. 犧牲 1 欄！
   

第一種解法是比較正規的做法，利用 Blueprint CSS 自帶的程序來重新產生新的樣式檔案，好處是他會重新製做整套 grid，甚至是做成你需要的 grid 檔案，所產生出來問題比較不會那麼多，也不會發生奇怪的問題。缺點是數學要很好，如果你的 Layout 剛好可以整除，那恭喜你，如果不行，那就想辦法讓他整除（沒有誤）。

如果嫌自己算太累，那麼這個網站應該可以幫你一些忙（他還幫你做好 grid.css），但是請留意 Blurprint CSS 的版本，因為他所算出的 grid.css 版本未必會是最新喔！

第二種方式，我不建議 CSS 生手來做這件事情，不過話又說回來，有能力使用 Blueprint CSS 這種 Framework 的應該不能算是生手了吧（認真）。其實這個方法是我自己硬幹想出來的，萬一手頭上的 Layout 我草泥馬的複雜，很難處理的話，以上述運算為例，倘若一樣是切兩個欄位，但是我的尺寸是：左 220px 右 720px 的話呢？

( 220 + 720 ) / 20 = 47（可以切成 47 欄，各寬 20px 的欄目，倒過來也可）
47 是質數，所以 20 已經是最大因數，最大切割為 20 欄，每欄 47px！
但上利須採用左 11 欄，右 36 欄來處理，也可直接重新產生 Grid.css。

所為的犧牲 1 欄的意思，就是一樣採用原有設置，但是在尺寸誤差的地方，將靠近接合的那個欄位犧牲掉，也就是說，利用 Blueprint 中的 pull 與 push 來做這件事情！但我還是得說，必須要是 CSS 熟手，不然那個 Layout 可能就因為這樣 pull & push 被推到地獄裡去了！

兩欄目的方式處理起來比較簡單，左邊欄目依舊使用 Grid 的 5 欄目設定，另外再套入自訂義的 Styling 改變寬度，右欄目亦同！差別在於，我可以在右欄目寫入 PUSH，讓他推齊右邊界，這樣在接合處或許會與原本的 Grid 不相符，但是目的一樣達到了。只是我們把 Grid 的方式拿到了左、右邊界去使用！而不是由左至右的對齊。

相對於較複雜的 Layout，其實最主要的精神是，你要以哪個地方當做基準，然後再去實作。畢竟，在我看來 Grid 是一種工具，也是一種精神，他可以無所不在，只要你知道你自己的基準在甚麼地方。其實這個東西並不難，也不複雜，他就只是很單純的一個 CSS 設定而已，就像是畫滿方格的草稿紙一樣，要填甚麼上去，還端看客官您啊！

人人 Layout 都有一把尺，請當寶劍用！

創用 CC 授權

本創作適用 姓名標示-非商業性-禁止改作 3.0 創用 CC 授權，台灣並依循所適用的授權條款。