英文 |?https://javascript.plainenglish.io/compilation-of-javascript-and-css-libraries-that-i-found-interesting-1c4434fe9c9b

翻譯 | 楊小愛

作為一名 JavaScript 開發(fā)人員，我知道有很多庫和資源。如果我不想辦法找不到和發(fā)現(xiàn)他們，他們就不可能找到我。因此，如果您想節(jié)省一些時間并提高工作效率，你可以閱讀今天文章里的內(nèi)容，以幫助你提高工作效率。

1.?Core UI

地址：https://coreui.io/

我可以說 Core UI 是創(chuàng)建管理和管理模板的快捷方式。除了基于 Bootstrap 之外，它還提供樣板版本，允許與此類項目中常用的框架快速集成。它支持的框架是有AngularJS、ReactJs 和 VueJs。

2. MJML

地址：https://mjml.io/

如果在 Web 開發(fā)中仍然非常無聊，那就創(chuàng)建響應(yīng)式電子郵件。

考慮到這一點，這個稱為 MJML 的框架試圖通過簡單的語法來促進這個過程。幾個時尚的組件可以編譯成可在任何設(shè)備上運行的 HTML 電子郵件。

讓我們面對現(xiàn)實吧，表格電子郵件的時代即將結(jié)束，就像表格網(wǎng)站早已不復(fù)存在一樣。

3. Baguette box

地址：https://unsplash.github.io/react-trend/

這個純 JavaScirpt 庫非常適合不想在項目中使用 jQuery 的任何人。它非常輕巧，使創(chuàng)建響應(yīng)式畫廊的過程變得非常簡單。

它不使用 JavaScript 來執(zhí)行動畫，而是使用 CSS3 過渡。但是，即使您使用 jQuery，我也建議您進行測試，因為它比市面上的許多替代品都要輕巧，而且易于定制。

4. React Trend

地址：https://unsplash.github.io/react-trend/

React 框架的這個組件是用于創(chuàng)建 Mashable 樣式圖形的輕量級和簡單的解決方案。它是由 Unsplash 創(chuàng)建的，它是一種非常簡約組件。

它不制作其他圖形或有許多自定義選項，但足以使頁面保持明亮并解決此問題。

5. Nachos UI

地址：https://avocode.com/nachos-ui

Nachos UI 是一個包含 30 多個可定制元素的 UI 套件。有表單域、加載指示器、Gravatar 界面等等。該項目簡單易用，每個組件都充滿了最適合您項目的自定義選項。

6. Yargs

地址：http://yargs.js.org/

Yargs 是一個基于 Node.JS 創(chuàng)建交互式命令行應(yīng)用程序的框架。它有幾個選項可以快速配置命令、傳遞多個參數(shù)，甚至是快捷方式。

它甚至?xí)詣由蓭椭藛巍＿@個框架對于那些使用命令行創(chuàng)建應(yīng)用程序的人來說更具技術(shù)性，但它非?？?，我決定將它放在這里。

7. Extension Boilerplate

地址：https://www.emailthis.me/open-source/extension-boilerplate

該項目是創(chuàng)建瀏覽器擴展的絕佳基礎(chǔ)。它是跨瀏覽器的，這意味著您只需制作一次，它就可以適應(yīng)許多不同的瀏覽器。

基于 WebExtensions，它允許同時實現(xiàn) Chrome、Opera 和 Firefox。發(fā)送到每個瀏覽器的商店時，需要諸如實時重新加載和 Sketch 的多個資產(chǎn)等功能。

8.FitVids

地址：http://fitvidsjs.com/

每當(dāng)我將視頻放在網(wǎng)站上時，我必須獲得多年前在互聯(lián)網(wǎng)上找到的代碼以啟用其響應(yīng)能力。和其他替代品一樣，在我找到 FitVids 之前，我從不認為它們是好的。

它是一個 jQuery 解決方案，用于使 YouTube 和 Vimeo 視頻適應(yīng)用戶的屏幕。它保持視頻的原始縱橫比，也適用于自定義播放器。最重要的是，它易于使用，所以嘗試一下，看看視頻在您的網(wǎng)站上看起來會不會更好。

9. WebGradients

地址：https://webgradients.com/

我承認我不是漸變的鐵粉。但不可否認，這是近些年的一個設(shè)計趨勢。

WebGradients 是一組漂亮的漸變，你可以應(yīng)用于任何 HTML 頁面。您可以在項目網(wǎng)站上查看可用的漸變，只需單擊一下即可將它們復(fù)制到您的 CSS 文件中。

10. BigPicture

地址：https://henrygd.me/bigpicture/

BigPicture 是另一個不依賴于 jQuery 的 JavaScript 插件。相反，它與圖像和視頻同時工作，以擴展為彈出窗口、模式或疊加層。

這是一個非常輕量級的插件，可以使用 標簽以及背景圖像，因為它可以在 HTML 中自由實現(xiàn)。對于視頻，它可以直接與 YouTube 和 Vimeo 的直接鏈接一起使用。

11. Rellax

地址：https://dixonandmoe.com/rellax/

視差風(fēng)尚可能正在消失，但具有精心制作的視差的網(wǎng)站仍然給任何訪問者留下深刻印象。Relax 是一個不需要任何依賴的JavaScript 庫。

您只需在頁面上的圖像和元素上制作視差效果即可。它的 API 基于 HTML 屬性，可以輕松自定義頁面上各種元素的速度。

12. Reactive Listener

地址：https://zurb.com/playground/reactive-animation-listener

盡管名稱類似于 React 框架，但該庫不是 React 組件。相反，Reactive Listener 是 Zurb 創(chuàng)建的一個小型庫，用于“聽到”用戶在頁面上最復(fù)雜的動作。

它不只是觀察點擊，而是感知移動以假設(shè)用戶將轉(zhuǎn)到特定元素并使用該觸發(fā)器激活任何用戶的操作。

13. Muuri

地址：https://muuri.dev/

我喜歡像 Muuri 這樣的庫。這些代碼可以輕松地創(chuàng)建完全適合頁面不同尺寸的模塊，您甚至可以移動它們以創(chuàng)建可自定義的儀表板。它甚至讓我想起了 Masonry。

通過它創(chuàng)建任意數(shù)量的模塊，并將它們添加到響應(yīng)容器中來。這些模塊可以以任何你喜歡的方式拖動、過濾和排列，所有這些都帶有很酷的動畫。

14. Eagle.js

地址：https://zulko.github.io/eaglejs-demo/#/

Eagle.js 是一個 Vue.js，用于為網(wǎng)絡(luò)創(chuàng)建幻燈片演示。該框架支持動畫、主題和動畫小部件，并且很容易在演示文稿中重用組件、樣式和幻燈片。

15.Multi.js

地址：https://fabianlindfors.se/multijs/

Multi.js 庫接受一個屬性類型為 multiple 的元素，并將其轉(zhuǎn)換為受 Bootstrap 啟發(fā)的界面。此界面帶有搜索欄和直觀的功能選擇方式。它可以與 jQuery 一起使用，也可以不使用。

16. Moveto

地址：https://hsnaydd.github.io/moveTo/demo/

MoveTo 是一個 JavaScript 庫，用于在單擊按鈕時創(chuàng)建滾動動畫。有趣的是，這個庫在使用 gzip 壓縮時只有 1kg，并且不依賴于 jQuery 或其他任何東西。

它使用起來非常簡單，并且使用 window.scroll 原生 API 來制作動畫效果很好。

17. Anchorme

地址：https://alexcorvi.github.io/anchorme.js/

這個強大的 Anchorme JavaScript 庫可以檢測任何文本 URL。它快速、直接，并且有多種定制方式。

它可以將文本中寫入的鏈接轉(zhuǎn)換為帶有標簽 的實際鏈接，從字符串中提取 URL，以及驗證電子郵件、URL 或 IP。

18. Try CSS

地址：https://css.sitetent.com/

在創(chuàng)建響應(yīng)式網(wǎng)站時，這個 CSS 框架非常有用，或者創(chuàng)建者喜歡稱之為生存工具包，它滿足所有基本的 CSS 需求。

使用 gzip 時它只有 5kb，因此它不會像 Bootstrap 或 Foundation 等其他框架一樣重。此外，它遵循 BEM 標準，并在 flexbox 中有一個網(wǎng)格用于其布局。

總結(jié)

以上就是18個有用有趣的JavaScript和CSS庫的全部內(nèi)容，我希望你喜歡這個 JavaScript 和 CSS 插件列表。

如果你覺得它對你有用，請記得給我點個贊，如果你還有其他有用有趣的庫，也請在留言區(qū)與我一起分享它。

謝謝您的時間，感謝您的閱讀。

學(xué)習(xí)更多技能

請點擊中國公眾號