Blueprint[CSS框架]

Blueprint是由於 HTML是一種標準，並且所描述的是結構而非樣式，因此 Blueprint 框架是完全作為 CSS 實現的。

簡介

在設計網頁時要以 Blueprint 為指導，然後再設計或生成 HTML，以便將 Blueprint CSS 樣式套用於 HTML 元素。實際上，由於 Blueprint 提供了強大的 CSS，因此可以在 HTML中設計網頁，而不必使用圖像設計程式來模擬最終頁面，比如說 photoshop。從一定意義上說，Blueprint 提供了真正的所見即所得的（WYSIWYG）網頁設計，因為原型將使用與最終站點相同的代碼。

此外，由於 Blueprint 的主要作用是模擬列印頁的外觀，因此使用 Blueprint 進行互動式的設計的感覺更像是在使用 QuarkXPress 或 AdobeInDesign。Blueprint 樣式基於像素和一個 18 像素的基線格線。藉助設計天賦和努力，可以創建具有專業外觀的頁面。

樣式例子

Blueprint[CSS框架]

Blueprint 的默認格線是 950 像素寬，分為 24 個由 10 像素分隔線隔開的 30 像素寬的列：[(24 列 * 30 像素/列) + (23 分隔線 * 10 像素/分隔線) = 950 像素]。如果偏好或者需要更寬或更窄的格線或不同的列寬，Blueprint 提供了一個 Ruby 工具用於將 Blueprint 重新生成到需要的規範中。Ruby 工具還創建了一個格線圖像，可以在 Photoshop中引用，並且壓縮了最終的CSS以減小檔案大小，從而縮短了傳輸時間和頻寬。

通常，不應該編輯 Blueprint CSS 檔案。而是應該在一個單獨的檔案定義自己的樣式，並根據需要覆蓋 Blueprint 代碼。這是最後一個檔案 css/custom.css 的作用，這個檔案是作為代碼的一部分創建和維護的。