13個加速開發效率的現代化CSS框架

本文將向你介紹一系列頂級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

#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/spectre/

#超越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/############依賴框架更好地工作############完成你的專案需要做很多工作—— 這就是框架存在的原因。它為我們處理了一些繁重的工作，並為之後的一切提供了基礎。 ###

以上是13個加速開發效率的現代化CSS框架的詳細內容。更多資訊請關注PHP中文網其他相關文章！