Blueprint CSS framework - CSS 框架
[url=http://code.google.com/p/blueprintcss/]Blueprint[/url] 是一個 CSS Framework，目前的版本是 0.4。什麼是 Framework 呢? 程式開發人員應該比較清楚這個名詞的意義，但是網頁設計人員可能就比較少聽到了，通常 Framework 用在程式開發的領域時，你可以想像成是一個已經完成基礎建設的系統，你不用花太多時間在底層或枝微末節的技術，而是可以透過這個系統來專心做商業邏輯上的應用，可以降低開發門檻，提高生產效率 (理論上是這樣啦，實際上的話，要應用一個 Framework 並不像說的那麼容易)。進入正題了，Blueprint 就是類似這樣的東西，提供了一套基礎的建設，包含了格子系統、印刷排版及列印的樣式，目的當然就是希望能減少你在開發 CSS 上所花的時間。
先來看一下這個[url=http://www.blueprintcss.org/grid.html]格子狀的版面[/url]，這是一個固定寬度為 960px 的版面，比較適合 1024x768 以上的解析度。看到背景淺的的區塊了嗎? 版面一共被分為 14 個欄位，每個欄位的寬度是 50px，欄位之間有 20px 的邊界，在這個 14 個欄位的格子系統內你可以隨意設定文字區塊是在什麼位置，是靠左還是靠右；要佔幾個欄位，三個、五個、還是滿版等等，很容易做到圖文的編排。
再來是這個[url=http://www.blueprintcss.org/elements.html]印刷排版的範例[/url]，加上字體大小、行距、底色、間距、邊框等等的變化後，看起來真的有報紙或雜誌排版的感覺了，是不是真的很像一回事啊。
最後看一下這個[url=http://www.blueprintcss.org/sample.html]網站的範例[/url]，一個以 CSS 排版概念為基礎所完成的網站，14 個欄位的邊排其實還蠻多變化的，而且你不用自己花太多心思去想如何來分割，可以專心在版面的安排。
如何呢，我個人是覺得還蠻有趣的，可以看看別人如何利用 CSS 來完成版面的配置，不過稱做 Framework 是誇張了點啦，稱作是一組 (a set) CSS 版面安排工具應該比較適合。Anyway，期待更多 CSS 的玩具，CSS 應該還有更精彩的~~
[img]http://www.blueprintcss.org/img/blueprint.png[/img]
頁:
[1]