時(shí)光飛逝翁垂, 每月 Tutorialzine 都會(huì)為大家分享一些有趣的前端庫(kù)琳状。在本月磕瓷,他們又準(zhǔn)備了哪些優(yōu)秀的 Web 開(kāi)發(fā)資源呢?前端兒,一起來(lái)瞧瞧吧困食!
-
Buefy
--
這是一個(gè)基于 Bulma 的 Vue.js 輕量級(jí) UI 組件边翁,而 Bulma 則是基于 Flexbox 的 CSS 庫(kù)。Buefy 具備典型的 Web 應(yīng)用程序所必備的所有組件陷舅,例如 modals倒彰、toast 以及 notifications 等動(dòng)態(tài)元素审洞,使開(kāi)發(fā)人員可以快速添加任何用戶界面到其現(xiàn)有的 Vue.js 項(xiàng)目莱睁。
項(xiàng)目地址:【傳送門(mén)】
-
HR.js
--
HR.js 是一個(gè)用于高亮并替換 DOM 中文本的零依賴庫(kù)。它的 API 簡(jiǎn)直不能再簡(jiǎn)單了芒澜。你只需要使用 CSS 選擇器來(lái)定位保存所需文本的 HTML 父元素仰剿,選擇好要高亮的單詞,并設(shè)置背景顏色痴晦,就可以搞定了南吮。
項(xiàng)目地址:【傳送門(mén)】
-
React VR
--
React VR 是用于創(chuàng)建在 Web 瀏覽器中運(yùn)行 VR 應(yīng)用程序的框架。它將現(xiàn)代的 API(如 WebGL 和 WebVR)與 React 的聲明式渲染進(jìn)行搭配誊酌,從而產(chǎn)生可以通過(guò)各種設(shè)備使用的體驗(yàn)部凑。
項(xiàng)目地址:【傳送門(mén)】
-
Tippy.js
--
這是一個(gè)用于動(dòng)畫(huà)工具提示的純 JavaScript 庫(kù)。Tippy.js 提供了豐富的懸停效果以及超過(guò) 20 個(gè)自定義選項(xiàng)碧浊。它也是超輕量級(jí)的庫(kù)涂邀,并具備相當(dāng)不錯(cuò)的瀏覽器兼容性。但如果出現(xiàn)個(gè)別瀏覽器不支持的情況箱锐,它會(huì)自動(dòng)退回至常規(guī)的 title 屬性比勉。
項(xiàng)目地址:【傳送門(mén)】
-
Barba.js
--
Barba.js 是一個(gè)無(wú)依賴的 JavaScript 庫(kù),可用于在單頁(yè)應(yīng)用程序的視圖間創(chuàng)建平滑的過(guò)渡效果驹止。該庫(kù)的邏輯是圍繞 PJAX(推送狀態(tài) AJAX)來(lái)設(shè)計(jì)的浩聋,繞過(guò)正常有效的 URL,并通過(guò) XMLHttpRequest 來(lái)加載新頁(yè)面臊恋。Barba 還能確保通過(guò) Push 狀態(tài)的 API 衣洁,在應(yīng)用程序的 URL 中可以正確的反映出狀態(tài)的變化。
項(xiàng)目地址:【傳送門(mén)】
-
UIkit
--
UIkit 是一個(gè)優(yōu)秀的輕量級(jí)前端框架抖仅,它包含了相應(yīng)的 SVG 圖標(biāo)字體以及豐富的組件闸与。無(wú)論是外觀,還是框架岸售,UIkit 的設(shè)計(jì)都十分的出彩践樱。它不光具備統(tǒng)一的樣式,還有易于記憶的 API凸丸,許多自定義選項(xiàng)以及有用的修飾器類拷邢,并且它的使用文檔編寫(xiě)的也相當(dāng)?shù)某霰姟?/p>
項(xiàng)目地址:【傳送門(mén)】
-
Haul
--
Haul 是一個(gè)用于開(kāi)發(fā) React Native 應(yīng)用程序的命令行工具。它可以直接替代 React Native packager屎慢,提供比 Webpack 更好的支持瞭稼,并能夠改進(jìn)錯(cuò)誤消息忽洛,大大減少編譯時(shí)間。Haul 也擁有出色的使用文檔环肘,并且完全開(kāi)源欲虚、可定制。
項(xiàng)目地址:【傳送門(mén)】
-
AcrossTabs
--
AcrossTabs 是一個(gè)用于跨瀏覽器 Tabs 間進(jìn)行通信的 JavaScript 庫(kù)悔雹,你可以使用它在不同的瀏覽器 Tabs 上打開(kāi)或關(guān)閉網(wǎng)頁(yè)复哆。由于父 Tab 可以訪問(wèn)子 Tab 上有用的信息(例如 UID),所以它可以判斷子 Tab 是否依舊打開(kāi)腌零,或者已關(guān)閉梯找。
項(xiàng)目地址:【傳送門(mén)】
-
Stylelint
--
Stylelint 是一款現(xiàn)代的 CSS linter 工具,它可以幫助團(tuán)隊(duì)在樣式表中執(zhí)行固定的 CSS 標(biāo)準(zhǔn)益涧。該庫(kù)非常強(qiáng)大锈锤,它不僅可以讓你禁止或設(shè)置白名單屬性,還能夠捕獲錯(cuò)誤以及識(shí)別 SCSS 語(yǔ)法闲询。同時(shí)久免,Stylelint 也可完全定制,幫助你添加或去除一些規(guī)則選項(xiàng)扭弧。
項(xiàng)目地址:【傳送門(mén)】
-
Iconate
--
這是一個(gè)非常棒的 Vanilla JavaScript 庫(kù)阎姥。通過(guò)點(diǎn)擊圖標(biāo),它能夠幫你完成帶有豐富平滑動(dòng)畫(huà)效果的圖標(biāo)轉(zhuǎn)換寄狼。你也可以將 Iconate 與所有的 CSS 圖標(biāo)字體一同使用丁寄。即你只需在 HTML 中添加一個(gè)圖標(biāo),并使用簡(jiǎn)單的 JavaScript API 來(lái)選擇要將其轉(zhuǎn)換為哪一種圖標(biāo)泊愧,同時(shí)選擇相應(yīng)的動(dòng)畫(huà)效果就搞定了伊磺。
項(xiàng)目地址:【傳送門(mén)】
React-Datasheet 是一個(gè)用于向應(yīng)用程序添加類似 Excel 數(shù)據(jù)表的 React 組件。你可以對(duì)單元格進(jìn)行自由編輯删咱、分組選擇屑埋、復(fù)制、粘貼痰滋、刪除等操作摘能。另外,在 GitHub 上還有三個(gè)有用的示例敲街,供你參考团搞。即基本的表,帶有公式的表以及嵌套組件的表多艇。
項(xiàng)目地址:【傳送門(mén)】
-
Pure CSS
--
這是一個(gè)輕量級(jí)逻恐、響應(yīng)式的純 CSS 模塊框架。整個(gè)庫(kù)在 gzip 壓縮后,僅有 3.8 kb 的大小复隆,如果你僅使用其中的一部分模塊拨匆,那 CSS 真是小到?jīng)]有朋友了!同時(shí)挽拂,它模塊包括了基本樣式集惭每、響應(yīng)格網(wǎng)、表單組件亏栈、按鈕台腥、表格和菜單,適用于任何的 Web 項(xiàng)目仑扑。
項(xiàng)目地址:【傳送門(mén)】
-
Simple Icons
--
Simple Icons 是一個(gè)涉及知名品牌(涵蓋社交網(wǎng)絡(luò)览爵、應(yīng)用程序置鼻、服務(wù)等)的免費(fèi)圖標(biāo)合集镇饮。這些圖標(biāo)都是用 SVG 制作的,所以它們可以被縮放到任何尺寸箕母,不用擔(dān)心圖片的像素储藐。而大多數(shù)圖標(biāo)的大小都低于 500 字節(jié)。
項(xiàng)目地址:【傳送門(mén)】
-
Chroma.js
--
Chroma.js 是一個(gè)用于處理顏色的微型 JavaScript 庫(kù)嘶是。它提供了豐富的 API钙勃,以及超過(guò) 50 種用于操縱顏色的功能,讓你可以使用色彩模式切換聂喇,改變亮度和飽和度辖源,創(chuàng)建漸變比例等許多實(shí)用的色階處理方法。
項(xiàng)目地址:【傳送門(mén)】
-
Weex
--
Weex 是一個(gè)構(gòu)建跨平臺(tái)的移動(dòng)應(yīng)用程序框架希太,類似于 React Native克饶,但適用于 Vue.js. 你可以利用 HTML、CSS 和 JavaScript 編寫(xiě)應(yīng)用程序誊辉,并將其以 Android 和 iOS 客戶端的形式呈現(xiàn)矾湃。該框架有許多內(nèi)置的組件、API 和其他有用的功能堕澄。
項(xiàng)目地址:【傳送門(mén)】
感謝你的閱讀邀跃。若你有所收獲,歡迎點(diǎn)贊與分享蛙紫。
注:
- 本文版權(quán)歸原作者所有拍屑,僅用于學(xué)習(xí)與交流;
- 如需轉(zhuǎn)載譯文坑傅,煩請(qǐng)按下方注明出處信息僵驰,謝謝!
英文原文:15 Interesting JavaScript and CSS Libraries for May 2017
作者:Danny Markov
譯者:IT程序獅
譯文地址:http://www.reibang.com/p/99b66b214bbd