基本

利用 Normalize.css,一個適用於 HTML5,替代 CSS 重置的方案。

Foundation(基礎)

Pure 中的所有模組都建立在 Normalize.css 之上。這是我們為在不同瀏覽器間維持某種程度的一致性所建立的基礎層級。你可以透過在你的頁面上加入這個 <link> 元素來導入 Normalize.css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/purecss@3.0.0/build/base-min.css">

關於 Normalize.css

Normalize.cssNicolas GallagherJonathan Neal 的一個開源專案。 用他們自己的話來說

Normalize.css 是一個小型的 CSS 檔案,在 HTML 元素的預設造型中提供更好的不同瀏覽器間的一致性。它是一個現代化、適用於 HTML5 的替代方案,用來取代傳統的 CSS 重置。

Normalize.css 提供了 完善的文件 和一個 詳細的指南,說明它與傳統的重置有什麼不同。

其他

除了 Normalize.css 規則以外,Pure 的基本模組包含了某些大多數網站都會使用的常見樣式。

隱藏元素

hidden 屬性加入 HTML 元素中,以透過 display: none !important; 來將它從螢幕中隱藏。

<input type="text" name="_csrf" hidden>

回應式圖片

.pure-img 類別名稱加入 <img> 元素中,以讓它與視窗縮放。當建立回應式網站時,這會很方便。

<img class="pure-img" src="...">

跳脫 Normalize

Normalize.css 是你專案一個很 棒的起點,但是有些 HTML 元素,例如表單、表格和選單,需要比 Normalize 所提供的更多造型。

我們為這些元素建立了一個更有觀點的外觀和體驗,但同時仍然保持它們的精簡程度,這麼一來你就能夠針對你網站或應用程式需求自訂它們。看看我們的 CSS,適用於 表單表格選單