一、tailwind

Tailwind CSS 是一個功能類優先的 CSS 框架，它集成了諸如flex, pt-4, text-center 和 rotate-90 這樣的的類，它們能直接在腳本標記語言中組合起來，構建出任何設計。

主要特性：

• 組件化
• 體積小，性能高
• 響應式

傳送門：tailwindcss.com/

二、Tachyons

Tachyons具備了當前流行的css框架的優點，無需自己編寫大量 CSS。輕量、可定制化和拓展等。Tachyons有極其細化的原子類，只需要在類名中添加屬性新的樣式即可。不必擔心命名沖突，也無需擔心樣式覆蓋，這樣可以更能直觀的看出樣式的具體內容。

傳送門：tachyons.io/

三、Skeleton

如果您正在著手一個較小的項目，或者只是覺得不需要大型框架的所有實用程序，則應該使用 Skeleton。

在Skeleton css官網中，介紹了三個Skeleton的三大優勢：

• Light as a feather at ~400 lines & built with mobile in mind.（超輕量級, 為移動端打造）
• Styles designed to be a starting point, not a UI framework.（樣式設計為起點，而非 UI 框架）
• Quick to start with zero compiling or installing necessary.

（快速入門，零編譯或安裝必要）

根據Skeleton的特點和優勢，可以把它的典型應用場景歸納為：

• css學習和demo練習；
• 創建小型的響應式手機應用；

傳送門：getskeleton.com/

四、Foundation

Foundation 是由產品設計公司 ZURB 制作的自適應前端框架。 相比于其他同類型工具，Foundation的移動化方案更加出色。借鑒響應式Web設計的思路和方法，Foundation對內容結構在不同類型設備中的的呈現方式進行了相應的預設。

傳送門：get.foundation/

五、bootstrap

Bootstrap仍然是最流行的 CSS 框架之一。他們提供了大量的文檔、示例和演示，可以幫你快速進行響應式 Web 開發。該框架的當前版本是 Bootstrap 5，相較于V4，做出了一些改變：

• 擁有了自己的SVG圖標庫
• 不再支持jquery
• 不再支持IE
• 增加了css自定義屬性
• 增強的網格系統
• Forms可被更新

傳送門：getbootstrap.com/

六、UIkit

相較于其他通用的css框架，UIkit有一些這些框架沒有的組件，比如

• Lightbox（利用模態對話框為圖片和視頻創建一個別致的燈箱）
• Parallax（依賴于頁面滾動條位置的動態 CSS 特性）
• Nestable（創建可以通過拖拽排序的可嵌套式列表）
• Sortable（創建可排序的網格和列表重新來排列元素的順序）

傳送門：getuikit.com/

七、Semantic UI

Semantic意為語義，由于Semantic UI類在命名上清晰易懂，因此開發人員不但節省了學習的時間，也讓手頭上項目的開發更快、更直觀。此外布局的多樣性是Semantic UI的另一個優勢。通過不同的主題，您可以輕松地為各種項目找到必要的組件。

Semantic UI存在一些缺點，更新頻率相較于其他熱門框架較低，并且在某些設備運行響應能力一般。

傳送門：semantic-ui.com/

八、Bulma

Bulma 是一個基于 Flexbox 的現代化的 CSS 框架。它提供了隨時可用的前端組件，您可以輕松地組合這些組件來構建響應式 Web 界面。

和bootstrap相比，兩者最大的區別是，bulma是純css，沒有js，bootstrap有JS。這里舉個列布局的例子：

添加columns容器

添加任意數量的column元素

無論列數是多少，每一列的寬度都相等。

<div class="columns"><div class="column">1</div><div class="column">2</div><div class="column">3</div><div class="column">4</div><div class="column">5</div> </div> 復制代碼

傳送門：bulma.io/

九、Picnic

Picnic是一個輕量級CSS框架，壓縮后的大小不到10kb。該框架最大的特點就是具有多個交互式組件，包括柵格、表單、選項卡、工具提示等等，可以幫助開發人員快速創建響應式網站和web應用程序。

Picnic CSS是一個用Sass寫的輕量級UI框架，它能更容易的編輯和自定義變量，如顏色和長度。它還有一些不錯的純CSS寫的UI組件，如模態窗口和內容滑塊。

傳送門：picnicss.com/

十、NES.css

NES.css 模仿了8 位 Nintendo Entertainment System 圖形，營造出復古的游戲外觀：

NES.css 只需要 CSS，不依賴任何 JavaScript。作為每個游戲發燒友都會大呼：愛了！

今天的內容就分享到這了，小編最后還為大家準備了豐厚的前端大禮包【加君羊：581286372】幫助大家更好的學習！

總結

以上是生活随笔為你收集整理的10个好用的的css框架的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。