其實在許久之前,我有 寫過一篇 關於 Blueprint CSS 的介紹了,但是我覺得還是有些地方稍嫌不足。特別是今天為了要找一些東西,又繼續看了 Blueprint 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(內容範圍)