好用的 Responsive grids : SUSY 實作感想 « MUKI space* 相信大家都看過這張流傳已久的 compass 武裝神圖： 而我在接觸 SUSY 這個 專門給 Compass 用的 Responsive grids framework 之後，我深深認為 SUSY 加上 Compass 的合體會變成： (本來想把圖做的精美一點的，可是 ubuntu 沒有 photoshop 可以用，所以就算了 OTL) 是的，你沒看錯，就是復仇者聯盟！ 為什麼我會給 SUSY 那麼高的評價呢？ 還變成了超強的復仇者聯盟，搞毛阿！！ 簡潔：如果你有看他們的官方文件，會發現所有語法只有該死的一頁，就沒了。 以上，雖然只有簡單的兩個特點，但這就是我使用 grid system 最在意的部份啦！ 這篇不是教學，所以我假設你已經會 SUSY，或是已知道怎麼使用 SUSY 唷 (想更了解 SUSY 歡迎參考 Even Wu 在 coscup 的演講：RWD 一小時就上手) 用 SUSY 實現 960 grid 關於 SUSY 的基本設定，大家應該都看到爛掉了，如果你到官方網站找資料，會發現他提供的基本設定如下： $total-columns : 12; $column-width : 4em; $gutter-width : 1em; $grid-padding : $gutter-width; 但這樣做出來的 gird 並不是 960 grid。 所幸像我前面提到的， SUSY 的靈活度真的超強大，他可以自己設定你的 grid 總寬，還有任何細節(像是 column , gutter 的寬度..等)，所以如果你要設定網頁是 960 grid，你可以這樣寫： $total-columns : 12; $column-width : 60px; $gutter-width : 20px; $grid-padding : 10px; 想更加了解這四個設定分別代表甚麼的話，同樣請參考 Even Wu 製作的 SUSY 圖解 (感謝 Even 熱情贊助，高清版的喔) mobile first?
揪~竟在寫 RWD 的時候，要從手機版先做起？ 圖片取自： Brad frost web 其實先做手機版，或是先做桌面版沒有一定的對錯，但就我所知： 國外開發幾乎都是 mobile firstSUSY 的架構適用 mobile first我也不會寫 desktop first CSS 讀取順序很重要. RWD 一小時就上手. SUSY使用心得 | life.