于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秒后就可以獲取領取地址，送給每一位對編程感興趣的小伙伴

同瀏覽器對網頁默認的組件解析樣式不一致，而且不夠美觀，網頁樣式開發需要大量時間，今天介紹一款優雅的 CSS 框架。

關于 Pico.css

Pico.css 是一個簡單輕量化的 CSS UI 框架，最大的特點是樣式都基于 HMTL 原始的標簽名和內置的屬性，少用甚至是不用 class 來定義樣式，寫出來的代碼語義清晰，可維護性強，能夠幫助開發者構建自己的 UI 系統，也可以直接用于快速的小型項目中。

截止發文日期，Pico.css 在 Github 上已經有高達 3898 個 Star。

Pico.css 框架的特點

• 去 class 以及原生語義化的代碼。Pico.css 盡可能使用原生的 HTML 元素的標簽名稱來定義樣式，整個框架使用的 class 名稱不到10個
• 純 CSS 實現。所有組件都由一個 10KB（壓縮后）的 CSS 文件實現，無包管理，沒有依賴和外部文件，甚至連 javascript 代碼都沒有
• 響應式布局。內置響應式的柵格系統，在 PC / 手機 / 平板等不同屏幕大小的設備上排版美觀一致
• 支持深色主題。附帶兩個漂亮的顏色主題，根據用戶喜好一鍵啟用

開發上手

引入 Pico.css 最簡單直接的方式就是下載后直接引入一個樣式文件：

當然也可以通過 npm 安裝：

然后就可以編寫 html 代碼了。

HTML 原生語義化的編程

想要做一個輸入框和提交表單，往往需要這樣的代碼：

而使用 Pico.css，只需要：

Pico.css 內置了很多基礎的組件，包括常用表單控件、表格、彈窗、導航菜單、卡片等，代碼非常簡潔，比如實現一個美觀的進度條，只需要這點代碼：

使用深色主題

Pico.css 內置了淺色和深色兩套主題，使用方法非常簡單，給父級元素添加屬性data-theme。

官網還有很多代碼例子，比如編寫一個美觀大氣的登錄界面，html 代碼十分簡潔，仿佛回到了剛剛開始學習 html 語法的時代。

通過 CSS 文件的源碼，可以看到樣式的選擇器大多通過 HTML 元素標簽名、內置的屬性以及自定義屬性來命中，這樣就規避了常規的只使用 class 來區分的“命名地獄”，是一種非常好的網頁編程思路。

面向對純粹 HTML 有極致追求的開發者，Pico.css 還提供了 classless 版本，這個版本將一個 class 都沒有，完全使用元素標簽名和屬性編寫網頁。

使用 Pico.css 的原因

在項目中使用 Pico.css 源自于一次快速的營銷頁需求，需要做簡單的幾個帶有輸入交互的頁面，使用 bootstrap 這樣龐大的框架顯然有點笨重了，如果使用當前流行的能夠按需引入的 Vue UI 組件庫，又免不了要用 Vue.js 來工程化。只是做幾個簡單的頁面，沒有必要用中大型項目的標配，考慮到目前市面上大多數 UI 框架都過度封裝，堆疊了很多包含各種語義的 class 名，不僅會讓頁面加載變慢，而且會導致更長的樣式計算時間，最終還是找到了適合這樣場景的 Pico.css。

css 樣式的寫法很自由，目前前端開發存在一個趨勢，為了做精美的界面，需要花費大量的時間來寫樣式，為了樣式可以復用，絞盡腦汁給 class 起名字，甚至網上還有各種 class 命名規范，這可能導致了大量的樣式被覆蓋，很多時候 class 屬性的名稱，甚至比樣式的代碼還要多，極難維護。

Pico.css 的出現給這樣的開發現狀提供了一種新思路，不僅可以直接用在實際項目中，也能夠作為構建自己的 UI 庫的基礎樣式。

免費開源說明

Pico.css 是一個免費開源的項目，源碼基于 MIT 開源協議托管在 Github 上，任何個人和公司都可以免費下載使用。

關注我，持續分享高質量的免費開源、免費商用的資源。

↓↓點擊查看本次分享的網址。

Pico.css - 簡單優雅的純 CSS 開源 UI 框架，用原始的 HTML 元素標簽來做界面｜那些免費的磚