亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

13個(gè)幫你提高開發(fā)效率的現(xiàn)代CSS框架

xumenger / 2109人閱讀

摘要：官網(wǎng)是圍繞構(gòu)建的，是一個(gè)免費(fèi)的開源框架。官網(wǎng)在壓縮后僅為，以移動(dòng)優(yōu)先的理念為中心。官網(wǎng)被稱為輕量級(jí)響應(yīng)式現(xiàn)代化，是一個(gè)基于的框架。通過(guò)添加主題或自定義組件能夠幫你進(jìn)一步開發(fā)個(gè)性化的。官網(wǎng)有時(shí)框架可以包含僅對(duì)其原始開發(fā)人員有意義的類名。

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

本文首發(fā)微信公眾號(hào)：前端先鋒
歡迎關(guān)注，每天都給你推送新鮮的前端技術(shù)文章

本文將向你介紹一系列頂級(jí)CSS框架。有些人可能聽說(shuō)過(guò)，也可能對(duì)有些人是全新的。但它們都提供了各種有用的先進(jìn)功能，可以改善你的工作流程。開始吧！

專注于 CSS 的框架

讓我們先從一些專注于 CSS 的框架開始。你將找到所有類型的布局和UI元素來(lái)自己構(gòu)建項(xiàng)目的基礎(chǔ)。有些甚至可能包含一些 JavaScript 來(lái)幫你處理更復(fù)雜的功能。

Tailwind CSS

Tailwind與其他框架的區(qū)別在于它沒有任何預(yù)構(gòu)建的UI組件。相反，它更專注于程序本身，CSS類可以幫助你在構(gòu)建網(wǎng)站方面領(lǐng)先一步。尺寸、顏色和定位等元素對(duì)它來(lái)說(shuō)才是關(guān)鍵。

官網(wǎng)：https://tailwindcss.com

Bulma

Bulma是圍繞CSS Flexbox構(gòu)建的，是一個(gè)免費(fèi)的開源框架。你會(huì)發(fā)現(xiàn)它有許多易于定制的UI元素。它是模塊化的，這意味著你可以只導(dǎo)入所需的元素 —— 如列或按鈕。

官網(wǎng)：https://bulma.io/

Picnic CSS

Picnic CSS 是一個(gè)超輕量級(jí)的框架，壓縮后小于10KB。它具有基于Flexbox的網(wǎng)格布局以及大量的UI元素，可以快速啟動(dòng)項(xiàng)目。你甚至可以找到一個(gè)簡(jiǎn)單的導(dǎo)航欄和模態(tài)窗口。

官網(wǎng)：https://picnicss.com/

Materialize

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

官網(wǎng)：https://materializecss.com/

Pure.css

Pure.css在壓縮后僅為3.8KB，以移動(dòng)優(yōu)先的理念為中心。它是模塊化的，所以你只需導(dǎo)入要使用的元素包。你還可以下載和安裝許多常用布局。

官網(wǎng)：https://purecss.io/

Base

Base 是一個(gè)模塊化框架，正如它的名字所要說(shuō)明的，其旨在為你的項(xiàng)目提供堅(jiān)實(shí)的基礎(chǔ)。它建立在 Normalize.css 之上，提供易于定制的基本樣式。你在這里找不到任何太多的東西，但這恰恰就就是重點(diǎn)所在！

官網(wǎng)：https://getbase.org/

mini.css

mini.css 是一個(gè)在輕量級(jí)和功能豐富之間取得平衡的包。它確實(shí)達(dá)到了目標(biāo)，壓縮后大約10KB，同時(shí)擁有相當(dāng)多的UI元素和布局。通過(guò)它提供的文檔你可以深入了解這一切是如何運(yùn)作的。

官網(wǎng)：https://minicss.org/

Concise CSS

Concise CSS 提供了一個(gè)基于實(shí)用程序的框架來(lái)使設(shè)計(jì)師“杜絕臃腫”，它可以讓你快速入門。如果你需要UI元素的話可以通過(guò)多帶帶的套件去添加它們。

官網(wǎng)：https://concisecss.com/

Mobi.css

Mobi.css 非常?。▔嚎s后僅 2.6KB），主要針對(duì)移動(dòng)用戶。但是其內(nèi)置主題和插件系統(tǒng)還有很大的增長(zhǎng)空間。如果基本樣式不能滿足你的要求，可以在框架之上以模塊化的方式進(jìn)行構(gòu)建。

官網(wǎng)：http://getmobicss.com/

Spectre.css

Spectre.css 被稱為“輕量級(jí)、響應(yīng)式、現(xiàn)代化”，是一個(gè)基于Flexbox的框架。你會(huì)發(fā)現(xiàn)一些基本的布局、UI和排版風(fēng)格。此外還有許多功能組件（手風(fēng)琴、彈出窗口、標(biāo)簽等）都是用純CSS構(gòu)建的?？偟膩?lái)說(shuō)，它做到了很好的平衡性。

官網(wǎng)：https://picturepan2.github.io...

超越CSS范疇的框架

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

Bootstrap

Bootstrap 是由 Twitter 創(chuàng)建的，因?yàn)樗S護(hù)得很好，并提供了一個(gè)龐大的預(yù)建功能庫(kù)，所以它幾乎無(wú)處不在。雖然你可以使用默認(rèn)設(shè)置，但 Bootstrap 也非常易于擴(kuò)展。通過(guò)添加主題或自定義組件能夠幫你進(jìn)一步開發(fā)個(gè)性化的 UI。

官網(wǎng)：https://getbootstrap.com/

Foundation

Foundation 是模塊化組件庫(kù)，可以為你量身打造自己的項(xiàng)目。它有各種各樣的選項(xiàng) —— 從響應(yīng)式布局到動(dòng)畫。 Foundation 也有自己的 JavaScript 插件API。最后，該框架附帶了ARIA屬性和角色，用于構(gòu)建具有可訪問(wèn)性的站點(diǎn)。

官網(wǎng)：https://foundation.zurb.com/

Semantic UI

有時(shí)框架可以包含僅對(duì)其原始開發(fā)人員有意義的 CSS 類名。Semantic UI 希望通過(guò)使用自然語(yǔ)言來(lái)改變敘述。邏輯是很容易遵循的，應(yīng)該可以加快開發(fā)速度。除語(yǔ)言之外，你還可以找到超過(guò) 3,000 個(gè)主題變量 —— 根據(jù)需要，你可以編輯或刪除所有這些變量。

官網(wǎng)：https://semantic-ui.com/

依賴框架更好地工作

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

本文首發(fā)微信公眾號(hào)：前端先鋒 歡迎掃描二維碼關(guān)注公眾號(hào)，每天都給你推送新鮮的前端技術(shù)文章

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

12個(gè)令人驚嘆的CSS實(shí)驗(yàn)項(xiàng)目

必須要會(huì)的 50 個(gè)React 面試題

世界頂級(jí)公司的前端面試都問(wèn)些什么

11 個(gè)最好的 JavaScript 動(dòng)態(tài)效果庫(kù)

CSS Flexbox 可視化手冊(cè)

從設(shè)計(jì)者的角度看 React

過(guò)節(jié)很無(wú)聊？還是用 JavaScript 寫一個(gè)腦力小游戲吧！

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實(shí)現(xiàn)動(dòng)畫效果

程序員30歲前月薪達(dá)不到30K，該何去何從

14個(gè)最好的 JavaScript 數(shù)據(jù)可視化庫(kù)

8 個(gè)給前端的頂級(jí) VS Code 擴(kuò)展插件

Node.js 多線程完全指南

把HTML轉(zhuǎn)成PDF的4個(gè)方案及實(shí)現(xiàn)

更多文章...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/114626.html

相關(guān)文章

  • 程序員練級(jí)攻略（2018）：前端基礎(chǔ)和底層原理

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

    widuu 評(píng)論0 收藏0

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...

    amc 評(píng)論0 收藏0

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...

    Tony_Zby 評(píng)論0 收藏0

  • 關(guān)于BOOTSTRAP的整理和理解

    摘要：規(guī)范名稱定義，便于維護(hù)。譬如關(guān)于的定義在格式化的中會(huì)聲明為，而在基本樣式的中又可能會(huì)聲明所以在中會(huì)出現(xiàn)多次定義。盡量減少連接數(shù)和的大小?；诎姹镜氖褂媚壳笆褂幂^廣的是版本和，其中的最新版本是的最新版本。 隨著CSS3和HTML5的流行，我們的WEB頁(yè)面不僅需要更人性化的設(shè)計(jì)理念，而且需要更酷的頁(yè)面特效和用戶體驗(yàn)。作為開發(fā)者，我們需要了解一些寶貴的CSS UI開源框架資源，它們可以幫助我...

    zeyu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<