Gridpak,響應式網頁Grid佈局工具網頁

話說我上半年的時間都在做全響應式的WP主題(樣板),做一個主題之前都要拿筆和小算盤計算後才能開始第一步。Gridpak是一個很屌的響應式網頁工具,透過預先佈局可以得到一份計算好的Grid樣式,內容有png圖檔、html、css、js、scss、less。

為什麼做主題要計算呢?因為你必須在一開始就佈局好主題各個部位的寬度,以及在全響應環境下的變化,也因此實際呈現時百分比所影響到的寬度是否合乎主題內容中各個部位所需要的最小寬度或者最大寬度,這部份應該是有工作上實際碰到的前端設計師比較能理解,所以言而總之你既然會來看了這一邊文章八成你也看得懂。

網站:Gridpak

使用方式:
  1. 非常明顯第一步是拉動畫面中間的工具來決定寬度。
  2. 然後設定式樣所需要的欄位數、間隔、寬度等等。
  3. 最後按下方紅色按鈕的Download,就可得到你需要的檔案了,這個檔案裡的東西有夠豐富的,不但可以讓你直接取得一個基礎的html+css範例,還包含了其他我尚未去學習的scss、less,真是酷爆了。

張貼留言

跟其他看到這個工具的人聊聊?