對於UI / UX設計人員而言，要製作一個在每個瀏覽器上都看起來不錯的漂亮網站不是一件容易的事。在創建網站佈局並使其美觀時，開發人員必須考慮所有Web瀏覽器和移動視圖。
恐懼始終存在於內部，如果設計在某個愚蠢的瀏覽器上某個地方可怕地崩潰，該怎麼辦！多虧了 CSS使開發人員的生活變得無限輕鬆的框架。
CSS框架消除了大部分麻煩，如今，開發人員無法想象沒有CSS框架的代碼。這些框架不僅節省了大量時間，而且還有助於以更好，更快的方式構建漂亮的響應式Web應用程序。
這些框架提供了基本結構，包括網格，交互式UI模式，Web排版，工具提示，按鈕，表單元素，圖標。提供了現成的解決方案，這有助於快速構建網站。您不需要從頭開始，也可以重用項目中的代碼。
現在有一個問題，哪個框架最適合您？如果您不熟悉前端開發，那麼選擇框架可能會有些棘手。
老實說，每個CSS框架都有其優缺點，因此，這取決於您的特定需求。在本文中，我們將討論一些適用於大多數行業開發人員的流行CSS框架。
我們在過濾這些框架時會牢記它們的優缺點。讓我們討論這些框架。
1、Bootstrap
地址：https://getbootstrap.com/
您可能肯定已經聽說過此框架，即使這是您的第一個工作。該框架是第一個推廣“智能手機優先”理念的框架。Bootstrap是世界上最流行的CSS框架，它於2011年由Twitter引入。
Bootstrap在大規模構建響應式設計方面有很大幫助。當包含相關的引導程序類時，它將自動針對不同的屏幕尺寸調整設計。它提供了大量的插件和主題生成器。
該框架的當前版本是Bootstrap 4，其中包括一些其他功能，例如新的配色方案，新的修改器，新的實用程序類。版本4是使用SASS構建的，這意味著Bootstrap現在已經支持LESS和SASS。
優點：
快速成型
大型生態系統
大量的組件
LESS和SASS支持
簡單的文檔和較低的學習曲線
由Twitter開發，因此對社區有長期的長期信任。
2、Foundation
地址：https://get.foundation/
開發人員說，如果編程是一種宗教，那麼基金會和Bootstrap的傢伙將處於障礙的兩邊。Foundation是世界上另一個使用最廣泛的一流CSS框架。許多公司（例如Facebook，eBay，Mozilla，Adobe甚至Disney）都使用它。該框架是基於Saas（如引導程序）構建的。它更加複雜，靈活並且易於定製。它也帶有CLI，因此很容易與模塊捆綁器一起使用。它提供了Fastclick.js工具，可在移動設備上更快地呈現。
優點：
創建響應式設計
強大的電子郵件框架
極高的靈活性
在線網絡研討會培訓支持。
易於定製。
提供了完整的模塊化工具集，可讓您解決幾乎所有的界面任務
UI組件及更多：先進的成像系統，定價表組件，表單驗證，垂直時間軸佈局，RTL支持等等。
3、Bulma
地址：https://bulma.io/
與其他CSS框架相比，Bulma是市場上相對較新的框架，但Bulma設法在短時間內獲得了用戶的很多關注。這個免費的開源CSS框架基於Flexbox佈局模型。最好的事情是，它完全基於CSS，根本不需要javascript。全球有200,000多名開發人員在使用它。它反應靈敏，輕巧，並且遵循“移動優先”的方法。
優點：
所有CSS類名稱均按邏輯命名，因此易於學習和記住語法。
純CSS，無JavaScript
大社區
模塊化：使用Saas構建，您可以通過僅導入所需的必要功能來設計界面。
大量組件，例如垂直對齊解決方案，佈局以及媒體對象
4、Pure
地址：https://purecss.io/
由Yahoo開發的Pure是一個輕量級的響應CSS框架。它使用Normalize.css構建，可幫助使用網格和菜單創建響應式佈局。可以將其分為不同的CSS模塊，並且可以根據您的需求和偏好導入這些模塊。因此，如果僅需要網格系統，則無需導入整個CSS並增加站點的加載時間。與Bootstrap不同，它不允許創建固定的佈局。
優點：
移動友好
完全基於CSS，因此很容易學習。
它提供5點，2點，24點等的變化。因此，在創建網格和列系統時可以更加靈活地使用它。
5、Semantic UI
地址：https://semantic-ui.com/
該框架以其令人難以置信的主題效果以及簡單優雅的設計而聞名。語義UI是使用人類友好的HTML的響應框架，它允許您創建一個獨特而美觀的網站，而無需進行多次更改。它提供3000多個主題變量和50多個UI組件。它還支持第三方庫，如React，Meteor，Ember，React等。
優點：
友好的類名：它使用人類友好的HTML，因此可以使用自然語言進行編碼。
與Bootstrap 4和其他框架相比更具吸引力的佈局。
僅加載必要的組件，從而減少了下載時間和文件大小
廣泛的組件
6、Tailwind CSS
地址：https://tailwindcss.com/
Tailwind CSS是一個靈活且高度可定製的低級CSS框架。Tailwind用PostCSS編寫並用JavaScript配置。您將使用低級實用程序類來自定義設計，而不是使用預先構建的組件，從而使您可以完全控制網站的最終制作方式。從正面尺寸到間距，從斷點到陰影，從顏色到邊框尺寸都可以自定義。例如，您可以為按鈕賦予藥丸，輪廓和3D外觀。您可以個性化每個方面，並且可以以獨特的樣式創建設計，該樣式看起來絕對不同於其他框架，例如Bootstrap或UI套件。
優點：
易於定製
實用程序類
帶有響應式選項
7、UI kit
地址：https://getuikit.com/
這個強大的CSS框架以極簡主義功能而聞名。UI Kit是一個輕量級的最小CSS框架，幾乎包含其他框架的所有功能。
您可以使用最大的空白空間和許多UI組件（例如SVG圖標，進度條，圖像製作器等）來創建超乾淨，優雅且美觀的Web界面。有許多令人難以置信的組件，統一的樣式和自定義選項。您可以使用Nestable之類的組件創建高級界面。它使用可靠且無衝突的命名約定。您還可以使用純HTML設計複雜的基於flexbox的佈局。
優點：
極簡主義
大量有用的UI組件集合。
與更少和更少兼容
包含JavaScript
對任何設備的適應性
8、Materialize CSS
地址：https://materializecss.com/
如果您喜歡使用材料設計，那麼您絕對應該檢查一下這個框架。它由Google於2014年創建，該框架對於想要設計網站或Android Web應用程序的人來說是一個很好的解決方案。許多Google產品都在此框架上實現，例如YouTube，Gmail，Google雲端硬盤和Google文檔。
它帶有一些現成的組件和類，使您無需花費太多精力就可以儘快完成工作。該框架使用由Bootstrap建立的基於12列網格的佈局，響應性動畫和過渡，填充以及諸如燈光和陰影之類的深度效果。使用其預建的入門模板，您可以以最少的設置時間來設計網站。
優點：
材料設計
引導網格
大量的組件選擇
輕鬆定製
與Sass兼容
9、Skeleton
地址：http://getskeleton.com/
顧名思義，Skeleton是最簡單，響應最少的CSS框架。它僅包含400行代碼，但是提供了在項目中使用的多種選擇。諸如網格，版式，按鈕，表單，列表，媒體查詢，表格等功能使您可以輕鬆創建複雜的網站。我們已經在CSS框架中提到了它，但是更少的代碼行沒有將自身定義為CSS框架，庫甚至模塊。它實際上是一個樣板，對小型項目或作為UI / UX開發人員開始其職業的人都非常有用。它僅帶有有限數量的標準HTML元素，但這足以開始使用簡單而優雅的網站。
優點：
移動友好
簡單易學
10、Miligram
地址：https://milligram.io/
顧名思義，這是另一個輕量級CSS框架，旨在更快地創建網站。框架的大小僅為2Kb，但它具有許多功能和Web開發工具來滿足您的需求。它為開發人員提供了靈活性，並允許他們使用CSS3規範提供的所有功能。您還可以使用幾行自定義CSS進行擴展。
優點：
基於Flexbox網格
超級設計主題
我們已經提到了一些CSS框架，這些框架在開發人員中非常流行，但是您也可以嘗試其他一些CSS框架。其他一些流行的框架包括Susy，Animate.css，Paper CSS，NES.css，Base，Tent CSS，Simple Grid，Spectre，Mustard UI，Picnic CSS，Mini.css，Gumby等。
多年開發老碼農福利贈送：網頁製作，網站開發，web前端開發，從最零基礎開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端小程序項目實戰【視頻＋工具＋電子書＋系統路線圖】都有整理，需要的夥伴可以私信我，發送“前端”等3秒後就可以獲取領取地址，送給每一位對編程感興趣的小夥伴
