9 個(gè)用于前端 Web 開發(fā)的開源 CSS 框架 | Linux 中國

時(shí)間：2023-05-26 08:51:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-05-26 08:51:02 來源：網(wǎng)站運(yùn)營

9 個(gè)用于前端 Web 開發(fā)的開源 CSS 框架 | Linux 中國：

探索開源 CSS 框架，找到適合你的項(xiàng)目的框架。

• 來源：https://linux.cn/article-12227-1.html
• 作者：Bryant Son
• 譯者：Xingyu.Wang

當(dāng)大多數(shù)人想到 Web 開發(fā)時(shí)，通常會(huì)想到 HTML 或 JavaScript。他們通常會(huì)忘記對(duì)網(wǎng)站的欣賞能力有更大影響的技術(shù)： 級(jí)聯(lián)樣式表(cascading style sheets)（簡稱 CSS）。據(jù)維基百科的說法，CSS 既是網(wǎng)頁中最重要的部分，也是最常被遺忘的部分，盡管它是萬維網(wǎng)的三大基石技術(shù)之一。

本文將探討九種流行的、強(qiáng)大的、開源的框架，是這些框架讓構(gòu)建漂亮的網(wǎng)站前端的 CSS 開發(fā)變得簡單明了。

Bootstrap

Bootstrap 無疑是最流行的 CSS 框架，它是所有前端 Web 設(shè)計(jì)的開端。Bootstrap 由 Twitter 開發(fā)，提供了可用性、功能性和可擴(kuò)展性。




Bootstrap 還提供了大量的例子來幫助你入門。




使用 Bootstrap，你可以將不同的組件和布局拼接在一起，創(chuàng)造出有趣的頁面設(shè)計(jì)。它還提供了大量詳細(xì)的文檔。




Bootstrap 的 GitHub 倉庫有超過 19000 個(gè)提交和 1100 個(gè)貢獻(xiàn)者。它基于 MIT 許可證，所以（和這個(gè)列表中的所有框架一樣）你也可以加入并貢獻(xiàn)。

PatternFly

PatternFly 是由 Red Hat 開發(fā)的一個(gè)開源的（MIT 許可證）CSS 框架。PatternFly 采取了與 Bootstrap 不同的方法：Bootstrap 是為任何對(duì)創(chuàng)建一個(gè)漂亮網(wǎng)站感興趣的人而設(shè)計(jì)的，而 PatternFly 主要針對(duì)企業(yè)級(jí)應(yīng)用開發(fā)者，它提供的組件，如條形圖、圖表和導(dǎo)航，對(duì)于創(chuàng)建強(qiáng)大的、指標(biāo)驅(qū)動(dòng)的儀表盤非常有吸引力。事實(shí)上，Red Hat 在其產(chǎn)品（如 OpenShift）的設(shè)計(jì)中也使用了這個(gè) CSS 框架。




除了靜態(tài) HTML 之外，PatternFly 還支持 ReactJS 框架，ReactJS 是 Facebook 開發(fā)的一個(gè)流行的 JavaScript 框架。

PatternFly 有許多高級(jí)組件，如條形圖、圖表、模態(tài)窗口和布局等，適用于企業(yè)級(jí)應(yīng)用。




PatternFly 的 GitHub 頁面列出了超過 1050 個(gè)提交和 44 個(gè)貢獻(xiàn)者。PatternFly 得到了很多人的關(guān)注，歡迎大家踴躍貢獻(xiàn)。

MDC Web

憑借其大獲成功的安卓平臺(tái)，谷歌以一個(gè)名為 Material Design 的概念制定了自己的標(biāo)準(zhǔn)設(shè)計(jì)準(zhǔn)則。Material Design 標(biāo)準(zhǔn)旨在體現(xiàn)在所有谷歌的產(chǎn)品中，這些標(biāo)準(zhǔn)也可以面向大眾，并且在 MIT 許可證下開源。




Material Design 有許多“用于創(chuàng)建用戶界面的交互式構(gòu)建塊”的組件。這些按鈕、卡片、背景等可用于創(chuàng)建網(wǎng)站或移動(dòng)應(yīng)用程序的任何類型的用戶界面。




維護(hù)人員為不同的平臺(tái)提供了詳盡的文檔。




還有分步教程，其中包含用于實(shí)現(xiàn)不同目標(biāo)的練習(xí)。




Material 組件的 GitHub 頁面承載了面向不同平臺(tái)的存儲(chǔ)庫，包括用于網(wǎng)站開發(fā)的 Material Web 組件（MDC Web）。MDC Web 有超過 5700 個(gè)提交和 349 個(gè)貢獻(xiàn)者。

Pure

Bootstrap、Patternfly 和 MDC Web 都是非常強(qiáng)大的 CSS 框架，但是它們可能相當(dāng)?shù)谋恐睾蛷?fù)雜。如果你想要一個(gè)輕量級(jí)的 CSS 框架，它更接近于自己編寫 CSS，但又能幫助你建立一個(gè)漂亮的網(wǎng)頁，可以試試 Pure.css。Pure 是一個(gè)輕量級(jí)的 CSS 框架，它的體積很小。它是由 Yahoo 開發(fā)的，在 BSD 許可證下開源。




盡管體積小，但 Pure 提供了建立一個(gè)漂亮網(wǎng)頁的很多必要的組件。




Pure 的 GitHub 頁面顯示它有超過 565 個(gè)提交和 59 個(gè)貢獻(xiàn)者。

Foundation

Foundation 號(hào)稱是世界上最先進(jìn)的響應(yīng)式前端框架。它提供了先進(jìn)的功能和教程，用于構(gòu)建專業(yè)網(wǎng)站。




該框架被許多公司、組織甚至政客使用，并且有大量的文檔可用。




Foundation 的 GitHub 頁面顯示有近 17000 個(gè)提交和 1000 個(gè)貢獻(xiàn)者。和這個(gè)列表中的大多數(shù)其他框架一樣，它也是在 MIT 許可證下提供的。

Bulma

Bulma 是一個(gè)基于 Flexbox 的開源框架，在 MIT 許可證下提供。Bulma 是一個(gè)相當(dāng)輕量級(jí)的框架，因?yàn)樗恍枰粋€(gè) CSS 文件。




Bulma 有簡潔明快的文檔，讓你可以很容易地選擇你想要探索的主題。它也有很多網(wǎng)頁組件，你可以直接拿起來在設(shè)計(jì)中使用。




Bulma 的 GitHub 頁面列出了 1400 多個(gè)提交和 300 多個(gè)貢獻(xiàn)者。

Skeleton

如果連 Pure 都覺得太重了，那么還有一個(gè)叫 Skeleton 的更輕量級(jí)框架。Skeleton 庫只有 400 行左右的長度，而且這個(gè)框架只提供了開始你的 CSS 框架之旅的基本組件。




盡管它很簡單，但 Skeleton 提供了詳細(xì)的文檔，可以幫助你馬上上手。




Skeleton 的 GitHub 列出了 167 個(gè)提交和 22 個(gè)貢獻(xiàn)者。然而，它不是很活躍，它的最后一次更新是在 2014 年，所以在使用之前可能需要一些維護(hù)。由于它是在 MIT 許可證下發(fā)布的，你可以自行維護(hù)。

Materialize

Materialize 是一個(gè)基于 Google 的 Material Design 的響應(yīng)式前端框架，帶有由 Materialize 的貢獻(xiàn)者開發(fā)的附加主題和組件。




Materialize 的文檔頁面非常全面，而且相當(dāng)容易理解。它的組件頁面包括按鈕、卡片、導(dǎo)航等等。




Materialize 是 MIT 許可證下的開源項(xiàng)目，它的 GitHub 列出了超過 3800 個(gè)提交和 250 個(gè)貢獻(xiàn)者。

Bootflat

Bootflat 是由 Twitter 的 Bootstrap 衍生出來的一個(gè)開源 CSS 框架。與 Bootstrap 相比， Bootflat 更簡單，框架組件更輕量級(jí)。




Bootflat 的文檔幾乎像是受到了宜家的啟發(fā) —— 它顯示的是每個(gè)組件的圖片，沒有太多的文字。




Bootflat 是在 MIT 許可證下提供的，其 GitHub 頁面包括 159 個(gè)提交和 8 個(gè)貢獻(xiàn)者。

你應(yīng)該選擇哪個(gè) CSS 框架？

對(duì)于開源的 CSS 框架，你有很多選擇，這取決于你想要的工具功能有多豐富或簡單。就像所有的技術(shù)決定一樣，沒有一個(gè)正確的答案，只有在給定的時(shí)間和項(xiàng)目中才有正確的選擇。

嘗試一下其中的一些，看看要在下一個(gè)項(xiàng)目中使用哪個(gè)。另外，我有沒有錯(cuò)過任何有趣的開源 CSS 框架？請(qǐng)?jiān)谙旅娴脑u(píng)論中分享你的反饋和想法。

---

via: https://opensource.com/article/20/4/open-source-css-frameworks

作者：Bryant Son 選題：lujun9972 譯者：wxy 校對(duì)：wxy

本文由 LCTT 原創(chuàng)編譯，Linux中國 榮譽(yù)推出