Table of Contents

如果平常有在接觸前端開發的朋友，應該都知道拜許多好用的工具與框架之賜，現在許多常見的元件與版面佈局已經不再像從前需要從無到有手動去刻了。這些元件和版面不僅對大多數使用者來說已經非常熟悉，易於理解和操作之外，對於開發者來說，還可以節省大量設計和開發時間，降低開發成本。

但如果實在有些想要特製的複雜 CSS 元件、或是單純想要練功，想從頭自己刻一個看看時，又可以從什麼地方觀察到這些元件的基礎構造呢？如果是我自己，在過去偶爾遇到這樣子的需求的話，就是直接去翻書、或是上網找特定的元件類型的關鍵字，看有沒有相關的資料或靈感。可是如果不幸這個需求是是急著要的，就沒有那個閒工夫慢慢調整與做實驗了......。直到有一天無意間發現了 CSS Layout ，簡直是開啟了人生的一道曙光阿！

有各種常見 CSS 空白版面與元件的 CSS Layout

我們先進入它的主頁：https://csslayout.io/ ，會發現這個網站上有著各式各樣的元件範例，當中條列了多達 91 種常見的網頁元件與版面布局，全部都是用純 CSS 實現的，完全沒有使用到 Javascript 效果或是 CSS hack、也沒有任何 css link。從最基礎的卡片 (card) 布局到複雜的網格 (grid) 系統，應有盡有。這些範例不僅提供了完整的 HTML 和 CSS 程式碼，還附有簡易的 demo 沙盒，讓你可以即時看到每個元件的具體呈現效果。

滿滿的純 CSS 元件範例，真是太瘋狂太讚了 (取自 @francoisz 畫面截圖)

適用場景

讀到這裡你可能會覺得有點疑惑，上面列出來的這些元件其實並不罕見 (甚至看起來有點陽春) ，為什麼我會說這是很棒的素材網站呢？我覺得吸引我的理由主要是下面這兩個：

  • 對初學者或是想要深化 CSS 技能的開發者來說，這裡的範例能夠提供實際而具體的學習案例。透過分析、模仿、和試圖修改這些範例，可以更快地掌握 CSS 布局的要點和技巧。有了對基本的版面架構的良好認知，之後要接觸其他現成的工具或框架都會變得很好上手。
  • 這些範例只使用到 html 和 CSS，雖然可能不是最華麗也不是最快的實作方式，對開發者而言卻是最為單純的做法。要知道引用的資源越多越複雜，版面發生問題時要修復的難度就會越大。此外這當中有些效果，是使用Javascript實作也可以、使用 CSS 也可以的。其中如果選擇用 CSS 實作的話，對網頁載入時的負擔也會減輕許多。

當然，使用這類現成的範例也要謹慎一些。畢竟不是所有的 CSS 布局都適用於任何情境，有時候你還是需要根據具體的專案需求進行調整和優化。而且考慮到跨瀏覽器和既有library 等相容性問題，最好不要將這些範例直接複製貼上到正式的商用產品裡面，而是當作實作上的一種靈感思路來參考就好。