Web前端培訓(xùn)：10個輕量級CSS框架

過去的幾年里，Web開發(fā)已經(jīng)變得非常流行。每年都會發(fā)布許多前端框架，Bootstrap一直是最受歡迎的一個，但是，還有許多其他的框架，你可能沒有聽說過，但絕對值得一試。想學(xué)的同學(xué)可以參加Web前端培訓(xùn)，快速有效提升自己。

在本文中，我們將介紹10個好用的框架。

Spectre

Spectre是一個現(xiàn)代的、自由的、響應(yīng)迅速的CSS框架。它提供了優(yōu)雅的元素、基于flexbox的響應(yīng)式布局系統(tǒng)以及CSS組件和實用程序，可以使用Sass和Scss編譯器進行修改。它非常輕量級，只有10KB的Gzip，并且支持大多數(shù)現(xiàn)代瀏覽器。

Mustard UI

這是一個開源、輕量級的入門級CSS框架。它分為多個模塊，您可以選擇是包含所有模塊，還是只包含所需的模塊。它配備了前端設(shè)計所需的所有組件，如flexbox網(wǎng)格、按鈕、表格、表單、卡片等，并且可以通過scss變量進行定制。

Bulma

Bulma是一個基于Flexbox布局模型的免費開源現(xiàn)代CSS框架。它提供了一個簡單的網(wǎng)格系統(tǒng)、反應(yīng)靈敏的導(dǎo)航條和多功能的媒體對象。Bulma中的每個元素都是首先移動的，并針對小屏幕進行了優(yōu)化，并且可以使用修改器類和變量輕松定制。在Web前端培訓(xùn)中，會有很多框架的學(xué)習(xí)和應(yīng)用，可以讓你快速掌握前端技能。

UI Kit

這是另一個很棒的CSS和JavaScript前端框架，它有自己的SVG圖標字體和許多組件。UIkit在外觀和框架方面都設(shè)計得非常好，具有統(tǒng)一的樣式、易于記憶的API、許多自定義選項和有用的修改器類。

TentCSS

TentCSS是一個簡單易用的框架，提供了構(gòu)建響應(yīng)性網(wǎng)站所需的所有基本組件。它非常輕（僅5kb Gzip），遵循BEM標準，并具有用于布局的現(xiàn)代flexbox網(wǎng)格。

MaterializeCSS

這是一個基于材料設(shè)計的現(xiàn)代響應(yīng)前端框架。它的使用非常簡單，特別是對于熟悉其他類似項目（如Bootstrap）的人來說。有一個初學(xué)者模板的集合，將幫助您輕松地設(shè)計您的網(wǎng)站。

The Zurb Foundation

ZURB基礎(chǔ)框架是建立響應(yīng)網(wǎng)站和應(yīng)用程序的另一個流行工具。它附帶了許多完全可定制的模塊化和靈活組件，您可以使用這些組件設(shè)計在任何設(shè)備上都令人驚嘆的漂亮響應(yīng)網(wǎng)站。通過Web前端培訓(xùn)的學(xué)習(xí)，理論知識+實踐項目，雙管齊下，更有利于學(xué)員加深對所學(xué)知識的理解和運用，真正做到學(xué)以致用，從而將知識內(nèi)化成自身的能力。

Semantic UI

Semantic是一個前端框架，它使用人性化HTML幫助創(chuàng)建美觀且響應(yīng)迅速的布局。它高度可定制，有3000多個CSS變量，可以用于自定義主題。語義高度響應(yīng)，因為它完全是用“em”值構(gòu)建的。

Base

Base是一個輕量級的、最小的、響應(yīng)迅速的CSS框架。它構(gòu)建在最新的Normalize.css之上，并分為獨立的模塊，因此您只能使用所需的模塊。它首先是移動的，在包括IE10+在內(nèi)的所有現(xiàn)代瀏覽器上都非常有效。

MUI

這是一個小型且響應(yīng)迅速的框架，遵循谷歌的材料設(shè)計指南。它沒有外部依賴項，并且非常輕量級，只有5.4kb的gzip。它提供React支持，通過SASS文件進行定制，并有一個單獨的內(nèi)聯(lián)版本用于設(shè)置電子郵件樣式。

這些框架在web開發(fā)工作中也會起到不小的作用，掌握好這些框架的運用將會使你的開發(fā)工作變得更加高效和穩(wěn)定。想要盡快學(xué)會這些框架的使用，參加Web前端培訓(xùn)就是一個不錯的方法，可以提高學(xué)習(xí)效率，在最短的時間內(nèi)學(xué)到最多最有效的知識和技能。

了解更多

于UI / UX設(shè)計人員而言，要制作一個在每個瀏覽器上都看起來不錯的漂亮網(wǎng)站不是一件容易的事。在創(chuàng)建網(wǎng)站布局并使其美觀時，開發(fā)人員必須考慮所有Web瀏覽器和移動視圖。

恐懼始終存在于內(nèi)部，如果設(shè)計在某個愚蠢的瀏覽器上某個地方可怕地崩潰，該怎么辦！多虧了 CSS使開發(fā)人員的生活變得無限輕松的框架。

CSS框架消除了大部分麻煩，如今，開發(fā)人員無法想象沒有CSS框架的代碼。這些框架不僅節(jié)省了大量時間，而且還有助于以更好，更快的方式構(gòu)建漂亮的響應(yīng)式Web應(yīng)用程序。

這些框架提供了基本結(jié)構(gòu)，包括網(wǎng)格，交互式UI模式，Web排版，工具提示，按鈕，表單元素，圖標。提供了現(xiàn)成的解決方案，這有助于快速構(gòu)建網(wǎng)站。您不需要從頭開始，也可以重用項目中的代碼。

現(xiàn)在有一個問題，哪個框架最適合您？如果您不熟悉前端開發(fā)，那么選擇框架可能會有些棘手。

老實說，每個CSS框架都有其優(yōu)缺點，因此，這取決于您的特定需求。在本文中，我們將討論一些適用于大多數(shù)行業(yè)開發(fā)人員的流行CSS框架。

我們在過濾這些框架時會牢記它們的優(yōu)缺點。讓我們討論這些框架。

1、Bootstrap

地址：https://getbootstrap.com/

您可能肯定已經(jīng)聽說過此框架，即使這是您的第一個工作。該框架是第一個推廣“智能手機優(yōu)先”理念的框架。Bootstrap是世界上最流行的CSS框架，它于2011年由Twitter引入。

Bootstrap在大規(guī)模構(gòu)建響應(yīng)式設(shè)計方面有很大幫助。當包含相關(guān)的引導(dǎo)程序類時，它將自動針對不同的屏幕尺寸調(diào)整設(shè)計。它提供了大量的插件和主題生成器。

該框架的當前版本是Bootstrap 4，其中包括一些其他功能，例如新的配色方案，新的修改器，新的實用程序類。版本4是使用SASS構(gòu)建的，這意味著Bootstrap現(xiàn)在已經(jīng)支持LESS和SASS。

優(yōu)點：

快速成型

大型生態(tài)系統(tǒng)

大量的組件

LESS和SASS支持

簡單的文檔和較低的學(xué)習(xí)曲線

由Twitter開發(fā)，因此對社區(qū)有長期的長期信任。

2、Foundation

地址：https://get.foundation/

開發(fā)人員說，如果編程是一種宗教，那么基金會和Bootstrap的家伙將處于障礙的兩邊。Foundation是世界上另一個使用最廣泛的一流CSS框架。許多公司（例如Facebook，eBay，Mozilla，Adobe甚至Disney）都使用它。該框架是基于Saas（如引導(dǎo)程序）構(gòu)建的。它更加復(fù)雜，靈活并且易于定制。它也帶有CLI，因此很容易與模塊捆綁器一起使用。它提供了Fastclick.js工具，可在移動設(shè)備上更快地呈現(xiàn)。

優(yōu)點：

創(chuàng)建響應(yīng)式設(shè)計

強大的電子郵件框架

極高的靈活性

在線網(wǎng)絡(luò)研討會培訓(xùn)支持。

易于定制。

提供了完整的模塊化工具集，可讓您解決幾乎所有的界面任務(wù)

UI組件及更多：先進的成像系統(tǒng)，定價表組件，表單驗證，垂直時間軸布局，RTL支持等等。

3、Bulma

地址：https://bulma.io/

與其他CSS框架相比，Bulma是市場上相對較新的框架，但Bulma設(shè)法在短時間內(nèi)獲得了用戶的很多關(guān)注。這個免費的開源CSS框架基于Flexbox布局模型。最好的事情是，它完全基于CSS，根本不需要javascript。全球有200,000多名開發(fā)人員在使用它。它反應(yīng)靈敏，輕巧，并且遵循“移動優(yōu)先”的方法。

優(yōu)點：

所有CSS類名稱均按邏輯命名，因此易于學(xué)習(xí)和記住語法。

純CSS，無JavaScript

大社區(qū)

模塊化：使用Saas構(gòu)建，您可以通過僅導(dǎo)入所需的必要功能來設(shè)計界面。

大量組件，例如垂直對齊解決方案，布局以及媒體對象

4、Pure

地址：https://purecss.io/

由Yahoo開發(fā)的Pure是一個輕量級的響應(yīng)CSS框架。它使用Normalize.css構(gòu)建，可幫助使用網(wǎng)格和菜單創(chuàng)建響應(yīng)式布局?？梢詫⑵浞譃椴煌腃SS模塊，并且可以根據(jù)您的需求和偏好導(dǎo)入這些模塊。因此，如果僅需要網(wǎng)格系統(tǒng)，則無需導(dǎo)入整個CSS并增加站點的加載時間。與Bootstrap不同，它不允許創(chuàng)建固定的布局。

優(yōu)點：

移動友好

完全基于CSS，因此很容易學(xué)習(xí)。

它提供5點，2點，24點等的變化。因此，在創(chuàng)建網(wǎng)格和列系統(tǒng)時可以更加靈活地使用它。

5、Semantic UI

地址：https://semantic-ui.com/

該框架以其令人難以置信的主題效果以及簡單優(yōu)雅的設(shè)計而聞名。語義UI是使用人類友好的HTML的響應(yīng)框架，它允許您創(chuàng)建一個獨特而美觀的網(wǎng)站，而無需進行多次更改。它提供3000多個主題變量和50多個UI組件。它還支持第三方庫，如React，Meteor，Ember，React等。

優(yōu)點：

友好的類名：它使用人類友好的HTML，因此可以使用自然語言進行編碼。

與Bootstrap 4和其他框架相比更具吸引力的布局。

僅加載必要的組件，從而減少了下載時間和文件大小

廣泛的組件

6、Tailwind CSS

地址：https://tailwindcss.com/

Tailwind CSS是一個靈活且高度可定制的低級CSS框架。Tailwind用PostCSS編寫并用JavaScript配置。您將使用低級實用程序類來自定義設(shè)計，而不是使用預(yù)先構(gòu)建的組件，從而使您可以完全控制網(wǎng)站的最終制作方式。從正面尺寸到間距，從斷點到陰影，從顏色到邊框尺寸都可以自定義。例如，您可以為按鈕賦予藥丸，輪廓和3D外觀。您可以個性化每個方面，并且可以以獨特的樣式創(chuàng)建設(shè)計，該樣式看起來絕對不同于其他框架，例如Bootstrap或UI套件。

優(yōu)點：

易于定制

實用程序類

帶有響應(yīng)式選項

7、UI kit

地址：https://getuikit.com/

這個強大的CSS框架以極簡主義功能而聞名。UI Kit是一個輕量級的最小CSS框架，幾乎包含其他框架的所有功能。

您可以使用最大的空白空間和許多UI組件（例如SVG圖標，進度條，圖像制作器等）來創(chuàng)建超干凈，優(yōu)雅且美觀的Web界面。有許多令人難以置信的組件，統(tǒng)一的樣式和自定義選項。您可以使用Nestable之類的組件創(chuàng)建高級界面。它使用可靠且無沖突的命名約定。您還可以使用純HTML設(shè)計復(fù)雜的基于flexbox的布局。

優(yōu)點：

極簡主義

大量有用的UI組件集合。

與更少和更少兼容

包含JavaScript

對任何設(shè)備的適應(yīng)性

8、Materialize CSS

地址：https://materializecss.com/

如果您喜歡使用材料設(shè)計，那么您絕對應(yīng)該檢查一下這個框架。它由Google于2014年創(chuàng)建，該框架對于想要設(shè)計網(wǎng)站或Android Web應(yīng)用程序的人來說是一個很好的解決方案。許多Google產(chǎn)品都在此框架上實現(xiàn)，例如YouTube，Gmail，Google云端硬盤和Google文檔。

它帶有一些現(xiàn)成的組件和類，使您無需花費太多精力就可以盡快完成工作。該框架使用由Bootstrap建立的基于12列網(wǎng)格的布局，響應(yīng)性動畫和過渡，填充以及諸如燈光和陰影之類的深度效果。使用其預(yù)建的入門模板，您可以以最少的設(shè)置時間來設(shè)計網(wǎng)站。

優(yōu)點：

材料設(shè)計

引導(dǎo)網(wǎng)格

大量的組件選擇

輕松定制

與Sass兼容

9、Skeleton

地址：http://getskeleton.com/

顧名思義，Skeleton是最簡單，響應(yīng)最少的CSS框架。它僅包含400行代碼，但是提供了在項目中使用的多種選擇。諸如網(wǎng)格，版式，按鈕，表單，列表，媒體查詢，表格等功能使您可以輕松創(chuàng)建復(fù)雜的網(wǎng)站。我們已經(jīng)在CSS框架中提到了它，但是更少的代碼行沒有將自身定義為CSS框架，庫甚至模塊。它實際上是一個樣板，對小型項目或作為UI / UX開發(fā)人員開始其職業(yè)的人都非常有用。它僅帶有有限數(shù)量的標準HTML元素，但這足以開始使用簡單而優(yōu)雅的網(wǎng)站。

優(yōu)點：

移動友好

簡單易學(xué)

10、Miligram

地址：https://milligram.io/

顧名思義，這是另一個輕量級CSS框架，旨在更快地創(chuàng)建網(wǎng)站?？蚣艿拇笮H為2Kb，但它具有許多功能和Web開發(fā)工具來滿足您的需求。它為開發(fā)人員提供了靈活性，并允許他們使用CSS3規(guī)范提供的所有功能。您還可以使用幾行自定義CSS進行擴展。

優(yōu)點：

基于Flexbox網(wǎng)格

超級設(shè)計主題

我們已經(jīng)提到了一些CSS框架，這些框架在開發(fā)人員中非常流行，但是您也可以嘗試其他一些CSS框架。其他一些流行的框架包括Susy，Animate.css，Paper CSS，NES.css，Base，Tent CSS，Simple Grid，Spectre，Mustard UI，Picnic CSS，Mini.css，Gumby等。

多年開發(fā)老碼農(nóng)福利贈送：網(wǎng)頁制作，網(wǎng)站開發(fā)，web前端開發(fā)，從最零基礎(chǔ)開始的的HTML+CSS+JavaScript。jQuery，Ajax，node，angular框架等到移動端小程序項目實戰(zhàn)【視頻＋工具＋電子書＋系統(tǒng)路線圖】都有整理，需要的伙伴可以私信我，發(fā)送“前端”等3秒后就可以獲取領(lǐng)取地址，送給每一位對編程感興趣的小伙伴

在本文中，我們將與大家分享 10個最佳的極簡 CSS 框架，它們能夠為你提供建站必備的組件，幫助你節(jié)省時間。

希望對大家有所幫助！

一、Spectre（一個輕量級、響應(yīng)式的現(xiàn)代 CSS 框架，用于快速建站和擴展程序的開發(fā)。它通過最佳編碼實踐和一致性的設(shè)計語言，為排版與元素、基于 Flexbox 的響應(yīng)布局系統(tǒng)、CSS 組件提供了基本樣式。）

二、Milligram（提供了極簡樣式設(shè)置，便于你快速、簡潔的開啟建站之旅。雖然它不是一個 UI 框架，但它的設(shè)計理念卻是以提供優(yōu)秀的性能、高效的開發(fā)效率以及最少的屬性重置而構(gòu)建的。同時，它也是輕量的）

三、Mobi（是一個輕量級、可擴展、移動優(yōu)先的 CSS 框架。它專注于細節(jié)，對于內(nèi)容豐富的網(wǎng)頁能夠提供優(yōu)質(zhì)的用戶體驗。雖然，它專注移動端，但桌面客戶端的體驗也是很棒的。）

四、Mini（作為一個 Gzip 壓縮后不到 7KB 大小的極簡框架，它具備響應(yīng)式、易用性和定制性等特性，旨在為你提供盡可能多的功能。由于它是輕量框架，不僅讓你創(chuàng)建的網(wǎng)站和應(yīng)用程序具備更快的加載速度，而且它所提供的組件可以滿足基本的開發(fā)要求。）

五、 Siimple（是一個助你打造扁平化網(wǎng)站風(fēng)格的輕量、響應(yīng)式的開源框架。它內(nèi)置了 SASS / SCSS，為你的網(wǎng)頁設(shè)計提供了簡潔的開始。）

六、Base（一個穩(wěn)固的響應(yīng)式 HTML 與 CSS 框架。）

七、Scooter（專注為 Dropbox 提供基礎(chǔ)樣式、CSS 組件以及快速靜態(tài)原型的 SCSS 框架。）

八、Responsive（一個功能強大、對開發(fā)人員友好的，用于構(gòu)建響應(yīng)式網(wǎng)站的輕量級前端框架。）

九、拼圖 Pintuer （國內(nèi)優(yōu)秀的HTML、CSS、JS跨屏響應(yīng)式開源前端框架，使用最新瀏覽器技術(shù)，為快速的前端開發(fā)提供一系統(tǒng)的文本、圖標、媒體、表格、表單、按鈕、菜單、網(wǎng)格系統(tǒng)等樣式工具包，占用資源小，使用拼圖可以快速構(gòu)建簡潔、優(yōu)雅而且自動適應(yīng)手機、平板、桌面電腦等設(shè)備的前端界面，讓前端開發(fā)像玩游戲一下快樂而輕松。）

十、 BluCSS （是一個簡便易記的CSS框架?？奢p松應(yīng)用在項目中。）

相信大家都會自己心中最喜歡的工具，如果本文沒有列舉出來，歡迎大家在評論區(qū)留下自己心目中最喜歡、最有價值的工具~~

切圖 qietu(.com)

在線咨詢

上一篇：canvas-繪制圓形
下一篇：Ruby 中的視圖模版引擎：簡化開發(fā)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

Web前端培訓(xùn)：10個輕量級CSS框架

您的項目需求