9 個用於前端 Web 開發的開源 CSS 框架
當大多數人想到 Web 開發時，通常會想到 HTML 或 JavaScript。他們通常會忘記對網站的欣賞能力有更大影響的技術： 級聯樣式表 （簡稱 CSS）。據維基百科的說法，CSS 既是網頁中最重要的部分，也是最常被遺忘的部分，儘管它是萬維網的三大基石技術之一。
本文將探討九種流行的、強大的、開源的框架，是這些框架讓構建漂亮的網站前端的 CSS 開發變得簡單明了。
| 名稱 | 介紹 | 許可證 |
|---|---|---|
| Bootstrap | 最流行的 CSS 框架，來自 Twitter | MIT |
| PatternFly | 開源框架，來自 Red Hat | MIT |
| MDC Web | Material Design 組件開源框架，來自 Google | MIT |
| Pure | 開源框架，來自 Yahoo | BSD |
| Foundation | 前端框架，來自 Zurb 基金會 | MIT |
| Bulma | 現代 CSS 框架，基於 Flexbox | MIT |
| Skeleton | 輕量級 CSS 框架 | MIT |
| Materialize | 基於 Material Design 的 CSS 框架 | MIT |
| Bootflat | 開源 Flat UI 工具，基於 Bootstrap 3.3.0 | MIT |
Bootstrap
Bootstrap 無疑是最流行的 CSS 框架，它是所有前端 Web 設計的開端。Bootstrap 由 Twitter 開發，提供了可用性、功能性和可擴展性。
Bootstrap 還提供了大量的例子來幫助你入門。
使用 Bootstrap，你可以將不同的組件和布局拼接在一起，創造出有趣的頁面設計。它還提供了大量詳細的文檔。
Bootstrap 的 GitHub 倉庫有超過 19000 個提交和 1100 個貢獻者。它基於 MIT 許可證，所以（和這個列表中的所有框架一樣）你也可以加入並貢獻。
PatternFly
PatternFly 是由 Red Hat 開發的一個開源的（MIT 許可證）CSS 框架。PatternFly 採取了與 Bootstrap 不同的方法：Bootstrap 是為任何對創建一個漂亮網站感興趣的人而設計的，而 PatternFly 主要針對企業級應用開發者，它提供的組件，如條形圖、圖表和導航，對於創建強大的、指標驅動的儀錶盤非常有吸引力。事實上，Red Hat 在其產品（如 OpenShift）的設計中也使用了這個 CSS 框架。
除了靜態 HTML 之外，PatternFly 還支持 ReactJS 框架，ReactJS 是 Facebook 開發的一個流行的 JavaScript 框架。
PatternFly 有許多高級組件，如條形圖、圖表、模態窗口和布局等，適用於企業級應用。
PatternFly 的 GitHub 頁面列出了超過 1050 個提交和 44 個貢獻者。PatternFly 得到了很多人的關注，歡迎大家踴躍貢獻。
MDC Web
憑藉其大獲成功的安卓平台，谷歌以一個名為 Material Design 的概念制定了自己的標準設計準則。Material Design 標準旨在體現在所有谷歌的產品中，這些標準也可以面向大眾，並且在 MIT 許可證下開源。
Material Design 有許多「用於創建用戶界面的互動式構建塊」的組件。這些按鈕、卡片、背景等可用於創建網站或移動應用程序的任何類型的用戶界面。
維護人員為不同的平台提供了詳盡的文檔。
還有分步教程，其中包含用於實現不同目標的練習。
Material 組件的 GitHub 頁面承載了面向不同平台的存儲庫，包括用於網站開發的 Material Web 組件（MDC Web）。MDC Web 有超過 5700 個提交和 349 個貢獻者。
Pure
Bootstrap、Patternfly 和 MDC Web 都是非常強大的 CSS 框架，但是它們可能相當的笨重和複雜。如果你想要一個輕量級的 CSS 框架，它更接近於自己編寫 CSS，但又能幫助你建立一個漂亮的網頁，可以試試 Pure.css。Pure 是一個輕量級的 CSS 框架，它的體積很小。它是由 Yahoo 開發的，在 BSD 許可證下開源。
儘管體積小，但 Pure 提供了建立一個漂亮網頁的很多必要的組件。
Pure 的 GitHub 頁面顯示它有超過 565 個提交和 59 個貢獻者。
Foundation
Foundation 號稱是世界上最先進的響應式前端框架。它提供了先進的功能和教程，用於構建專業網站。
該框架被許多公司、組織甚至政客使用，並且有大量的文檔可用。
Foundation 的 GitHub 頁面顯示有近 17000 個提交和 1000 個貢獻者。和這個列表中的大多數其他框架一樣，它也是在 MIT 許可證下提供的。
Bulma
Bulma 是一個基於 Flexbox 的開源框架，在 MIT 許可證下提供。Bulma 是一個相當輕量級的框架，因為它只需要一個 CSS 文件。
Bulma 有簡潔明快的文檔，讓你可以很容易地選擇你想要探索的主題。它也有很多網頁組件，你可以直接拿起來在設計中使用。
Bulma 的 GitHub 頁面列出了 1400 多個提交和 300 多個貢獻者。
Skeleton
如果連 Pure 都覺得太重了，那麼還有一個叫 Skeleton 的更輕量級框架。Skeleton 庫只有 400 行左右的長度，而且這個框架只提供了開始你的 CSS 框架之旅的基本組件。
儘管它很簡單，但 Skeleton 提供了詳細的文檔，可以幫助你馬上上手。
Skeleton 的 GitHub 列出了 167 個提交和 22 個貢獻者。然而，它不是很活躍，它的最後一次更新是在 2014 年，所以在使用之前可能需要一些維護。由於它是在 MIT 許可證下發布的，你可以自行維護。
Materialize
Materialize 是一個基於 Google 的 Material Design 的響應式前端框架，帶有由 Materialize 的貢獻者開發的附加主題和組件。
Materialize 的文檔頁面非常全面，而且相當容易理解。它的組件頁面包括按鈕、卡片、導航等等。
Materialize 是 MIT 許可證下的開源項目，它的 GitHub 列出了超過 3800 個提交和 250 個貢獻者。
Bootflat
Bootflat 是由 Twitter 的 Bootstrap 衍生出來的一個開源 CSS 框架。與 Bootstrap 相比， Bootflat 更簡單，框架組件更輕量級。
Bootflat 的文檔幾乎像是受到了宜家的啟發 —— 它顯示的是每個組件的圖片，沒有太多的文字。
Bootflat 是在 MIT 許可證下提供的，其 GitHub 頁面包括 159 個提交和 8 個貢獻者。
你應該選擇哪個 CSS 框架？
對於開源的 CSS 框架，你有很多選擇，這取決於你想要的工具功能有多豐富或簡單。就像所有的技術決定一樣，沒有一個正確的答案，只有在給定的時間和項目中才有正確的選擇。
嘗試一下其中的一些，看看要在下一個項目中使用哪個。另外，我有沒有錯過任何有趣的開源 CSS 框架？請在下面的評論中分享你的反饋和想法。
via: https://opensource.com/article/20/4/open-source-css-frameworks
作者：Bryant Son 選題：lujun9972 譯者：wxy 校對：wxy
本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive
對這篇文章感覺如何？
You may also like
More in:Linux中國
如何通過 VLC 使用字幕
Unix 桌面：在 Linux 問世之前
Valve 對於 Ubuntu 的 Snap 版本的 Steam 並不滿意：原因何在
Wine 9.0 發布，實驗性地加入了 Wayland 驅動
