13個幫你提升開發效率的現代CSS框架

翻譯：瘋狂的技術宅
原文： https://1stwebdesigner.com/mo...

---

本文首發微信公衆號：前端先鋒
歡迎關注，天天都給你推送新鮮的前端技術文章

---

本文將向你介紹一系列頂級CSS框架。有些人可能據說過，也可能對有些人是全新的。但它們都提供了各類有用的先進功能，能夠改善你的工做流程。開始吧！

專一於 CSS 的框架

讓咱們先從一些專一於 CSS 的框架開始。你將找到全部類型的佈局和UI元素來本身構建項目的基礎。有些甚至可能包含一些 JavaScript 來幫你處理更復雜的功能。

Tailwind CSS

Tailwind與其餘框架的區別在於它沒有任何預構建的UI組件。相反，它更專一於程序自己，CSS類能夠幫助你在構建網站方面領先一步。尺寸、顏色和定位等元素對它來講纔是關鍵。

官網：https://tailwindcss.com

Bulma

Bulma是圍繞CSS Flexbox構建的，是一個免費的開源框架。你會發現它有許多易於定製的UI元素。它是模塊化的，這意味着你能夠只導入所需的元素 —— 如列或按鈕。

官網：https://bulma.io/

Picnic CSS

Picnic CSS 是一個超輕量級的框架，壓縮後小於10KB。它具備基於Flexbox的網格佈局以及大量的UI元素，能夠快速啓動項目。你甚至能夠找到一個簡單的導航欄和模態窗口。

官網：https://picnicss.com/

Materialize

Google 的 Material Design 的粉絲確定喜歡 Materialise。該框架基於流行的設計語言，包括大量基於 CSS 和 JavaScript 的元素。它聚焦於微交互，以使用戶界面更加友好。值得注意的是，Materialise 還支持自定義主題。

官網：https://materializecss.com/

Pure.css

Pure.css在壓縮後僅爲3.8KB，以移動優先的理念爲中心。它是模塊化的，因此你只需導入要使用的元素包。你還能夠下載和安裝許多經常使用佈局。

官網：https://purecss.io/

Base

Base 是一個模塊化框架，正如它的名字所要說明的，其旨在爲你的項目提供堅實的基礎。它創建在 Normalize.css 之上，提供易於定製的基本樣式。你在這裏找不到任何太多的東西，但這偏偏就就是重點所在！

官網：https://getbase.org/

mini.css

mini.css 是一個在輕量級和功能豐富之間取得平衡的包。它確實達到了目標，壓縮後大約10KB，同時擁有至關多的UI元素和佈局。經過它提供的文檔你能夠深刻了解這一切是如何運做的。

官網：https://minicss.org/

Concise CSS

Concise CSS 提供了一個基於實用程序的框架來使設計師「杜絕臃腫」，它可讓你快速入門。若是你須要UI元素的話能夠經過單獨的套件去添加它們。

官網：https://concisecss.com/

Mobi.css

Mobi.css 很是小（壓縮後僅 2.6KB），主要針對移動用戶。可是其內置主題和插件系統還有很大的增加空間。若是基本樣式不能知足你的要求，能夠在框架之上以模塊化的方式進行構建。

官網：http://getmobicss.com/

Spectre.css

Spectre.css 被稱爲「輕量級、響應式、現代化」，是一個基於Flexbox的框架。你會發現一些基本的佈局、UI和排版風格。此外還有許多功能組件（手風琴、彈出窗口、標籤等）都是用純CSS構建的。總的來講，它作到了很好的平衡性。

官網：https://picturepan2.github.io...

超越CSS範疇的框架

有些場景須要更強大的框架 —— 下面這些選擇能夠幫你完成這項工做。它們不只提供了大量基於 CSS 的元素，並且還能夠找到基於 HTML 和 JavaScript 的功能。從某種意義上來講，幾乎就像是從完成了一半的模板開始構建你的網站，你能夠經過自定義來知足本身的需求。

Bootstrap

Bootstrap 是由 Twitter 建立的，由於它維護得很好，並提供了一個龐大的預建功能庫，因此它幾乎無處不在。雖然你可使用默認設置，但 Bootstrap 也很是易於擴展。經過添加主題或自定義組件可以幫你進一步開發個性化的 UI。

官網：https://getbootstrap.com/

Foundation

Foundation 是模塊化組件庫，能夠爲你量身打造本身的項目。它有各類各樣的選項 —— 從響應式佈局到動畫。 Foundation 也有本身的 JavaScript 插件API。最後，該框架附帶了ARIA屬性和角色，用於構建具備可訪問性的站點。

官網：https://foundation.zurb.com/

Semantic UI

有時框架能夠包含僅對其原始開發人員有意義的 CSS 類名。Semantic UI 但願經過使用天然語言來改變敘述。邏輯是很容易遵循的，應該能夠加快開發速度。除語言以外，你還能夠找到超過 3,000 個主題變量 —— 根據須要，你能夠編輯或刪除全部這些變量。

官網：https://semantic-ui.com/

依賴框架更好地工做

完成你的項目須要作不少工做 —— 這就是框架存在的緣由。它爲咱們處理了一些繁重的工做，併爲以後的一切提供了基礎。

---

本文首發微信公衆號：前端先鋒

歡迎掃描二維碼關注公衆號，天天都給你推送新鮮的前端技術文章

---

歡迎繼續閱讀本專欄其它高贊文章：

• 12個使人驚歎的CSS實驗項目
• 必需要會的 50 個React 面試題
• 世界頂級公司的前端面試都問些什麼
• 11 個最好的 JavaScript 動態效果庫
• CSS Flexbox 可視化手冊
• 從設計者的角度看 React
• 過節很無聊？仍是用 JavaScript 寫一個腦力小遊戲吧！
• CSS粘性定位是怎樣工做的
• 一步步教你用HTML5 SVG實現動畫效果
• 程序員30歲前月薪達不到30K，該何去何從
• 14個最好的 JavaScript 數據可視化庫
• 8 個給前端的頂級 VS Code 擴展插件
• Node.js 多線程徹底指南
• 把HTML轉成PDF的4個方案及實現

---

• 更多文章...