群組文章
在第1篇中已經能整合smarty3+CI3，接下來要整合Pure CSS，會選擇Pure而不選擇其他的css 框架的原因，在於pure很簡單。
四、建立目錄
CI3沒有預設圖片CSS或JS要放哪，如果亂放會找不到，所以，建立兩個目錄：
web/ 放置 css, js, images,ico 的地方，這裡預設是給網頁顯示用的地方
upload/ 未來供使用者傳檔的地方，權限請改可寫入
同時在 web/ 裡建立四個目錄
img/
js/
css/
third/ 放第三方 framework，如 bootstrape, pure 這類
建立完的目錄是這樣的
.
├── application
├── contributing.md
├── index.php
├── license.txt
├── readme.rst
├── system
├── upload
├── user_guide 開發完後這個請刪除
└── web
├── css
├── img
├── js
└── third
五、下載pure及測試
切到 web/third/ 目錄
$ cd /path/to/web/third/
下載最新 0.6.0，再解壓縮
$ wget https://github.com/yahoo/pure-release/archive/v0.6.0.zip
$ unzip v0.6.0.zip
接下來測試。修改原本的Test.mtpl檔：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="/web/third/pure-release-0.6.0/pure-min.css" />
<!--[if lte IE 8]>
<link rel="stylesheet" href="/web/third/pure-release-0.6.0/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]>
<!--><link rel="stylesheet" href="/web/third/pure-release-0.6.0/grids-responsive-min.css" />
<!--<![endif]-->
</head>
<body>
<div class="pure-g">
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
<div class="pure-u-1-3"> ... </div>
</div>
測試響應式網頁
<div class="pure-g">
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
<div class="pure-u-1 pure-u-md-1-3"> ... </div>
</div>
</body>
</html>
測試結果：
css注意連結的寫法，上例是用相對連結，目錄指向很清楚就不易搞錯，如果結果測試正常和響應式網頁都可以成功後，可以開始寫你的專案了。
結論
這裡可以發現CI3+Smarty3+Pure整合起來非常容易，幾乎無痛，雖然整體而言比較適合中小型的專案，但是使用上和入手很容易，所以推薦大家使用。
原文 2015-07-26 11:26:23 2015-07-27 21:12:17