（轉自百度經驗）http://jingyan.baidu.com/article/48a42057c44fdba9242504dd.html
Pure是一個簡單、實用的CSS框架，鑒於目前網上對pure的資料比較少，所以我想把使用pure的一些經驗介紹給大家，相信你看完本文后也會愛上pure。
Pure包含多個模塊：Base(基本樣式)、Grids(網格系統)、Forms(表單)、Buttons(按鈕)、Tables(表格)、Menus(菜單)，本文主要介紹如何使用Grids（網格系統）。
1.獲取Pure CSS。
在官網purecss.io首頁可以找到Pure的下載地址，你可以把Pure的css文件下載到本地，也可以直接引用雅虎的css文件。本文作為教程就直接使用在線的css文件。
2.了解pure網格系統。
不知道網格系統的朋友可以去百度，我這里簡單說一下：所謂的網格系統就是把網頁橫向划分成N格，類似一個Excel表格，這樣網頁內容就能放在這些格格里面。
pure的網格系統支持5格和24格，主要有兩種樣式：pure-g和pure-u-*
1、pure-g，網格樣式，例如<div class="pure-g"></div>這樣就實現了一個網格
2、pure-u-*，單元格樣式，網格里的內容必須放在網格單元里。例如pure-u-1-2表示單元格占1/2的寬度、pure-u-2-3表示單元格占2/3的寬度，如下圖所示
3.准備html頁面。后面的教程都是使用該測試頁面做演示，建議你基於這個html頁面做練習。
<!DOCTYPE HTML>
<html>
<head>
<!--引用pure-->
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/grids-min.css">
<style type="text/css">
/*定義一些顏色，以便看到各模塊的位置*/ .c1 {
background-color: #1abc9c;
color: #FFF;
}
.c2 {
background-color: #2980b9;
color: #FFF;
}
.c3 {
background-color: #8e44ad;
color: #FFF;
}
.c4 {
background-color: #f39c12;
color: #FFF;
}
.c5 {
background-color: #c0392b;
color: #FFF;
}
.c6 {
background-color: #999999;
color: #FFF;
}
.ph-500 {
min-height: 500px;
}/*用於占位*/
.ph-50 {
min-height: 50px;
}/*用於占位*/
.ph-100 {
min-height: 100px;
}/*用於占位*/
.ph-200 {
min-height: 200px;
}/*用於占位*/
.mg {
margin: 3px;
}/*增加邊距*/
.main {
max-width: 1000px;
margin: 0 auto;
}/*頁面主體*/
</style>
</head>
<body>
<div class="main"> </div>
</body>
</html>
4.從簡單開始，實現左右結構
添加pure-g樣式我們先從簡單的入手，實現一個常見的左右結構，即左邊內容+右側邊欄。先添加一個pure-g樣式<div class="main pure-g"></div>
5.定義單元格。
我們要求側邊欄寬度是300px，由於前面定義了頁面寬度是1000px，因此側邊欄占頁面寬度的1/3。
<div class="main pure-g">
<div class="pure-u-2-3">
<div class="c1 ph-500">
<!--內容-->
</div>
</div>
<div class="pure-u-1-3">
<div class="c3 ph-500">
<!--側邊欄-->
</div>
</div>
</div>
6.給內容增加邊距。
為了頁面更美觀，需要給左右兩側的內容增加間距。這里需要注意的是，設置margin、padding的樣式不能跟pure-u-*的樣式同時應用在同一個標簽里，否則pure的網格系統會出現異常。
<div class="main pure-g">
<div class="pure-u-2-3">
<div class="c1 ph-500 mg">
<!--內容-->
</div>
</div>
<div class="pure-u-1-3">
<div class="c3 ph-500 mg">
<!--側邊欄-->
</div>
</div>
</div>
7.嵌套使用網格，構造復雜布局
一個復雜布局。
顯示應用中，布局當然不會只有左右兩欄這么簡單。接下來我們就以百度經驗首頁的一個欄目為例子做一個復雜的布局。下圖就是我們要實現的效果
8.分析頁面
任何復雜的布局都可以拆分為若干個簡單的布局，可以分析出這個界面有4大區域，如圖所示：
9.實現大體布局
現在我們先來實現上一個步驟里標出的4個模塊，實現代碼如下。可以看出就算是復雜的布局，用pure實現起來也是清晰明了，修改起來也很簡單。比如區域4想改成一行顯示5張圖片，只需要把pure-u-1-4改成pure-u-1-5。至於區域1和區域2里的內容頁可以繼續嵌套網格來排版，這個留給讀者做練習，我這里就不細說了。
<div class="main pure-g">
<div class="pure-u-2-3">
<div class="c1 ph-500 mg">
<!--內容-->
<div class="pure-g">
<div class="pure-u-1-2">
<div class="c2 ph-200 mg">區域1</div>
</div>
<div class="pure-u-1-2">
<div class="c4 ph-200 mg">區域2</div>
</div>
<div class="pure-u-1">
<div class="c5 ph-50 mg">區域3</div>
</div>
<div class="pure-u-1-4">
<div class="c6 ph-100 mg">區域4</div>
</div>
<div class="pure-u-1-4">
<div class="c6 ph-100 mg">區域4</div>
</div>
<div class="pure-u-1-4">
<div class="c6 ph-100 mg">區域4</div>
</div>
<div class="pure-u-1-4">
<div class="c6 ph-100 mg">區域4</div>
</div>
</div>
</div>
</div>
<div class="pure-u-1-3">
<div class="c3 ph-500 mg">
<!--側邊欄-->
</div>
</div>
</div>
另外分享一個中文翻譯的pure網站http://pure-site.ap01.aws.af.cm/
不過是0.3.0的版本，現在的0.6.0（2015/5/4），這是css UI比bootstrap小，壓縮后只有6kb