时光飞逝， 每月 Tutorialzine 都会为大家分享一些有趣的前端库。那么在本月，又准备了哪些优秀的 Web 开发资源呢？前端儿，一起来瞧瞧吧！
1. Buefy
<img src="https://pic3.zhimg.com/v2-1d7c93c620af9bce0845405b42864052_b.jpg" data-rawwidth="785" data-rawheight="370" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic3.zhimg.com/v2-1d7c93c620af9bce0845405b42864052_r.jpg">这是一个基于 Bulma 的 Vue.js 轻量级 UI 组件，而这是一个基于 Bulma 的 Vue.js 轻量级 UI 组件，而 Bulma 则是基于 Flexbox 的 CSS 库。Buefy 具备典型的 Web 应用程序所必备的所有组件，例如 modals、toast 以及 notifications 等动态元素，使开发人员可以快速添加任何用户界面到其现有的 Vue.js 项目。项目地址：【传送门】
2. HR.js
<img src="https://pic4.zhimg.com/v2-fcfcddf9c419cfa51e4170058b3224e3_b.jpg" data-rawwidth="785" data-rawheight="370" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic4.zhimg.com/v2-fcfcddf9c419cfa51e4170058b3224e3_r.jpg">HR.js 是一个用于高亮并替换 DOM 中文本的零依赖库。它的 API 简直不能再简单了。你只需要使用 CSS 选择器来定位保存所需文本的 HTML 父元素，选择好要高亮的单词，并设置背景颜色，就可以搞定了。HR.js 是一个用于高亮并替换 DOM 中文本的零依赖库。它的 API 简直不能再简单了。你只需要使用 CSS 选择器来定位保存所需文本的 HTML 父元素，选择好要高亮的单词，并设置背景颜色，就可以搞定了。项目地址：【传送门】
3. React VR
<img src="https://pic2.zhimg.com/v2-ec1b43704cc1341f9899a68ddbb6dd81_b.png" data-rawwidth="785" data-rawheight="198" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic2.zhimg.com/v2-ec1b43704cc1341f9899a68ddbb6dd81_r.png">React VR 是用于创建在 Web 浏览器中运行 VR 应用程序的框架。它将现代的 API（如 WebGL 和 WebVR）与 React 的声明式渲染进行搭配，从而产生可以通过各种设备使用的体验。React VR 是用于创建在 Web 浏览器中运行 VR 应用程序的框架。它将现代的 API（如 WebGL 和 WebVR）与 React 的声明式渲染进行搭配，从而产生可以通过各种设备使用的体验。项目地址：【传送门】
4. Tippy.js
<img src="https://pic2.zhimg.com/v2-e56fadcc8cd9c9b7a02377228f4f6901_b.jpg" data-rawwidth="785" data-rawheight="370" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic2.zhimg.com/v2-e56fadcc8cd9c9b7a02377228f4f6901_r.jpg">这是一个用于动画工具提示的纯 JavaScript 库。Tippy.js 提供了丰富的悬停效果以及超过 20 个自定义选项。它也是超轻量级的库，并具备相当不错的浏览器兼容性。但如果出现个别浏览器不支持的情况，它会自动退回至常规的 title 属性。这是一个用于动画工具提示的纯 JavaScript 库。Tippy.js 提供了丰富的悬停效果以及超过 20 个自定义选项。它也是超轻量级的库，并具备相当不错的浏览器兼容性。但如果出现个别浏览器不支持的情况，它会自动退回至常规的 title 属性。项目地址：【传送门】
5. Barba.js
<img src="https://pic2.zhimg.com/v2-b1badc4566eeb0bfd98e2208bf53322d_b.jpg" data-rawwidth="785" data-rawheight="149" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic2.zhimg.com/v2-b1badc4566eeb0bfd98e2208bf53322d_r.jpg">Barba.js 是一个无依赖的 JavaScript 库，可用于在单页应用程序的视图间创建平滑的过渡效果。该库的逻辑是围绕 PJAX（推送状态 AJAX）来设计的，绕过正常有效的 URL，并通过 XMLHttpRequest 来加载新页面。Barba 还能确保通过Barba.js 是一个无依赖的 JavaScript 库，可用于在单页应用程序的视图间创建平滑的过渡效果。该库的逻辑是围绕 PJAX（推送状态 AJAX）来设计的，绕过正常有效的 URL，并通过 XMLHttpRequest 来加载新页面。Barba 还能确保通过 Push 状态的 API ，在应用程序的 URL 中可以正确的反映出状态的变化。项目地址：【传送门】
6. UIkit
<img src="https://pic1.zhimg.com/v2-48a6ab294a5d765303fb194c61248cbc_b.jpg" data-rawwidth="890" data-rawheight="300" class="origin_image zh-lightbox-thumb" width="890" data-original="https://pic1.zhimg.com/v2-48a6ab294a5d765303fb194c61248cbc_r.jpg">UIkit 是一个优秀的轻量级前端框架，它包含了相应的 SVG 图标字体以及丰富的组件。无论是外观，还是框架，UIkit 的设计都十分的出彩。它不光具备统一的样式，还有易于记忆的 API，许多自定义选项以及有用的修饰器类，并且它的用文档编写的也相当的出众。UIkit 是一个优秀的轻量级前端框架，它包含了相应的 SVG 图标字体以及丰富的组件。无论是外观，还是框架，UIkit 的设计都十分的出彩。它不光具备统一的样式，还有易于记忆的 API，许多自定义选项以及有用的修饰器类，并且它的用文档编写的也相当的出众。项目地址：【传送门】
7. Haul
<img src="https://pic4.zhimg.com/v2-6be397633ad80815dc75db762ff299af_b.png" data-rawwidth="785" data-rawheight="157" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic4.zhimg.com/v2-6be397633ad80815dc75db762ff299af_r.png">Haul 是一个用于开发 React Native 应用程序的命令行工具。它可以直接替代 React Native packager，提供比 Webpack 更好的支持，并能够改进错误消息，大大减少编译时间。Haul 也拥有出色的使用文档，并且完全开源、可定制。Haul 是一个用于开发 React Native 应用程序的命令行工具。它可以直接替代 React Native packager，提供比 Webpack 更好的支持，并能够改进错误消息，大大减少编译时间。Haul 也拥有出色的使用文档，并且完全开源、可定制。项目地址：【传送门】
8. AcrossTabs
<img src="https://pic2.zhimg.com/v2-02be65bc8184e461bc833fd8704e7281_b.jpg" data-rawwidth="785" data-rawheight="370" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic2.zhimg.com/v2-02be65bc8184e461bc833fd8704e7281_r.jpg">AcrossTabs 是一个用于跨浏览器 Tabs 间进行通信的 JavaScript 库，你可以使用它在不同的浏览器 Tabs 上打开或关闭网页。由于父 Tab 可以访问子 Tab 上有用的信息（例如 UID），所以它可以判断子 Tab 是否依旧打开，或者已关闭。AcrossTabs 是一个用于跨浏览器 Tabs 间进行通信的 JavaScript 库，你可以使用它在不同的浏览器 Tabs 上打开或关闭网页。由于父 Tab 可以访问子 Tab 上有用的信息（例如 UID），所以它可以判断子 Tab 是否依旧打开，或者已关闭。项目地址：【传送门】
9. Stylelint
<img src="https://pic2.zhimg.com/v2-c63aee1f0eae5d96cdb20128b63c7359_b.jpg" data-rawwidth="785" data-rawheight="370" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic2.zhimg.com/v2-c63aee1f0eae5d96cdb20128b63c7359_r.jpg">Stylelint 是一款现代的 CSS linter 工具，它可以帮助团队在样式表中执行固定的 CSS 标准。该库非常强大，它不仅可以让你禁止或设置白名单属性，还能够捕获错误以及识别 SCSS 语法。同时，Stylelint 也可完全定制，帮助你添加或去除一些规则选项。Stylelint 是一款现代的 CSS linter 工具，它可以帮助团队在样式表中执行固定的 CSS 标准。该库非常强大，它不仅可以让你禁止或设置白名单属性，还能够捕获错误以及识别 SCSS 语法。同时，Stylelint 也可完全定制，帮助你添加或去除一些规则选项。项目地址：【传送门】
10. Iconate
<img src="https://pic4.zhimg.com/v2-346f091f85f6ea3b8b365c88ef101f2f_b.jpg" data-rawwidth="905" data-rawheight="153" class="origin_image zh-lightbox-thumb" width="905" data-original="https://pic4.zhimg.com/v2-346f091f85f6ea3b8b365c88ef101f2f_r.jpg">这是一个非常棒的 Vanilla JavaScript 库。通过点击图标，它能够帮你完成带有丰富平滑动画效果的图标转换。你也可以将 Iconate 与所有的 CSS 图标字体一同使用。即你只需在 HTML 中添加一个图标，并使用简单的 JavaScript API 来选择要将其转换为哪一种图标，同时选择相应的动画效果就搞定了。这是一个非常棒的 Vanilla JavaScript 库。通过点击图标，它能够帮你完成带有丰富平滑动画效果的图标转换。你也可以将 Iconate 与所有的 CSS 图标字体一同使用。即你只需在 HTML 中添加一个图标，并使用简单的 JavaScript API 来选择要将其转换为哪一种图标，同时选择相应的动画效果就搞定了。项目地址：【传送门】
11. React-Datasheet
<img src="https://pic3.zhimg.com/v2-1a80b275de3959669a3e558fe753e0ee_b.png" data-rawwidth="785" data-rawheight="370" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic3.zhimg.com/v2-1a80b275de3959669a3e558fe753e0ee_r.png">React-Datasheet 是一个用于向应用程序添加类似 Excel 数据表的 React 组件。你可以对单元格进行自由编辑、分组选择、复制、粘贴、删除等操作。另外，在 GitHub 上还有三个有用的示例，供你参考。即基本的表，带有公式的表以及嵌套组件的表。React-Datasheet 是一个用于向应用程序添加类似 Excel 数据表的 React 组件。你可以对单元格进行自由编辑、分组选择、复制、粘贴、删除等操作。另外，在 GitHub 上还有三个有用的示例，供你参考。即基本的表，带有公式的表以及嵌套组件的表。项目地址：【传送门】
12. Pure CSS
<img src="https://pic2.zhimg.com/v2-56323f73a4a3d9db59ce0c274562bff9_b.jpg" data-rawwidth="950" data-rawheight="141" class="origin_image zh-lightbox-thumb" width="950" data-original="https://pic2.zhimg.com/v2-56323f73a4a3d9db59ce0c274562bff9_r.jpg">这是一个轻量级、响应式的纯 CSS 模块框架。整个库在 gzip 压缩后，仅有 3.8 kb 的大小，如果你仅使用其中的一部分模块，那 CSS 真是小到没有朋友了！同时，它模块包括了基本样式集、响应格网、表单组件、按钮、表格和菜单，适用于任何的 Web 项目。这是一个轻量级、响应式的纯 CSS 模块框架。整个库在 gzip 压缩后，仅有 3.8 kb 的大小，如果你仅使用其中的一部分模块，那 CSS 真是小到没有朋友了！同时，它模块包括了基本样式集、响应格网、表单组件、按钮、表格和菜单，适用于任何的 Web 项目。项目地址：【传送门】
13. Simple Icons
<img src="https://pic1.zhimg.com/v2-974313e6ce26feffa84160c537a96f4c_b.jpg" data-rawwidth="785" data-rawheight="370" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic1.zhimg.com/v2-974313e6ce26feffa84160c537a96f4c_r.jpg">Simple Icons 是一个涉及知名品牌（涵盖社交网络、应用程序、服务等）的免费图标合集。这些图标都是用 SVG 制作的，所以它们可以被缩放到任何尺寸，不用担心图片的像素。而大多数图标的大小都低于 500 字节。Simple Icons 是一个涉及知名品牌（涵盖社交网络、应用程序、服务等）的免费图标合集。这些图标都是用 SVG 制作的，所以它们可以被缩放到任何尺寸，不用担心图片的像素。而大多数图标的大小都低于 500 字节。项目地址：【传送门】
14. Chroma.js
<img src="https://pic3.zhimg.com/v2-df97bb4faa67c3b6e9a0e9fd1c1822de_b.jpg" data-rawwidth="1180" data-rawheight="171" class="origin_image zh-lightbox-thumb" width="1180" data-original="https://pic3.zhimg.com/v2-df97bb4faa67c3b6e9a0e9fd1c1822de_r.jpg">Chroma.js 是一个用于处理颜色的微型 JavaScript 库。它提供了丰富的 API，以及超过 50 种用于操纵颜色的功能，让你可以使用色彩模式切换，改变亮度和饱和度，创建渐变比例等许多实用的色阶处理方法。Chroma.js 是一个用于处理颜色的微型 JavaScript 库。它提供了丰富的 API，以及超过 50 种用于操纵颜色的功能，让你可以使用色彩模式切换，改变亮度和饱和度，创建渐变比例等许多实用的色阶处理方法。项目地址：【传送门】
15. Weex
<img src="https://pic2.zhimg.com/v2-8c1d4a851f674ae15f55c9db4742d881_b.jpg" data-rawwidth="785" data-rawheight="370" class="origin_image zh-lightbox-thumb" width="785" data-original="https://pic2.zhimg.com/v2-8c1d4a851f674ae15f55c9db4742d881_r.jpg">Weex 是一个构建跨平台的移动应用程序框架，类似于 React Native，但适用于 Vue.js. 你可以利用 HTML、CSS 和 JavaScript 编写应用程序，并将其以 Android 和 iOS 客户端的形式呈现。该框架有许多内置的组件、API 和其他有用的功能。Weex 是一个构建跨平台的移动应用程序框架，类似于 React Native，但适用于 Vue.js. 你可以利用 HTML、CSS 和 JavaScript 编写应用程序，并将其以 Android 和 iOS 客户端的形式呈现。该框架有许多内置的组件、API 和其他有用的功能。项目地址：【传送门】
感谢你的阅读。若你有所收获，欢迎点赞与分享。
注：
- 本文版权归原作者所有，仅用于学习与交流；
- 如需转载译文，烦请按下方注明出处信息，谢谢！
英文原文：15 Interesting JavaScript and CSS Libraries for May 2017
作者：Danny Markov
译者：IT程序狮
译文地址： zhuanlan.zhihu.com/p/26771146
