CSS框架是上帝發送的。它們加快了開發速度，確保了可用性，滿足了所有W3C標準，跨大多數瀏覽器實現了可移植性，還有更多。聽起來很棒不是嗎。為什么每個人都不使用它們？那么，對于新手開發人員來說，框架可能有點棘手嗎？也就是說，如果這篇文章出現，希望能讓每個人更好地理解框架是什么，以及如何有效地使用它。我們將關注如何使用BlueprintFramework，這是一個比其他框架更主流和更成熟的框架(我沒有說得更好)。我們已經開始指南，高級教程，插件，工具和應用程序和一些有洞察力的進一步閱讀文章。希望這篇文章能讓大家更好地了解CSS框架，并最終愛上它們。

The Blueprint CSS Framework Toolbox

“藍圖是一個CSS框架，旨在減少您的開發時間。它為您在上面構建項目提供了堅實的基礎，有一個易于使用的網格、合理的排版、有用的插件，甚至還有用于打印的樣式表?！?/p>

藍圖提供什么？

• CSS重置，消除了不同瀏覽器之間的差異。
• 支持最復雜的布局的堅實的網格。
• 基于網站之前的專家原則的排版。
• 表單樣式，用于漂亮的用戶界面。
• 打印樣式，使任何網頁準備紙張。
• 按鈕，標簽和精靈插件。
• 工作流中每個步驟的工具、編輯器和模板。

入門資源藍圖：CSS框架主頁下載最新版本的藍圖框架Blueprintcss-Google代碼托管項目列表BlueprintWiki BlueprintLiveDemos

The Blueprint CSS Framework Files

該框架有幾個文件您應該檢查?！皊rc”目錄中的每個文件都包含了許多清晰的注釋。[來源]

壓縮文件(這些文件在HTML中)：

• 藍圖/屏幕
• 藍圖/打印件
• 藍圖/第三階段

源濰坊網站開發文件：

• 藍圖/src/reset.css：此文件重置瀏覽器傾向于為您設置的CSS值。
• 藍圖/src/grid.css：這個文件設置網格(是真的)。它有很多類，您可以應用到div來建立任何類型的基于列的網格。
• 藍圖/src/typography.css：這個文件設置了一些默認的排版。它也有一些方法，一些真正花哨的東西做你的文字。
• 藍圖/src/forms.css：包括一些最小的表單樣式。
• 藍圖/src/print.css：這個文件設置了一些默認的打印規則，這樣您的站點的打印版本看起來比通常更好。它應該包括在每一頁。
• 藍圖/src/ie.css：包括我們心愛的IE6和7的每一個黑客。

劇本( script的名詞復數 ):

• rb：用于壓縮和自定義CSS的Ruby腳本。設置自定義命名空間、列計數、寬度、輸出路徑、多個項目和語義類名。有關更多信息，請參見press.rb中的注釋或運行$rubypress.rb-h。
• rb：使用W3CCSS驗證器驗證Blueprint核心文件。

[電影]家庭私小說:

• 藍圖/插件/：包含其他的功能，以簡單插件的形式為藍圖。有關進一步說明，請參閱每個插件目錄中的各個自述文件。
• test/：包含測試Blueprint大多數方面的html文件。打開test/index.html以獲得進一步說明。

Quick-Start Tutorial

這是一個關于如何開始使用來自約書亞·克萊頓的藍圖的快速教程。藍圖應該放在你網站的CSS目錄中。完成之后，將這三行添加到網頁的中。記住要確保href路徑是正確的：

現在，你可以走了。你已經準備好處理藍圖了。

Further Getting Started Guides

從部門設計學習藍圖框架的基本知識-藍濰坊網站開發圖快速指南-BlueprintCSS 101

A Closer Look At the Blueprint CSS Framework

藍圖是一個CSS框架，它可以為您在任何涉及HTML和CSS的項目中節省時間和麻煩，無論是使用Rails、PHP還是僅僅部署HTML頁面。在本教程中，您將了解Blueprint的內部工作原理，并將查看一個使用Blueprint更好地了解框架實際工作方式的實時演示應用程序。

Advanced Blueprint Tutorials

Customizing Typography Baselines with Blueprint CSS

藍圖的排版.css文件建立了一些非常好的排版樣式，創建了一個漂亮的基線網格。默認情況下，它將字體大小設置為12 px，并在此基礎上設置18 px的行高和基線。雖然這很好，但我通常更喜歡使用比12 px更大的字體大小。那么這是怎么計算出來的呢？這個小的，但很有用的教程，解釋了自定義藍圖排版基線的方程式。

藍圖CSS jQuery

One of the neat features of blueprint is a compressor script that not only renders all the various CSS bits that you want according to the given column numbers and sizes for each project into one neat (and compact) CSS file, but it also lets you define semantic classes and ids. And on top of that, the compressor script will also generate a PNG image that conforms to the column size and padding you've selected.
What if you wanted a less obtrusive way of switching the grid on and off? In this tutorial, with little help from jQuery, you will learn how to generate a toggle switch for each page.

帶有BlueprintCSS的雜志樣式主頁模板原型

This tutorial focuses on the process of applying a CSS grid (Bliueprint)and designing a prototype of a home page template. The layout design, in this tut, is based on the popular layout seen on many WordPress Magazine themes.
A typical design process for web pages is to start with a sketch on paper, followed by a graphic mockup in Photoshop or Fireworks, etc. Drop in all the design elements, positioned approximately where you want them. Later, in the CSS grid-based design phase, you'll determine exact measurements.)
View the Demo

用GIMP和Blueprint CSS開發We

The GIMP is a popular freeand open source image editing program and Blueprint CSS is a CSS framework, whichmakes web layouts easy and chooses sensible style details on your web page. It is compatible with almsost all moder browsers and makes designing a website easy and simple.
In this three part tutorial you will learn the process of setting up the files and folders and creating the image in the Gimp, the second part will contain how to slice up the image and save it, and the third part shows you how to write the code and finish up.

使用WordPress沙箱和Blueprint CSS框架

Straight out of the box, the WordPress Sandbox theme is an exercise in styling simplicity, lacking any graphics , boring white on black text, the theme is just waiting for a CSS wizard to craft a masterpiece. Introduce the Blueprint framework into the mix and you have a base with endless possibilties.
This tutorial shows you how to successfully merge the WP Sandbox with the Blueprint framework and simplify your work process.

Blueprint Plugins

Montoya's Blueprint- Plugin – Tabs

這個插件向Blueprint添加了一組簡單靈活的水平選項卡，只需將屏幕.css文件上傳到服務器上的一個新目錄，包括網頁中的插件文件，然后將類“選項卡”添加到列表中。很簡單。

Liquid Blueprint

到現在，您將知道Blueprint有固定的布局，使用此插件，您可以將其轉換為適合任何瀏覽器窗口大小的流體布局。查看固定布局-查看拉伸流體布局-查看CSS

Silkset Plugin

絲綢集是一組圖標，與CSS框架藍圖完美地結合在一起。這個插件包含各種樣式表，并被認為可以提高性能和縮短開發時間。

Blueprint Tools and Apps

Blueprint CSS Background Grid Bookmarklet

When viewing your web site that has been designed with a grid stystem, an easy way to toggle the positioning grid on and off is to use this bookmarklet, it takes away the unnecssary step of having to change the site's HTML templates.
Get the bookmarklet here: Blueprint CSS Background Grid Bookmarklet ?

Blueprint Grid CSS Generator

這個工具將幫助您生成Blueprint的grid.css和pressed.css及grid.png文件的更靈活的版本。無論您喜歡設計中的8、10、16或24列，當您使用Blueprint框架時，這個生成器提供了更多的靈活性。

BlueCalc – A Grid Calculator for Blueprint.css

此工具可幫助您計算基于藍圖的網站或web應用程序的單個網格布局。作為一個靜態網格框架，通常首先定義網格的總寬度，然后將工作區劃分為列。默認情況下，Blueprint附帶950 px網格，分為24列。但是，這種配置通常不足以創建您所想到的布局類型。

Construct Your CSS – Based on Blueprint & jQuery

Structure是一個基于Blueprint&jQuery的可視化布局編輯器，它既是CSS設計人員的有用工具，也是可視化布局編輯器能夠使用干凈的CSS和語義HTML的證明。

Blueprint's Compress.rb: A Walkthrough

The purpose of refactoring Blueprint’s compress.rb and other scripts was to make it much more extensible and useful for developers working on multiple projects. Developers using Blueprint on one or two single sites don’t care that the full Blueprint distribution is packaged with the site. However, developers working on multiple sites from a single computer are often left with the hassle of keeping all these copies up-to-date, with extra custom files floating around and very much a large mess.
The goal of rewriting the compression script was to allow for extreme customization of the output Blueprint CSS as well as ease of keeping projects up-to-date with the newest Blueprint source without much hassle.

Plumb – Web Layout Composition Tool

Plumb是一個聰明的網頁布局組合工具，用于藍圖框架。你所要做的就是在頁面的舞臺上畫一些‘東西’，它會為你生成HTML。非常出色

Blueprint CSS Grid Tool for Adobe Air

Blueprint comes with a background grid image, but it only works as a background, and it is not that useful when you are working with colors and final tweaks. This Adobe AIR app gets around this by showing a floating grid, sized at 18px and with Blueprint-sized columns.
It is semi-transparent, draggable and resizable. So you just start it up and align things as you please. It floats to the front, so you can even edit behind it while it is running.

Boks – A Visual Grid Editor for Adobe Air

Boks is an AIR application (so it works on Windows, Mac and Linux) that provides a User Interface for Blueprint CSS's framework. It's been designed for those who think the Grid System is good but never really took the time to give it love.
It handles grid configuration, baseline rhythm pimpin', CSS (with or without compression) and grid.png export, HTML layout and much more.

Photoshop Template for Blueprint CSS Comps

此模板的目的是允許您創建可視化的設計方案，以便使用CSS布局框架實現。Photoshop文檔為CSS框架(如Blueprint)提供了24列網格。它由符合藍圖的24列30 px，10 px寬排水溝和水平寬度950 px的指南組成。水平導軌在18 px或1.5 em線高度為12 px基字體。

Blueprint Cheat Sheet

當然，每個框架或工具都需要一個好的、深入的備忘單。在此下載PDF格式：藍圖備忘單V.0.8

Further Reading

我可以比你更快地設計網站：CherrySaveBlueprintCSS的快速樣式表-JeffCroft的內容和表示分離的神話-由Khoi VinhOn的框架正式稱為打印-George LesicaWhich CSS Grid Framework應該用于Web設計嗎？由Raj DashPopular CSS框架-Yahoo Yui，960 CSS，Blueprint，YAML，jQuery由WebdevelopertutBlueprint編寫。MarkBoulton的CSS框架