繼上回自曝其短地蒐羅了一堆 HTML、CSS、JavaScripts 等網頁前端技術的資源大雜燴之後，又做了丁點功課，關於 CSS 套件（或框架），有些東西可以記一下。
Bootstrap 與 YUI Pure CSS
原本我只是想找個 CSS 按鈕產生器，以便加入一個現成的 ASP.NET 網站，讓它的操作介面好看一點。找來找去，發現 YUI 的 Pure CSS 還挺美觀的，而且檔案不大，靈活輕巧。
既然要用整套 CSS 樣式庫了，自然會想到 Bootstrap，另外，jQuery UI 不也包含整套 CSS 嗎，還可以切換主題哩！
主要的問題在於，那個現有的 ASP.NET 網站原本是採用 ASP.NET 2.0 Web Forms 框架，用 Visual Basic 寫的。我逐步將之翻新至 .NET 4.5、更新 jQuery、加入 Entity Framework、抽出服務層、領域層、修 bugs......一陣折騰，已經廢了一雙費了一番手腳，現仍心有餘悸。想到要直接把一整套 Bootstrap 套進這個網站，不免猶豫起來。
我看到這個 ASP.NET 網站到處都有用到 "container" 樣式，而 Bootstrap 的 CSS 裡面也有，就算解決了這個衝突，難保沒有其他命名相同的樣式，而我實在也不可能有那麼多時間去逐一查核測試每個網頁是否破版。
總而言之，對一個已經對外開放運行的網站，而且 CSS 寫得零零落落的網站（命名還用數字 1、2、3、4、亂七八糟），我不敢把一套完整的 CSS 框架直接套進去。
除此之外，目前暫不考慮 Bootstrap 的原因還有一個：我還不知道如何適當 customize Bootstrap。
Bootstrap 對於沒有美術基礎的開發人員來說雖然方便快速，可是若不懂得 customize，網站的外觀就會跟別人長得很像。有個叫做 Bootstrap Themes 的網站提供了許多現成樣板（要錢的），可以看看人家能做到什麼程度。當然也有免費的：例如這裡、這裡、和這裡。
YUI Pure CSS
YUI Library 的爸爸是 Yahoo!，其子專案 Pure CSS 相當輕巧。Pure 0.2.1 版的 pure-min.css 大約才 19KB，Bootstrap v2.3.2 的 bootstrap.min.css 則是 104KB。
而且，Pure CSS 甚至可以讓我單獨引用某個子模組（摘自官網）：
也就是說，我可以先選擇我需要用的，例如 Buttons 樣式，套用到現有網站後，若沒有問題，再嘗試加上別的樣式。萬一跟現有網站的 CSS 有所衝突，造成破版或走樣，應該也不會太難除錯（因為檔案不大，相對單純）。
這正合我目前的需要！
除了個別引用，Yahoo! 網站還提供自訂組合的 API，讓我們可以用一個連結來取得多個 CSS 檔案。以下範例會取得 Base、Grids、和 Forms 的 CSS：
Pure 0.2.1 版的完整 CSS 檔案的連結網址是：http://yui.yahooapis.com/pure/0.2.1/pure-min.css。也有 CDN：http://cdnjs.cloudflare.com/ajax/libs/pure/0.2.1/pure-min.css，但此 CDN 不提供組合式 API。
此外，它還有提供線上的 Skin Builder 工具可以讓我們建立自訂樣式。
小結
把 Pure CSS 加入現有的網站，過程還算輕鬆愉快。搭配 Font Awesome 一起服用，最後呈現的效果也令我滿意。先前已經在新專案中試過 jQuery UI，也許下次有機會弄新網站時，就來試試 Bootstrap 吧。
Bootstrap 與 YUI Pure CSS
原本我只是想找個 CSS 按鈕產生器，以便加入一個現成的 ASP.NET 網站，讓它的操作介面好看一點。找來找去，發現 YUI 的 Pure CSS 還挺美觀的，而且檔案不大，靈活輕巧。
既然要用整套 CSS 樣式庫了，自然會想到 Bootstrap，另外，jQuery UI 不也包含整套 CSS 嗎，還可以切換主題哩！
主要的問題在於，那個現有的 ASP.NET 網站原本是採用 ASP.NET 2.0 Web Forms 框架，用 Visual Basic 寫的。我逐步將之翻新至 .NET 4.5、更新 jQuery、加入 Entity Framework、抽出服務層、領域層、修 bugs......一陣折騰，已經
我看到這個 ASP.NET 網站到處都有用到 "container" 樣式，而 Bootstrap 的 CSS 裡面也有，就算解決了這個衝突，難保沒有其他命名相同的樣式，而我實在也不可能有那麼多時間去逐一查核測試每個網頁是否破版。
總而言之，對一個已經對外開放運行的網站，而且 CSS 寫得零零落落的網站（命名還用數字 1、2、3、4、亂七八糟），我不敢把一套完整的 CSS 框架直接套進去。
除此之外，目前暫不考慮 Bootstrap 的原因還有一個：我還不知道如何適當 customize Bootstrap。
Bootstrap 對於沒有美術基礎的開發人員來說雖然方便快速，可是若不懂得 customize，網站的外觀就會跟別人長得很像。有個叫做 Bootstrap Themes 的網站提供了許多現成樣板（要錢的），可以看看人家能做到什麼程度。當然也有免費的：例如這裡、這裡、和這裡。
YUI Pure CSS
YUI Library 的爸爸是 Yahoo!，其子專案 Pure CSS 相當輕巧。Pure 0.2.1 版的 pure-min.css 大約才 19KB，Bootstrap v2.3.2 的 bootstrap.min.css 則是 104KB。
而且，Pure CSS 甚至可以讓我單獨引用某個子模組（摘自官網）：
| Name | URL |
|---|---|
| Base | http://yui.yahooapis.com/pure/0.2.1/base-min.css |
| Buttons | http://yui.yahooapis.com/pure/0.2.1/buttons-min.css |
| Forms (Responsive) | http://yui.yahooapis.com/pure/0.2.1/forms-min.css |
| Forms (Non-Responsive) | http://yui.yahooapis.com/pure/0.2.1/forms-nr-min.css |
| Grids (Responsive) | http://yui.yahooapis.com/pure/0.2.1/grids-min.css |
| Grids (Non-Responsive) | http://yui.yahooapis.com/pure/0.2.1/grids-nr-min.css |
| Menus (Responsive) | http://yui.yahooapis.com/pure/0.2.1/menus-min.css |
| Menus (Non-Responsive) | http://yui.yahooapis.com/pure/0.2.1/menus-nr-min.css |
| Tables | http://yui.yahooapis.com/pure/0.2.1/tables-min.css |
也就是說，我可以先選擇我需要用的，例如 Buttons 樣式，套用到現有網站後，若沒有問題，再嘗試加上別的樣式。萬一跟現有網站的 CSS 有所衝突，造成破版或走樣，應該也不會太難除錯（因為檔案不大，相對單純）。
這正合我目前的需要！
除了個別引用，Yahoo! 網站還提供自訂組合的 API，讓我們可以用一個連結來取得多個 CSS 檔案。以下範例會取得 Base、Grids、和 Forms 的 CSS：
<link rel="stylesheet"
href="http://yui.yahooapis.com/combo?pure/0.2.1/base-min.css&pure/0.2.1/grids-min.css&pure/0.2.1/forms-min.css">
Pure 0.2.1 版的完整 CSS 檔案的連結網址是：http://yui.yahooapis.com/pure/0.2.1/pure-min.css。也有 CDN：http://cdnjs.cloudflare.com/ajax/libs/pure/0.2.1/pure-min.css，但此 CDN 不提供組合式 API。
此外，它還有提供線上的 Skin Builder 工具可以讓我們建立自訂樣式。
小結
把 Pure CSS 加入現有的網站，過程還算輕鬆愉快。搭配 Font Awesome 一起服用，最後呈現的效果也令我滿意。先前已經在新專案中試過 jQuery UI，也許下次有機會弄新網站時，就來試試 Bootstrap 吧。
沒有留言: