我发现了18个有趣的 JavaScript 和 CSS 库

「爱情、让人受尽委屈。」 2022-09-15 12:30 158阅读 0赞

![cb9bf172934bf3c6a1b1c2a721bcecd1.png][]

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

翻译 | 杨小爱

作为一名 JavaScript 开发人员，我知道有很多库和资源。如果我不想办法找不到和发现他们，他们就不可能找到我。因此，如果您想节省一些时间并提高工作效率，你可以阅读今天文章里的内容，以帮助你提高工作效率。

**1. Core UI**

地址：https://coreui.io/

我可以说 Core UI 是创建管理和管理模板的快捷方式。除了基于 Bootstrap 之外，它还提供样板版本，允许与此类项目中常用的框架快速集成。它支持的框架是有AngularJS、ReactJs 和 VueJs。

**2. MJML**

地址：https://mjml.io/

如果在 Web 开发中仍然非常无聊，那就创建响应式电子邮件。

考虑到这一点，这个称为 MJML 的框架试图通过简单的语法来促进这个过程。几个时尚的组件可以编译成可在任何设备上运行的 HTML 电子邮件。

让我们面对现实吧，表格电子邮件的时代即将结束，就像表格网站早已不复存在一样。

**3. Baguette box**

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

这个纯 JavaScirpt 库非常适合不想在项目中使用 jQuery 的任何人。它非常轻巧，使创建响应式画廊的过程变得非常简单。

它不使用 JavaScript 来执行动画，而是使用 CSS3 过渡。但是，即使您使用 jQuery，我也建议您进行测试，因为它比市面上的许多替代品都要轻巧，而且易于定制。

**4. React Trend**

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

React 框架的这个组件是用于创建 Mashable 样式图形的轻量级和简单的解决方案。它是由 Unsplash 创建的，它是一种非常简约组件。

它不制作其他图形或有许多自定义选项，但足以使页面保持明亮并解决此问题。

**5. Nachos UI**

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

Nachos UI 是一个包含 30 多个可定制元素的 UI 套件。有表单域、加载指示器、Gravatar 界面等等。该项目简单易用，每个组件都充满了最适合您项目的自定义选项。

**6. Yargs**

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

Yargs 是一个基于 Node.JS 创建交互式命令行应用程序的框架。它有几个选项可以快速配置命令、传递多个参数，甚至是快捷方式。

它甚至会自动生成帮助菜单。这个框架对于那些使用命令行创建应用程序的人来说更具技术性，但它非常酷，我决定将它放在这里。

**7. Extension Boilerplate**

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

该项目是创建浏览器扩展的绝佳基础。它是跨浏览器的，这意味着您只需制作一次，它就可以适应许多不同的浏览器。

基于 WebExtensions，它允许同时实现 Chrome、Opera 和 Firefox。发送到每个浏览器的商店时，需要诸如实时重新加载和 Sketch 的多个资产等功能。

**8.FitVids**

地址：http://fitvidsjs.com/

每当我将视频放在网站上时，我必须获得多年前在互联网上找到的代码以启用其响应能力。和其他替代品一样，在我找到 FitVids 之前，我从不认为它们是好的。

它是一个 jQuery 解决方案，用于使 YouTube 和 Vimeo 视频适应用户的屏幕。它保持视频的原始纵横比，也适用于自定义播放器。最重要的是，它易于使用，所以尝试一下，看看视频在您的网站上看起来会不会更好。

**9. WebGradients**

地址：https://webgradients.com/

我承认我不是渐变的铁粉。但不可否认，这是近些年的一个设计趋势。

WebGradients 是一组漂亮的渐变，你可以应用于任何 HTML 页面。您可以在项目网站上查看可用的渐变，只需单击一下即可将它们复制到您的 CSS 文件中。

**10. BigPicture**

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

BigPicture 是另一个不依赖于 jQuery 的 JavaScript 插件。相反，它与图像和视频同时工作，以扩展为弹出窗口、模式或叠加层。

这是一个非常轻量级的插件，可以使用 <img> 标签以及背景图像，因为它可以在 HTML 中自由实现。对于视频，它可以直接与 YouTube 和 Vimeo 的直接链接一起使用。

**11. Rellax**

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

视差风尚可能正在消失，但具有精心制作的视差的网站仍然给任何访问者留下深刻印象。Relax 是一个不需要任何依赖的JavaScript 库。

您只需在页面上的图像和元素上制作视差效果即可。它的 API 基于 HTML 属性，可以轻松自定义页面上各种元素的速度。

**12. Reactive Listener**

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

尽管名称类似于 React 框架，但该库不是 React 组件。相反，Reactive Listener 是 Zurb 创建的一个小型库，用于“听到”用户在页面上最复杂的动作。

它不只是观察点击，而是感知移动以假设用户将转到特定元素并使用该触发器激活任何用户的操作。

**13. Muuri**

地址：https://muuri.dev/

我喜欢像 Muuri 这样的库。这些代码可以轻松地创建完全适合页面不同尺寸的模块，您甚至可以移动它们以创建可自定义的仪表板。它甚至让我想起了 Masonry。

通过它创建任意数量的模块，并将它们添加到响应容器中来。这些模块可以以任何你喜欢的方式拖动、过滤和排列，所有这些都带有很酷的动画。

**14. Eagle.js**

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

Eagle.js 是一个 Vue.js，用于为网络创建幻灯片演示。该框架支持动画、主题和动画小部件，并且很容易在演示文稿中重用组件、样式和幻灯片。

**15.Multi.js**

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

Multi.js 库接受一个属性类型为 multiple 的元素，并将其转换为受 Bootstrap 启发的界面。此界面带有搜索栏和直观的功能选择方式。它可以与 jQuery 一起使用，也可以不使用。

**16. Moveto**

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

MoveTo 是一个 JavaScript 库，用于在单击按钮时创建滚动动画。有趣的是，这个库在使用 gzip 压缩时只有 1kg，并且不依赖于 jQuery 或其他任何东西。

它使用起来非常简单，并且使用 window.scroll 原生 API 来制作动画效果很好。

**17. Anchorme**

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

这个强大的 Anchorme JavaScript 库可以检测任何文本 URL。它快速、直接，并且有多种定制方式。

它可以将文本中写入的链接转换为带有标签 <a> 的实际链接，从字符串中提取 URL，以及验证电子邮件、URL 或 IP。

**18. Try CSS**

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

在创建响应式网站时，这个 CSS 框架非常有用，或者创建者喜欢称之为生存工具包，它满足所有基本的 CSS 需求。

使用 gzip 时它只有 5kb，因此它不会像 Bootstrap 或 Foundation 等其他框架一样重。此外，它遵循 BEM 标准，并在 flexbox 中有一个网格用于其布局。

**总结**

以上就是18个有用有趣的JavaScript和CSS库的全部内容，我希望你喜欢这个 JavaScript 和 CSS 插件列表。

如果你觉得它对你有用，请记得给我点个赞，如果你还有其他有用有趣的库，也请在留言区与我一起分享它。

谢谢您的时间，感谢您的阅读。

#  #

**学习更多技能**

**请点击中国公众号**

![8f8c0f8fe2fb53f62379ebc3475d0c1b.gif][]

![9ec80173c9795d074e171a7b40c1c074.png][]

![e011301dbf15a629a42cd4598c801b76.png][]

[cb9bf172934bf3c6a1b1c2a721bcecd1.png]: /images/20220828/4e7bdf1940724e5c84b0cb44163d30a3.png
[8f8c0f8fe2fb53f62379ebc3475d0c1b.gif]: /images/20220828/af39df17c8014e1eaac3660f6d2c5727.png
[9ec80173c9795d074e171a7b40c1c074.png]: /images/20220828/bdc0b449cf8945d9a05cf13ef4176752.png
[e011301dbf15a629a42cd4598c801b76.png]: /images/20220828/5ff77db62322478a803aecfeaa2e1a38.png