文章目錄
1、Bootstrap
2、 Foundation
3. Materialize CSS
4. Semantic UI
5. Bulma
6. UIKit
7. PureCSS
8. Tailwind
9. Ant Design
10.Tachyons

css 框架

1、Bootstrap

作為最受歡迎的工具之一，Bootstrap在Web開發(fā)人員眼中已成為了業(yè)界領(lǐng)先的前端框架。為了使Web開發(fā)人員能夠構(gòu)建出不同的用戶界面組件，Bootstrap能夠?qū)SS、Javascript和HTML代碼組合到一起。

2、 Foundation

ZURB于2011年9月設(shè)計出了Foundation。與其他CSS框架相比，Foundation不但擁有先進而復(fù)雜的界面，而且提供了響應(yīng)式菜單，以及與各種設(shè)備和瀏覽器的兼容性。您還可以使用CSS框架，來輕松地按需設(shè)置各種菜單樣式。

3. Materialize CSS

以Google為基礎(chǔ)的Materialize CSS融合了JavaScript、CSS和HTML等各種組件。它不但具有一定的響應(yīng)能力，而且存在較少的瀏覽器兼容性問題。如果您希望構(gòu)建一個優(yōu)雅的UI，那么Materialize就可以通過大量的自定義CSS，以及多種配色方案，來幫助您完成獨特的網(wǎng)站設(shè)計。

4.Semantic UI

作為一名全棧開發(fā)人員，Jack Lukic使用自然語言原理創(chuàng)建了Semantic UI框架。憑借著jQuery和LESS功能，Semantic UI提供了光滑、平整且精細的外觀，以及輕量級的用戶體驗。它的社區(qū)雖然相對較小，但是其成員既熱情又忠誠。他們的目標是創(chuàng)建一種共享的UI語言，以賦予開發(fā)人員和設(shè)計人員同樣的權(quán)利。目前，Semantic UI社區(qū)已經(jīng)擁有約3000多個主題。

5、 Bulma

作為一個基于Flexbox的開源框架，Bulma在全世界擁有超過20萬名開發(fā)用戶。它可以通過可視化的組件，讓開發(fā)人員了解其運作的過程。該前端框架通過各種技術(shù)，為前端開發(fā)人員提供了一種內(nèi)聚(cohesive)的界面。此外，由于它使用了響應(yīng)式模板，因此我們可以更好地專注于網(wǎng)站的內(nèi)容，而不是代碼的編寫。

6、 UIKit

UIKit是一個模塊化的輕量級前端CSS框架。它非常適合于快速開發(fā)那些功能強大的Web界面。憑借著CSS、HTML和JS組件的全面集合，它能夠讓前端框架既容易擴展，又方便被定制使用。UIKit是用于開發(fā)iOS應(yīng)用最廣泛的前端框架之一。它定義了諸如：按鈕、標簽、導(dǎo)航控制器和表格視圖等核心組件。

7. PureCSS

由Yahoo開發(fā)的PureCSS，提供了一組體積小、且具有快速響應(yīng)能力的CSS模塊。它非常適合開發(fā)那些界面美觀且功能不同的項目。PureCSS具有快速響應(yīng)能力的內(nèi)置設(shè)計，以及最小體積的標準化CSS，而且它們都是免費的!

8、Tailwind

Tailwind是一款utility-first的框架，可以被用于快速地構(gòu)建UI。作為一個utility-based的CSS庫，它比那些語義和精益標記(lean markup)更注重實用性和速度。在創(chuàng)建網(wǎng)站時，您只需要確定項目的范圍，而無需自行編寫CSS。雖然Tailwind并不提供默認的主題，您也找不到任何內(nèi)置的UI組件，但是您可以使用預(yù)設(shè)計的部件菜單，來構(gòu)建目標網(wǎng)站。

9. Ant Design

由阿里巴巴開發(fā)的Ant Design是一種Javascript庫類型的ReactJS組件庫。通過將屏幕區(qū)域分為24列網(wǎng)格，它增加了用戶對于可見區(qū)域的自定義能力。同時，它通過各種填充(filled)和輪廓(outlined)圖標，來滿足不同的應(yīng)用程序的要求。

10、 Tachyons

與其他流行的前端框架不同，Tachyons旨在將CSS規(guī)則分解為小型的、可管理的、以及可復(fù)用的部件。Tachyons可以幫助開發(fā)人員創(chuàng)建出具有高度可讀性、能夠快速加載和響應(yīng)的網(wǎng)站，而且無需使用大量CSS代碼。

---

沖

總結(jié)

以上是生活随笔為你收集整理的10 种常用的CSS框架，收藏一下的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。