/ CSS

[CSS tech.] Blueprint CSS simple howto

我不知道該怎麼樣去解釋甚麼是 Blueprint CSS Framework,所以,底下我直接摘錄 Blueprint CSS Framework 的官方 README 中的說明(謎:你是要充版面吧),另外,他們也有 Google Code 可以參考:

Welcome to Blueprint! This is a CSS framework designed to cut down on your CSS development time. It gives you a solid foundation to build your own CSS on. Here are some of the features BP provides out-of-the-box:

  • An easily customizable grid
  • Sensible default typography
  • A typographic baseline
  • Perfected browser CSS reset
  • A stylesheet for printing
  • Powerful scripts for customization
  • Absolutely no bloat!

簡單來說,他是一個蠻基本的 CSS 設定,但是除了基本設置之外,另外有分欄設定,也有針對列印等設置。太過詳細的這裡就不贅述,基本上我覺得他不算是一個真正的 framework,不過如果拿來當作是一個開始也算是不錯的選擇。畢竟,寫了太多 CSS 之後,其實有個統一的標準也是一件好事。從官方下載檔案之後,其中我們之需要 blueprint 資料夾就可以了。我們將這個資料夾放到我們放置 CSS 檔案的資料夾中,例如:styles/blueprint,這樣,我們就可以開始規劃我們的 Layout 了。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="en">
	<head>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	  <title>Blueprint simple layout</title>
	  <!-- Framework CSS -->
	  <link rel="stylesheet" href="./styles/blueprint/screen.css" type="text/css" media="screen, projection">
	  <link rel="stylesheet" href="./styles/blueprint/print.css" type="text/css" media="print">
	  <!--[if lt IE 8]><link rel="stylesheet" href="./styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
	</head>
	<body>
	</body>
	</html>

然後呢?我們回到 HTML 裡,一開始,我們需要準備一個"容器"來裝我們所需要的東西。這個容器通常我們將它放置在最外層,使用 DIV 標籤,並給他一個 ID 命名為"container"。在使用 Blueprint CSS 時,我們必須要有這個容器,關於這一點請牢記。

我們再回過頭來看看 Blueprint CSS 到底做了甚麼事情。關於 screen.css 這支 CSS 檔案的原始檔案,都在 src 的資料夾底下,這個檔案總共包含了有:Reset、Grid、Forms、Typography 爾等的設定。另外 ie 則是使用 ie.css 做額外的設置。

首先,我們先來看 Reset,顧名思義,他就是將 CSS 的設置針對瀏覽器做初始化的動作。關於這方面的工具其實很多,包括 jQuery 也有這樣的 Plugin 可以使用,不過這裡不提 CSS 以外的事情,所以這是基本重新設定 CSS Styling 的方式。

接著,Typography,針對文字控制(印刷)的部分做一個標準化的動作,其實這個所指的印刷,不單純是所謂的列印這個動作,而是廣泛的針對顯示在螢幕上的樣式做設定。換句話說,他是統一畫面上文字控制的一個初始化設定。當然,Blueprint CSS 也是有針對列印的部分額外提出一個 print.css 來做控制。

再來,Forms,針對所有表單元件進行初始化。當然,這些設定是可以依照個人需求去修改的,不過,並不建議直接修改這個檔案,最好另外將其設定寫在額外的 CSS 檔案會比較好。

最後,Grid,針對容器的設定。這是這個 Framework 的靈魂所在,所有關於容器這個部份的設定,都在這個 CSS 裡面完成。使用這個 Framework 的限制是,容器的大小固定在 950px 以內,所以若是要使用更大的容器尺寸,這個 Grid 設定就不敷使用了。不過,其實還是有跡可循的,關於這方面在此暫時跳過。

所以,其實這一整個 Framework 在做的事情,只是幫你把粗略的架構給畫出來,而且你不需要去針對各項元件的設定而傷透腦筋。不過,要真的從中去學習或是修改這樣的 Framework,除非你有非常多的時間跟耐性,不然我並不建議真的需要去理解它(Framework)到底在做甚麼。

回到 Grid,我們其實對於容器,只需要知道我們所需要的大小即可。由 Blueprint CSS 的預設容器大小 950px 來看,我們倘若需要三欄設定,左與右皆為 190px,那麼依照 Blueprint CSS 的設定,左右的 Class 只要設定為 span-5 即可,那麼中間怎麼辦呢?依照簡單的數學公式:

950 - 1902 - 102 = 550

所以,中間的寬度是 550px,那麼我就可以從 Grid 中得知,中間的 Class 我可以設置為 span-14。而,為了避免留白的推擠導致欄位被迫換行,我可以在左右的 Class 分別加上 firstlast 的 Class 設定,來清除空白。所以,我們由 Grid 中所得知的設定,就是如此。

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="en">
	<head>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	  <title>Blueprint simple layout</title>
	  <!-- Framework CSS -->
	  <link rel="stylesheet" href="./styles/blueprint/screen.css" type="text/css" media="screen, projection">
	  <link rel="stylesheet" href="./styles/blueprint/print.css" type="text/css" media="print">
	 
	<!--[if lt IE 8]><link rel="stylesheet"
	href="./styles/blueprint/ie.css" type="text/css" media="screen,
	projection"><![endif]-->
	</head>
	<body>
	  <div class="container">
	  
	    <div class="header">
	      <h1>header</h1>
	    </div>
	    <hr>
	    
	    <div class="span-5 first">
	      <h1>sidebar 1</h1>
	    </div>
	    
	    <div class="span-14">
	      <h1>content</h1>
	    </div>
	    
	    <div class="span-5 last">
	      <h1>sidebar 2</h1>
	    </div>
	    
	    <hr>
	    <div class="footer">
	      <h1>Footer</h1>
	    </div>
	  
	  </div>
	</body>
	</html>

如果需要更複雜的設定呢?其實 Grid 也幫你準備好了,只是,這樣的類別設定是不是真的很容易理解?老實說我個人還是有相當的疑慮。對於特殊的定位或是相關位置控制,可以使用的類別有:append, prepend, pull, push 這四種,不過,前兩個並不帶有浮動(float)設置,後兩者則各自帶有浮動與相對定位(position: relative;)設置,在使用上並不相同。

我舉個例子,不過這種較為複雜的設定,希望是對於物件定位稍有了解的人再來看會比較容易理解。

實際上的操作是這樣的:

	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
	   "http://www.w3.org/TR/html4/strict.dtd">
	<html lang="en">
	<head>
	  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	  <title>Blueprint simple layout</title>
	  <!-- Framework CSS -->
	  <link rel="stylesheet" href="./styles/blueprint/screen.css" type="text/css" media="screen, projection">
	  <link rel="stylesheet" href="./styles/blueprint/print.css" type="text/css" media="print">
	  <!--[if lt IE 8]><link rel="stylesheet" href="./styles/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->
	  <style type="text/css" media="screen">
	    
	  </style>
	</head>
	<body>
	  <div class="container">
	  
	    <div class="header">
	      <h1>header</h1>
	    </div>
	    <hr>
	    
	    <div class="span-5 first">
	      <div style="height: 3em;">
	      </div>
	      <h1>Sidebar 1</h1>
	    </div>
	    
	    <div class="pull-5">
	      <h1>Sidebar 0</h1>
	    </div>
	    <div class="span-14">
	      <h1>Content</h1>
	      <br><br><br><br><br><br><br>
	    </div>
	    
	    <div class="span-5 last">
	      <h1>Sidebar 4</h1>
	    </div>
	    <div class="span-14 push-5 last">
	      <h1>Sidebar 3</h1>
	    </div>
	    
	    <hr>
	    <div class="footer">
	      <h1>Footer</h1>
	    </div>
	  
	  </div>
	</body>
	</html>

大致上是這樣,對於做 Layout 來說,不失為一個好用的工具。另外推一個好站:DivtoDesign,關於他的 CSS Fframework 的文章可以參考這一篇:960 CSS Framework – Learn the Basics

最近心得:DIV 不是萬能,嚴謹易讀的 HTML 結構才是唯一正途!