8px Grid System 介紹

本文參考至 Intro to the 8-Point Grid System

目前大多網站已使用類似 Bootstrap , Foundation 這類行 CSS framework 開發網站,甚至嘗試自己構建一些類似的系統。

但是當設置成更大的元素和內容時,會降低整體設計。也很難讓所有人都成為設計師,在頁面 layout 的時候會難以一眼看出架構差異。

如果統一使用 8px 作為最小元素,將任何元件的 margin, padding, indent 都使用 8px 為最小單位時,我們就不用再去猜測。

為什麼不直接採用 Bootstrap?

Bootstrap 是一個套件庫,是一個框架,讓設計師,開發人員專注於開發上。它的確提高了網站的頁面品質。但是沒有一致的單位會可能導致頁面之間的佈局不一致。

8px,使用 8 為最小單位來放大頁面上的元素。對我來說,這意味著任何定義的高度或寬度,邊距或填充將會是 8 的倍數。

為什麼不是 6 或 10?

大多數流行的螢幕尺寸可以被 8 整除,讓 8 這個數字各為恰當,可以按造 8的倍數放大或者縮小,甚至是 0.5 的倍數,都可以適用於 8 的點數上。

如何開始?

這裡有一些關於為設計師和開發人員實現8pt網格的文章。

CaesarChi

Web developer, focus on website fullstack, special JavaScript, and love sharing developing experience and communicate with developers. http://about.me/clonn