淺談快速開發網站雛形，從 ContPub 的經驗說起...

如果使用架站軟體，如 Wordpress、Drupal 或 Joomla，可以找到很多佈景可以套用，例如：

1. Wordpress Themes
2. Drupal Themes
3. JoomlaArt

但是自行開發的網站就沒有這麼幸運了，不管是程式或佈景，都必須自己打理。

2011 年 9 月剛開始啟動 ContPub 的專案時，為了讓網站剛開始有個基本堪用的外觀，我從一些網站找來 Free / Open 的佈景。

1. www.oswd.org
2. www.openwebdesign.org
3. www.styleshout.com

套上佈景之後，寫程式會比較快樂，因為網站有基礎的佈景，比較不會像原始文件那樣醜陋；一開始不必花太多時間調整佈景，可以先專注在程式的開發上。

一段時間後問題慢慢浮現，雖然免費的樣板提供 PSD / CSS / HTML 原始檔，可以自行依照需求修改；但是要挑到一個滿意的佈景已經很不容易，更不用說還要講究免費佈景提供的布局和 UI 元件足夠使用。

因此當部分的功能需要用到 Tab、Dialog 時，我用了 jQuery UI 加速開發；這時候網站同時存在基本的佈景與 jQuery UI 的佈景，佈景不一致的問題就浮現了。

接下來為了讓 CSS 的撰寫更容易，我加入了 Compass，剛開始用得很順利，也陸續加入幾個 Compass Plugins；我想 Compass / LESS 對現代網站開發的方便與重要性，就不用在此贅述了，用過的人應該不會想要再用純手工撰寫 CSS 了吧。

由於原本的佈景沒有 Grid System，若要加上 Responsive Web Design 的修改很不容易。

於是我又幫 ContPub 加上 SUSY，但為了讓原本的佈景可以融合 Grid System，花了不少時間做佈景的修改。

在原本的佈景加上 SUSY 並不難，但是要再不同尺寸的螢幕瀏覽都能自動調整布局，就需要加上更多修改，例如 320+Susy 或相似作法等。

這幾天看到由 Even Wu 發佈的 Golden Grid Framework 後，我覺得這才是我想要的 Fluid Grid System + Respinsive Design。

除此之外佈景還有很多問題要解決，例如在使用 Reset CSS 之後，網站的基本樣式（如 Typography）都被清除需要重新定義，...

最後我發現用在調整 Web UI Design 的時間，比真正用來開發網站功能的時間還要多得太多了...

用了一個週末的時間把網站的外觀整個砍掉重練，為了重新開始，我考慮了以下兩種方案：

1. Compass + Blueprint
2. Twitter Bootstrap

使用 Compass + Blueprint 可以享受 Compass 的便利，但 Blueprint 若要考慮 Responsive Design 就必須自己多下一些功夫；比較起來 Twitter Bootstrap 是一個更完整的基礎。

雖然 GitHub 可以找到一些 Compass + Twitter Bootstrap 的實作，但考慮到 Bootstrap 本身就已提供 LESS 可以客製外觀，我就不考慮這種混合的作法。

把原本的 CSS / Compass 清除後，大約耗費了10多個小時，才把 ContPub 原有的20多個 View 修改為 Bootstrap 的 conventions。

kippt 這個網站也是使用 Twitter Bootstrap 為基礎，開發者 @karrisaarinen 發表了一篇「Building with Twitter Bootstrap」分享他的經驗談，其中也講到 Bootstrap 的問題：

I think using Bootstrap for prototypes or hackathlons is ok, but if you actually have been using some time and effort to build your app, don’t ruin that by being lazy. Use some time to customize the site for your target users or get a designer to help you a bit.

也就是說使用了 Bootstrap 並不代表網站就不需要 Designer，Bootstrap 雖然預設的外觀相當簡潔也堪用，但是對於正式上線的網站來說，仍要花上許多時間進行客製。

雖然用 Bootstrap 打造的網站，一開始會有相同的外觀，但網站佈景本來就免不了需要請 Designer 特別設計，所以 Bootstrap 的意義就跟它的命名一樣，當網站還處於「bootstrap」階段時，它提供比較周全的基礎設施，讓你的 HTML/CSS/UI Components 有個基本的 conventions 可以參考。

這聽起來是個兼顧現時與未來的作法，讓網站在創立的初期，可以不必太花時間在無意義的外觀調整上（畢竟功能都還沒做完）；等到需要正式上線、有 Designer 支援時，再用比較有系統的方式重新定義客製的外觀。

站在 Twitter Bootstrap Open Source 的基礎上，已經有許多延伸的專案出現，提供 Bootstrap 的佈景主題及客製化工具，例如：

Wrap Bootstrap - Themes for Twitter Bootstrap

Style Bootstrap - Create unique design with Bootstrap v2