新疆十一选五前二组选:13個加速開發效率的現代CSS框架

轉載2019-12-27 18:14:200878
第11期線上培訓班
本文將向你介紹一系列頂級CSS框架。有些人可能聽說過,也可能對有些人是全新的。但它們都提供了各種有用的先進功能,可以改善你的工作流程??及?!

新疆十一选五预测号码今天 www.envkt.com 專注于 CSS 的框架

讓我們先從一些專注于 CSS 的框架開始。你將找到所有類型的布局和UI元素來自己構建項目的基礎。有些甚至可能包含一些 JavaScript 來幫你處理更復雜的功能。

Tailwind CSS

1.png

Tailwind與其他框架的區別在于它沒有任何預構建的UI組件。相反,它更專注于程序本身,CSS類可以幫助你在構建網站方面領先一步。尺寸、顏色和定位等元素對它來說才是關鍵。

官網:https://tailwindcss.com

Bulma

2.png

Bulma是圍繞CSS Flexbox構建的,是一個免費的開源框架。你會發現它有許多易于定制的UI元素。它是??榛?,這意味著你可以只導入所需的元素 —— 如列或按鈕。

官網:https://bulma.io/

Picnic CSS

3.png

Picnic CSS 是一個超輕量級的框架,壓縮后小于10KB。它具有基于Flexbox的網格布局以及大量的UI元素,可以快速啟動項目。你甚至可以找到一個簡單的導航欄和模態窗口。

官網:https://picnicss.com/

Materialize

4.png

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

官網:https://materializecss.com/

Pure.css

5.png

Pure.css在壓縮后僅為3.8KB,以移動優先的理念為中心。它是??榛?,所以你只需導入要使用的元素包。你還可以下載和安裝許多常用布局。

官網:https://purecss.io/

Base

6.png

Base 是一個??榛蚣?,正如它的名字所要說明的,其旨在為你的項目提供堅實的基礎。它建立在 Normalize.css 之上,提供易于定制的基本樣式。你在這里找不到任何太多的東西,但這恰恰就就是重點所在!

官網:https://getbase.org/

mini.css

7.png

mini.css 是一個在輕量級和功能豐富之間取得平衡的包。它確實達到了目標,壓縮后大約10KB,同時擁有相當多的UI元素和布局。通過它提供的文檔你可以深入了解這一切是如何運作的。

官網:https://minicss.org/

Concise CSS

8.png

Concise CSS 提供了一個基于實用程序的框架來使設計師“杜絕臃腫”,它可以讓你快速入門。如果你需要UI元素的話可以通過單獨的套件去添加它們。

官網:https://concisecss.com/

Mobi.css

9.png

Mobi.css 非常?。ㄑ顧鹺蠼?2.6KB),主要針對移動用戶。但是其內置主題和插件系統還有很大的增長空間。如果基本樣式不能滿足你的要求,可以在框架之上以??榛姆絞澆泄菇?。

官網://getmobicss.com/

Spectre.css

10.png

Spectre.css 被稱為“輕量級、響應式、現代化”,是一個基于Flexbox的框架。你會發現一些基本的布局、UI和排版風格。此外還有許多功能組件(手風琴、彈出窗口、標簽等)都是用純CSS構建的。總的來說,它做到了很好的平衡性。

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

超越CSS范疇的框架

有些場景需要更強大的框架 —— 下面這些選擇可以幫你完成這項工作。它們不僅提供了大量基于 CSS 的元素,而且還可以找到基于 HTML 和 JavaScript 的功能。從某種意義上來說,幾乎就像是從完成了一半的模板開始構建你的網站,你可以通過自定義來滿足自己的需求。

Bootstrap

11.png

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

官網:https://getbootstrap.com/

Foundation

12.png

Foundation 是??榛榧?,可以為你量身打造自己的項目。它有各種各樣的選項 —— 從響應式布局到動畫。 Foundation 也有自己的 JavaScript 插件API。最后,該框架附帶了ARIA屬性和角色,用于構建具有可訪問性的站點。

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

Semantic UI

13.png

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

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

依賴框架更好地工作

完成你的項目需要做很多工作 —— 這就是框架存在的原因。它為我們處理了一些繁重的工作,并為之后的一切提供了基礎。

以上就是13個加速開發效率的現代CSS框架的詳細內容,更多請關注php中文網其它相關文章!

php中文網最新課程二維碼
  • 相關標簽:CSS
  • 本文轉載于:1stwebdesigner,如有侵犯,請聯系[email protected]刪除
  • 相關文章

    相關視頻


    網友評論

    文明上網理性發言,請遵守 新聞評論服務協議

    我要評論
  • 專題推薦

    推薦視頻教程
  • CSS3進階視頻教程CSS3進階視頻教程
  • CSS 4.2.4參考手冊CSS 4.2.4參考手冊
  • CSS視頻教程-玉女心經版CSS視頻教程-玉女心經版
  • HTML/CSS技術小知識每日分享HTML/CSS技術小知識每日分享
  • 視頻教程分類