Blueprint CSS Framework 進階

    css的架構設計能幫我們快速有效建立高品質的頁面，也有助於代碼的規範性，當然每一個架構都是建立在無數前人努力的基礎上的，下面就推薦一個css架構——the Blueprint CSS Framework

CSS Frameworks + CSS Reset: Design From Scratch

http://www.smashingmagazine.com/2007/09/21/css-frameworks-css-reset-design-from-scratch

介紹

blueprint是一個所謂的css framework，相比較而言blueprint 代碼中的注釋還是比較詳細的。

按照Jeff Croft的Frameworks for Designers(或中文版本 理解Web架構，和如何構建一個CSS架構)描述的如何構建一個css framework的方法：

blueprint的構建方式也與此類似：

分而治之：

buleprint在功能組織上，將諸如布局(layout)、排版(typography)、組件（widget）、重設（reset）、列印 (print)等功能分散到不同的css檔案中。這樣方便使用者只需要匯入自己所要使用的功能，不用匯入全部檔案，提高頁面裝載效能。目前在組件部分只提 供了對button的處理，尚未做到麥肯錫的MECE（"相互獨立，完全窮盡"）的道。

統一介面：

儘管功能分散到多個css檔案，但是匯入時候，仍然只需要包含同樣的檔案screen.css檔案，具體的匯入細節在screen.css中再處理，統一了對外介面。

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection" />

blueprint 所包含的css檔案說明：

screen.css

This is the main file of the framework. It imports other CSS files from the "lib" directory, and should be included on every page.

類似於Jeff Croft的base.css功能，只需要包含此檔案，就可以匯入

print.css

This file sets some default print rules, so that printed versions included on every page.

用於處理列印，可以歸類為widget。

lib/grid.css

This file sets up the grid (it's true). It has a lot of classes you apply to divs to set up any sort of column-based grid.

用於處理頁面的布局（欄目）

lib/typography.css
This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text.

用於處理頁面元素的排版。

lib/reset.css

This file resets CSS values that browsers tend to set for you.

用於重設頁面，對沒有指定css屬性的頁面元素指定預設值。

lib/buttons.css
Provides some great CSS-only buttons.

用於處理按鈕,可以歸類為widget

lib/compressed.css

A compressed version of the core files. Use this on every live site.

See screen.css for instructions

提供壓縮過的（包含grid.css,tyopgraphy.css,reset.css,buttons.css）的css檔案。

2、各模組用法研究

2.1、grid.css研究

對跨瀏覽器置中處理的相容性處理

一般而言，要處理firefox、ie在處理置中時候的不同，採用如下方式：

body{text-align: center;}div#container{margin-left: auto;margin-right: auto;width: 50em;text-align: left;}         

摘自：http://www.maxdesign.com.au/presentation/center/

blueprint的處理方式：

body { text-align: center; /* IE6 Fix */ margin:36px 0;}

/* A container should group all your columns. */

.container { text-align: left; position: relative; padding: 0; margin: 0 auto; /* Centers layout */ width: 1150px; /* Total width */ }

分欄（Columns）的實現     

blueprint的處理方式：

blueprint定義了.column , .span-x ,.last ，兩者結合來實現分欄功能。

其中：.column定義欄目的float屬性；.span-x定義欄目寬度；.last將margin-right置為0px,

.column { float : left; margin-right: 10px; padding: 0;} /* Use these classes to set how wide a column should be. */ .span-1 { width: 30px; } .span-2 { width: 70px; } .span-3 { width: 110px; } .span-4 { width: 150px; } ....span-8 { width: 310px; } .span-9 { width: 350px; } .span-10 { width: 390px; } ....span-23 { width: 910px; } .span-24 { width: 950px; margin: 0; } .span-25 { width: 200px; } .span-26 { width: 1150px; margin: 0; } /* The last element in a multi-column block needs this class. */  .last { margin-right: 0; } 三欄的實現： <div class ="container" > <div class ="column span-24" > Header </div> <div class ="column span-4" > Left sidebar </div> <div class ="column span-16" > Main content </div> <div class ="column span-4 last" > Right sidebar </div> </div> 四欄的實現： <div class ="container" > <div class ="column span-26" > Header </div> <div class ="column span-4" > Left sidebar </div> <div class ="column span-3 " > Main content 0 </div> <div class ="column span-25" > Main content 1 </div> <div class ="column span-4 last" > Right sidebar </div> </div> 注意把.container中的width(定義了整個頁面的width)修改為1150px 空白欄目的實現：對於多欄目（例如5欄目），其中有空白欄目（例如左右兩欄目為空白），可以使用.append-x和.prepend-x來填充。 其中.append-x在欄目後（padding-right）添加空白欄目，.prepend-x在欄目前（padding-left）添加空白欄目。 通用的容器定義 /* A container should group all your columns. */  .container { text-align: left; position: relative; padding: 0; margin: 0 auto; /* Centers layout */ width: 1150px; /* Total width */ }

2.2、reset.css研究

reset.css的最初代碼應該來自於Eric Meyer,Eric Meyer有兩篇關於reset的日誌，用於處理跨瀏覽器預設值不同的問題。Eric Meyer的文檔寫得很精彩：

Reset Reasoning：http://meyerweb.com/eric/thoughts/2007/04/18/reset-reasoning/

Reset Reloaded：http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

為何要reset
The basic reason is that all browsers have presentation defaults, but no browsers have the same defaults. (Okay, no two browser families—most Gecko-based browsers do have the same defaults.)
For example, some browsers indent unordered and ordered lists with left margins, whereas others use left padding. In past years, we tackled these inconsistencies on a case-by-case basis;

為何使用reset style，而不是universal selector

所謂universal selector 就是使用* 來代表document所有的元素，例如

* { margin: 0;} 關於reset style話題的一些資源：

YUI的reset庫：http://developer.yahoo.com/yui/reset/

http://leftjustified.net/journal/2004/10/19/global-ws-reset/

以下幾篇實際上是討論css framework或tips的文章，只不過都提到了reset話題。

http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/

http://www.christianmontoya.com/2007/02/01/css-techniques-i-use-all-the-time/

http://businesslogs.com/design_and_usability/my_5_css_tips.php

http://www.pingmag.jp/2006/05/18/5-steps-to-css-heaven/

2.3、typography.css研究

typography.css用於確定頁面元素預設的排版格式（baseline）：

Setting Type on the Web to a Baseline Grid：

http://alistapart.com/articles/settingtypeontheweb

2.4、buttons.css研究

Rediscovering the Button Element 討論了用button元素來替代input元素的種種好處，button元素是提供了較為豐富的功能。

http://particletree.com/features/rediscovering-the-button-element

2.4、print.css研究

Eric Meyer有一篇關於css實現print功能的文章，可以作為理解print.css的參考。

CSS Design: Going to Print

Print Different

2.5、compressed.css

compressed.css是對blueprint幾個檔案壓縮合成包，同時也對css檔案進行了壓縮，去除了無用的空格、換行、注釋等文本。

此種方式用於在上生產系統部署時候使用，避免在頁面匯入多個css檔案，同時也有利於提高頁面效能。

按照lib/screen.css中的說明，應該使用了teenage提供的css壓縮服務：

http://teenage.cz/acidofil/tools/cssformat.php

另外類似的提供對css、javascrīpt進行最佳化、壓縮的服務還有：

http://csstidy.sourceforge.net/ （開源）

http://www.cssdrive.com/index.php/main/csscompressor/

http://www.cleancss.com/ （基於csstidy）