大多數(shù)人想到Web開發(fā)時(shí)，通常會(huì)想到HTML或JavaScript，往往忽略了CSS，根據(jù)Wikipedia的說法，CSS既是網(wǎng)頁(yè)中最重要也是最常被遺忘的部分之一，盡管它是萬(wàn)維網(wǎng)的三大基礎(chǔ)技術(shù)之一。

今天就和大家分享9個(gè)流行的、強(qiáng)大的前端開源框架，幫助你輕松構(gòu)建漂亮的網(wǎng)站前端。

1、Bootstrap

Bootstrap無(wú)疑是最流行的CSS框架，它是最早的Web前端框架，由Twitter開發(fā)。Bootstrap還提供了許多示例來幫助你入門。

使用Bootstrap，你可以將不同的組件和布局組合在一起，從而創(chuàng)建有趣的頁(yè)面設(shè)計(jì)。它還提供了大量詳細(xì)的文檔。目前在Github上已經(jīng)有1100多個(gè)貢獻(xiàn)者，19000多個(gè)提交。（Github地址：https://github.com/twbs/bootstrap）

2、PatternFly

PatternFly是Red Hat的開源CSS框架，和Bootstrap不同的是，Bootstrap是為那些想要?jiǎng)?chuàng)建漂亮網(wǎng)站的人而設(shè)計(jì)的，而PatternFly主要專注于企業(yè)應(yīng)用程序開發(fā)人員，提供諸如條形圖、圖表、導(dǎo)航之類的組件，實(shí)際上Red Hat就是使用它創(chuàng)建了OpenShift。

除了靜態(tài)HTML，PatternFly還支持ReactJS框架，這是Facebook開發(fā)的流行JavaScript框架。PatternFly具有許多適用于企業(yè)級(jí)應(yīng)用程序的高級(jí)組件，如條形圖，圖表，模式和布局。

PatternFly在GitHub上一共有1,050多個(gè)提交和44個(gè)貢獻(xiàn)者。（Github地址：https://github.com/patternfly/patternfly）

3、Material Components for the web

Material Components for the web(MDC Web)，是谷歌專為Web設(shè)計(jì)的全新前端框架。MDC Web可幫助開發(fā)人員執(zhí)行Material Design，組件由谷歌的核心工程師團(tuán)隊(duì)和UX設(shè)計(jì)人員開發(fā)。這些組件可以建立可靠的開發(fā)工作流程，以構(gòu)建美觀且功能強(qiáng)大的Web項(xiàng)目。

MDC Web在Github上共有5700多個(gè)提交和349個(gè)貢獻(xiàn)者。（Github地址：https://github.com/material-components/material-components-web）

4、Pure

Bootstrap，Patternfly和MDC Web是功能非常強(qiáng)大的CSS框架，但它們可能非常繁瑣和復(fù)雜。如果你想要一個(gè)輕量級(jí)的CSS框架，可以嘗試Pure.css，它本身更接近于CSS編程，但又可以幫助你構(gòu)建一個(gè)不錯(cuò)的網(wǎng)頁(yè)。Pure是具有最小占用空間的輕量級(jí)CSS框架，它由Yahoo開發(fā)，根據(jù)BSD許可是開源的。

Pure在Github上共有565多個(gè)提交和59個(gè)貢獻(xiàn)者。（Github地址：https://github.com/pure-css/pure）

5、Foundation

Foundation聲稱是世界上最先進(jìn)的響應(yīng)式前端框架。它提供了用于構(gòu)建專業(yè)網(wǎng)站的高級(jí)功能和教程。許多公司，組織都使用該框架，并且該框架具有大量可用的文檔。

Foundation在Github上有將近17000個(gè)提交和1000個(gè)貢獻(xiàn)者。（Github地址：https://github.com/foundation/foundation-sites）

6、Bulma

Bulma是一個(gè)基于Flexbox的開源框架，可根據(jù)MIT許可證開源。Bulma是一個(gè)非常輕量級(jí)的框架，因?yàn)樗恍枰粋€(gè)CSS文件。Bulma擁有簡(jiǎn)潔明了的文檔，可輕松選擇你想要的主題。它還具有許多Web組件，你可以在設(shè)計(jì)中使用它們。

Bulma在Github上有1400多個(gè)提交和300個(gè)貢獻(xiàn)者。（Github地址：https://github.com/jgthms/bulma）

7、Skeleton

如果說還有什么框架比Pure更加輕量級(jí)，那一定是Skeleton。Skeleton庫(kù)只有大約400行，并且該框架僅提供一些基本的CSS框架組件。盡管如此，Skeleton還是提供了詳細(xì)的文檔來幫助你快速上手。

Skeleton在Github上共有167個(gè)提交和22個(gè)貢獻(xiàn)者，但它不是最活躍的項(xiàng)目，它最新一次的更新是在2014年。（Github地址：https://github.com/dhg/Skeleton）

8、Materialize

Materialize 是一個(gè)基于 Material Design風(fēng)格的一個(gè)現(xiàn)代化的響應(yīng)式前端框架，解決了最繁重的工作，結(jié)合你的自定義組件，為你提供默認(rèn)的樣式。Materialize的文檔頁(yè)面非常全面，并且很容易遵循。其組件頁(yè)面包括按鈕，卡片，導(dǎo)航等。

Materialize在Github上共有3800多個(gè)提交和250個(gè)貢獻(xiàn)者。（Github地址：https://github.com/Dogfalo/materialize）

9、Bootflat

Bootflat是從Twitter的Bootstrap派生的開源CSS框架。與Bootstrap相比，Bootflat更簡(jiǎn)單，并且更加輕量級(jí)。Bootflat的文檔似乎幾乎受到了IKEA的啟發(fā)，大部分都是圖像，沒有太多的文字。

Bootflat是在MIT許可證下開源的，在Github上有159個(gè)提交和8個(gè)貢獻(xiàn)者。（Github地址：https://github.com/bootflat/bootflat.github.io）