拿掉 Bootstrap 使用 SCSS，YiPro2 改版的簡單小心得

拿掉 Bootstrap 使用 SCSS，YiPro2 改版的簡單小心得

在禮拜日的正午多一點左右，終於把這一個歷時大約一星期的 WordPress 佈景丟到網站上了。這一個佈景，是從 YiPro 捨棄掉許多元素大改版而來的，有點像通通脫掉那種感覺，把 Bootstrap 全部拿掉。而全部拿掉之後都然就是全部的結構要重寫，原本 Bootstrap 的 Responsive Web Design 也要全部自己用 CSS Media Queries 一個 Screen 一個 Screen 慢慢刻。

不知道為什麼，我總是會有喜新厭舊的感覺，每當寫出一個之前沒寫過的新樣式或小小的 Script，自己就會覺得新的實在是太讚了，舊的馬上捨棄掉。嗯………

來聊聊這次開發 WordPress 佈景和之前有什麼不一樣好了。在我剛開始寫佈景的第一二天，看到了 Muki 的一篇新文章：用 SCSS 改版初體驗，看到 Muki 居然是用 Fire.app 在跑 SCSS 然後寫 WordPress 佈景。原本我都是只有用 XAMPP 然後 CSS 用 LESS 寫並搭配 Sublime Text 2，看到 Muki 這一串文之後，決定使用 XAMPP + Fire.app + SCSS 下去開發，也順便把那個放在電腦裡好久沒用的 Fire.app 拿出來用，另外就是上面有提到的，把 Bootstrap 拿掉只使用 H5BP 讓寫的時候不需要再 Reset 半天還在 Debug。

用 SCSS 寫大致上沒遇到什麼怪事，不過為了配合 Fire.app 結構，CSS 會產生在 stylesheets/style.css 。

首先有點辛苦，把原本在 Bootstrap 裡面不錯用的 Grid System 的一堆 span* 標籤全部都拿掉，因為這次的佈景想一想之後決定把整個格局都定為一樣左邊是內容區右邊是側邊欄，兩欄寬度在同個解析度下都一樣，所以根本不需要用到那 Grid System 的 12 種 width，整個感覺就是很清爽，因為程式碼變得非常簡單。順便貼一下我在 Facebook 的貼文：

這次的 WordPress 佈景終於把 Bootstrap 給它全部丟了，Bootstrap 一開始使用的時候會覺得很方便，但是用裡面的東西寫久了反而會沒有自己的風格，感覺就像被關在綠島監獄一樣，而且有很多 class 根本都用不到，還要花很多時間去把要客製的部分 override 掉。（茶）
而且，經歷過這個過程感覺自己成長許多。
啊!!!!先不管網頁設計了，我功課還沒寫完 ( ￣ 灬￣)>

感覺上我對 Bootstrap 中毒好深啊～～雖然說 Bootstrap 可以快速建立還不錯的 Framework，但是到了要客製的階段會發現到處都綁手綁腳，到處都要 override 掉實在不怎麼容易。

感覺上寫佈景寫到這個階段，是不需要花太多時間在弄什麼頁碼、找顯示標題要用什麼函式等等哩哩叩叩，大致上都是把區塊砍掉再重新架構，所以速度其實還滿快的，用放學後的時間加上假日就可以把舊的佈景煥然一新看起來截然不同。

這次有嘗試比較新的部分是在側邊欄的部分，用了 tinyscrollbar，然後使用 Facebook Api 取得該文章的讚數，把它顯示成文字就不再用讚的按鈕，看起來才比較不會那麼突兀。 還有用到 FontAwesome 的 Web Icon Font。

之後網頁視窗上方的一條浮動欄則是再把 YiPro 的改良，之前在 YiPro 裡面有滿多問題的，這次也大致上都改掉了。

至於順道提一下我測試過的瀏覽器好了，我一定會先在 Chrome 上顯示正常，再來測試 Firefox，最後是 IE10、IE9，IE8 以下，通常是很閒的時候才會去測試 XD

至於 Responsive 的部分，大概把寬度切成 1200px以上、然後是 980~1200px，再來是 768~989px，最後是 768px 以下。做最多 Responsive 優化的地方是在 768px 以下也就是 Mobile 版本，特別修了一下上方的浮動欄，不過不知道為什麼用手機點按鈕，反應有點慢。再來就是 980~1200px，這邊也是使用者比較多的部分，所以也針對這邊做了一些調整。

大概就是這樣，由於之前 2 月底有個模擬考所以有了好一陣子沒寫文章了，最近應該可以開工了，而我的高中部分，也已經確定有學校可以念了，不用考基測了 ^__^