CSS

新創筆記

Grid 格子列表之 CSS 前製規劃 (下) Responsive Design

承上篇「Grid 格子列表之 CSS 前製規劃 (上)」主要整理了寫 Grid Display 時總寬度、元素寬度和間距寬度的算法，今天想分享的是加上 Responsive Design 時，土法煉鋼的算法。 發表上篇之後，小時候就很崇拜的 Even Wu 大哥跟我介紹了 Susy 這個 Grid System，專門給 Compass 用的，試用過後還滿喜歡的，這邊也介紹給大家。 Susy: Responsive grids for Compass. http://susy.oddbird.net/ 不過因為我要的是內容呈現時的格子，每個頁面需要的 Grid Display 元素寬度又不盡相同，加上我已經土法煉鋼地用手算了，研究魂燃起，還是算完它吧！ 在 Facebook 分享時，

新創筆記

Grid 格子列表之 CSS 前製規劃 (上)

去年開始小妹立志要朝有數字根據的理性使用者分析來做介面，開始重視網站相關的所有數據，真的獲益不少呢！昨天分享的 比賽列表介面 A/B Test 目前已有初步結果，但取樣數還是不夠，下星期再把結果分享給大家。今天想做一下 Layout 規劃筆記。 在重新設計獎金獵人的時候，寫 SASS (CSS) 前花了不少時間做全站整體規劃。尤其站內除了「比賽」之外，新加了「作品」，而「比賽」和「作品」在 Grid 顯示底下有不同設計，因此花了些時間計算出每個 item 的寬度以及 item 之間的間距，並讓不同寬度總寬度都符合 980px。 在做 Grid 格子狀顯示的時候，因為希望左右可以完全貼齊總寬度，讓整體視覺更飽滿平衡，所以寬度的計算裡 margin 必須少算一次，才能達到 one pixel matters