成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

xumenger / 1932人閱讀

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

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

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

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

專注于 CSS 的框架

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

Tailwind CSS

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

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

Bulma

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

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

Picnic CSS

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

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

Materialize

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

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

Pure.css

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

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

Base

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

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

mini.css

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

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

Concise CSS

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

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

Mobi.css

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

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

Spectre.css

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

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

超越CSS范疇的框架

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

Bootstrap

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

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

Foundation

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

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

Semantic UI

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

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

依賴框架更好地工作

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

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

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

12個令人驚嘆的CSS實驗項目

必須要會的 50 個React 面試題

世界頂級公司的前端面試都問些什么

11 個最好的 JavaScript 動態(tài)效果庫

CSS Flexbox 可視化手冊

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

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

CSS粘性定位是怎樣工作的

一步步教你用HTML5 SVG實現(xiàn)動畫效果

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

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

8 個給前端的頂級 VS Code 擴展插件

Node.js 多線程完全指南

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

更多文章...

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/114626.html

相關(guān)文章

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

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

    widuu 評論0 收藏0

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

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

    amc 評論0 收藏0

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

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

    Tony_Zby 評論0 收藏0

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

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

    zeyu 評論0 收藏0

發(fā)表評論

0條評論

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