国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

xumenger / 1884人閱讀

摘要：官網是圍繞構建的，是一個免費的開源框架。官網在壓縮后僅為，以移動優先的理念為中心。官網被稱為輕量級響應式現代化，是一個基于的框架。通過添加主題或自定義組件能夠幫你進一步開發個性化的。官網有時框架可以包含僅對其原始開發人員有意義的類名。

翻譯：瘋狂的技術宅
原文：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個方案及實現

更多文章...

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114626.html

相關文章

  • 程序員練級攻略（2018）：前端基礎和底層原理

    摘要：下面我們從前端基礎和底層原理開始講起。對于和這三個對應于矢量圖位圖和圖的渲染來說，給前端開發帶來了重武器，很多小游戲也因此蓬勃發展。這篇文章受眾之大，后來被人重新整理并發布為，其中還包括中文版。 showImg(https://segmentfault.com/img/bVbjM5r?w=1142&h=640); 想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你！ 這...

    widuu 評論0 收藏0

  • 關于BOOTSTRAP的整理和理解

    摘要：規范名稱定義，便于維護。譬如關于的定義在格式化的中會聲明為，而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小。基于版本的使用目前使用較廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設計理念，而且需要更酷的頁面特效和用戶體驗。作為開發者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...

    amc 評論0 收藏0

  • 關于BOOTSTRAP的整理和理解

    摘要：規范名稱定義，便于維護。譬如關于的定義在格式化的中會聲明為，而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小。基于版本的使用目前使用較廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設計理念，而且需要更酷的頁面特效和用戶體驗。作為開發者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...

    Tony_Zby 評論0 收藏0

  • 關于BOOTSTRAP的整理和理解

    摘要：規范名稱定義，便于維護。譬如關于的定義在格式化的中會聲明為，而在基本樣式的中又可能會聲明所以在中會出現多次定義。盡量減少連接數和的大小。基于版本的使用目前使用較廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁面不僅需要更人性化的設計理念，而且需要更酷的頁面特效和用戶體驗。作為開發者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...

    zeyu 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<