2017 年 4 月：15 个有趣的 JS 和 CSS 库
2017/04/12 · CSS ·
CSS,
JS
原稿出处： Danny
Markov 译文出处：IT程序狮
15 个好玩的 JS 和 CSS 库（2017 年 4 月）
时刻如寸阴若岁， Tutorialzine 为我们带来了 2017 年 6月份一些精心选料的可以 Web
开发资源。前端开发者们，让大家一块先睹为快啊！
15 个有意思的 JS 和 CSS 库（2017 年 4 月）
2017 年 9 月：15 个有意思的 JS 和 CSS 库
2017/09/21 · CSS,
JavaScript ·
资源
原文出处： Danny
Markov 译文出处：IT程序狮
迎来了金秋 9 月，在那拿到的时令，Tutorialzine
又为大家带来了何等优良、有趣的前端资源呢？前端开发者们，一起来探望有木有您要求的前端库。
开发者们，一起来探望有木有你要求的前端库。
1. Core UI
Core UI 是一个依照 Bootstrap 4
的田间管理模板，它提供了成立控制面板的可观自定义化解方案。同时，为了让你快速的将它与一些风靡的框架整合利用（AngularJS，Angular
2，React.js 和 Vue.js.），它还提供了有些单独的规范版本。
个有趣的。项目地址：【传送门】
时刻如日月如梭， Tutorialzine 为大家带来了 2017 年 十一月份一些心细选择的卓绝 Web
开发资源。前端开发者们，让大家一同先睹为快呢！
1.DisplayJS
DisplayJS 是一个帮衬您渲染 DOM 的简练框架。使用它，你可以更易于地将 JS
变量遍历到特定的 HTML 元素中，类似于 React 或 Vue.js 处理模版的法门。
花色地址：【传送门】
1. DisplayJS
DisplayJS 是一个支援您渲染 DOM 的概括框架。使用它，你可以更易于地将 JS
变量遍历到特定的 HTML 成分中，类似于 React 或 Vue.js 处理模版的办法。
类型地址：【 传送门 】
2. React Trend
这是由Unsplash公司产品的一款 React
组件，用于创造显示趋势与运动目标的优雅的线型图。该类型依照极简化的解决理念，并提要求您一个用来消除现实难题的简便、优雅的缓解方案。别的，它还有不合法的Vue
接口，但不会提供完整的图表库。
类型地址：【传送门】
2.React Beautiful DnD
那是由 Atlassian 开源的用于创建拖拽组件的 React 库。它提供了强硬、易用的
API，以及充分的定制选项和控件。它所生成的零部件，也存有了平整的 GPU
动画功能。当成分被捡拾或再一次排序时，其听从将会显得出来。
类型地址：【传送门】
2. React Beautiful DnD
那是由 Atlassian 开源的用于创建拖拽组件的 React 库。它提供了强压、易用的
API，以及丰裕的定制选项和控件。它所生成的零部件，也有着了平整的 GPU
动画功能。当成分被捡拾或再一次排序时，其效率将会显得出来。
类型地址：【 传送门
】
3. Element
Element 是一款基于 Vue.js 2.0 的 UI 组件库。它涵盖了 50+
的零件，并依据一致性的宏图标准，即界面中的设计样式、颜色搭配保持一致。同时，每一种成分都不难定制，并可在其他的
Vue.js 项目中运用。那还有一个用以打造实体模型的实用的Sketch
Template零件，你也能够看看。
品种地址：【传送门】
1. Core UI
Core UI 是一个依据 Bootstrap 4
的治本模板，它提供了成立控制面板的万丈自定义消除方案。同时，为了让您飞快的将它与局地风靡的框架整合利用（AngularJS，Angular
2，React.js 和 Vue.js.），它还提供了部分独自的榜样版本。
品类地址：【传送门】
- [React
Trend]()
这是由Unsplash团伙出品的一款
React
组件，用于创立体现趋势与移动目标的优雅的线型图。该项目比照极简化的缓解理念，并提须求你一个用来消除实际难点的简约、优雅的消除方案。其它，它还有野鸡的Vue
接口，但不会提供整机的图表库。
项目地址：【传送门】
3.R2
那是一个全新版的 Node.js
Request库，它提供了一个更轻量的
HTTP 客户端消除方案。与 Request 库不相同的是，它创造在原生浏览器Fetch
API以上，可被使用于
Node.js. 并且，Rubicon2 在收缩后仅有 16KB 大小。
项目地址：【传送门】
3. R2
那是一个全新版的 Node.js Request
库，它提供了一个更轻量的 HTTP 客户端消除方案。与 Request
库区其余是，它创建在原生浏览器 Fetch
API
之上，可被使用于 Node.js. 并且，奇骏2 在缩减后仅有 16KB 大小。
项目地址：【 传送门 】
4. Extension Boilerplate
其一项目为大家创造跨浏览器增加奠定了坚固的基础。Boilerplate
基于WebExtensions，可以两次写入扩充名，并得以将它们同时部署到
Chrome，Opera 和 Firefox 上。它还持有一些其余很酷的效用，例如实时重载。
项目地址：【传送门】
1. Element
Element 是一款基于 Vue.js 2.0 的 UI 组件库。它富含了 50+
的机件，并根据一致性的布置原则，即界面中的设计样式、颜色搭配保持一致。同时，每种成分都不难定制，并可在其余的
Vue.js 项目中运用。那还有一个用于创设实体模型的实用的Sketch
Template零件，你也得以看看。
花色地址：【传送门】
- [Extension
Boilerplate]()
本条类型为我们创造跨浏览器伸张奠定了深厚的基本功。Boilerplate
基于WebExtensions，可以一次写入增加名，并能够将它们同时配备到
Chrome，Opera 和 Firefox 上。它还持有一些别样很酷的效能，例如实时重载。
品种地址：【传送门】
4.Primer CSS
Primer CSS 是由 GitHub 的前端设计师研发的 CSS 框架。为了方便安装，它的
23 个包被划分为 3 个基本的元包，每一种包都能够透过 NPM
进行单独版本的公布。
品类地址：【传送门】
4. Primer CSS
Primer CSS 是由 GitHub 的前端设计师研发的 CSS 框架。为了方便安装，它的
23 个包被划分为 3 个中央的元包，各个包都可以透过 NPM
举办独立版本的公布。
项目地址：【 传送门 】
5. BigPicture
一款轻量级的灯箱插件，它亦可同时为图像和录制，提供流畅的卡通叠加弹出窗口。BigPicture
提供了一个很棒的功能，即它可以与`标签和background-image`成分一同工作，而开发者也能够拓展自由的记号。至于视频格式
– YouTube、Vimeo 和直接录制链接均可扶助。
品种地址：【传送门】
1. BigPicture
一款轻量级的灯箱插件，它亦可同时为图像和录制，提供流畅的动画叠加弹出窗口。BigPicture
提供了一个很棒的机能，即它可以与<img>标签和background-image要素一同工作，而开发者也得以拓展自由的标记。至于摄像格式
- YouTube、Vimeo 和直接视频链接均可支撑。
种类地址：【传送门】
- [Reactive
Listener]()
请不要因为它的名字，让您出现一些模糊，它可不是 React 组件。Reactive
listener是由Zurb集团出品的一款微型库，它亦可帮助大家创造高级的事件监听器，用来响应那一个（比不难的点击与悬停）更扑朔迷离的操作。方今它只可以够分辨用户何时向成分移动，但前途或者会扩充更多的作用。
品种地址：【传送门】
5.Puppeteer
Puppeteer 是一个用于操纵 Headless Chrome 的封装库，它由 Chrome DevTools
官方社团开展保证。你也足以在我们的稿子《使用 Node.js 自动化Google
Chrome》中，掌握越多大家尝试的一些效益。
连串地址：【传送门】
5. Puppeteer
Puppeteer 是一个用于操纵 Headless Chrome 的封装库，它由 Chrome DevTools
官方社团开展保险。你也足以在大家的稿子 《使用 Node.js 自动化Google
Chrome》
中，通晓更多我们品尝的部分作用。
品种地址：【 传送门 】
6. Reactive Listener
请不要因为它的名字，让您现身有的歪曲，它可不是 React 组件。Reactive
listener是由Zurb公司出品的一款微型库，它能够协理大家创制高级的风浪监听器，用来响应这么些（比简单的点击与悬停）更复杂的操作。方今它只好够辨识用户几时向成分移动，但前途可能会伸张越多的功能。
品类地址：【传送门】
1. Eagle.js
Eagle.js 是一个用于制作基于 Web 幻灯片的 Vue.js
框架，与Reveal.js一般。它接济动画、大旨、交互小部件（用于
Web 演示），并且可以轻松地在示范文稿之间举行零部件、幻灯片和体裁的拔取。
花色地址：【传送门】
6.Marko
这是一款与 React 和 Vue.js 类似的流行 JS
框架。它可以支持你将应用程序分解为单身的零件，并可随时间的延迟，以及响应用户操作的转变突显程序视图的转变。同时，马克o
能够在拔取中自动更新 DOM 来反馈数据。
品种地址：【传送门】
6. Marko
那是一款与 React 和 Vue.js 类似的风靡 JS
框架。它可以协理您将应用程序分解为独立的机件，并可随时间的推迟，以及响应用户操作的成形突显程序视图的变化。同时，马克o
可以在动用中自动更新 DOM 来反馈数据。
项目地址：【 传送门 】
7. Eagle.js
Eagle.js 是一个用以创造基于 Web 幻灯片的 Vue.js
框架，与Reveal.js诚如。它帮助动画、大旨、交互小部件（用于
Web 演示），并且可以轻松地在演示文稿之间举行零部件、幻灯片和体裁的重用。
类型地址：【传送门】
1. Planck.js
以此类型是游玩开发人员使用 C ++ 对
Box2D物理引擎的
JavaScript 重写。Plank.js 优化了 Web 和移动浏览器的引擎，并提供了一个对
JavaScript 友好的开源代码库和 API。所以，当开发人士在制作 2D
游戏时，他们能更百发百中。
品类地址：【传送门】
- [Create React Native
App]()
继成功了Create React
App花色的
Boilerplate 之后，这还有一个不必搭建项目配置，用于制作 React Native
应用程序的工具。无需安装 Xcode 或 Android Studio，你就足以对 React
Native 应用程序举行设置与测试。
花色地址：【传送门】
- [Pushy
Buttons]()
一款纯 CSS 已毕的 3D
按钮微型库。点击按钮后，会有种平滑推压的法力。而按钮包罗了 4 种尺寸与 3
种颜色，你可以通过 SASS 轻松的开展自定义，也得以大概地修改 .css 源文件。
品种地址：【传送门】
- [React
Overdrive]()
React Overdrive 是一个为 React
应用程序营造的简约、神奇的交接动画制作零部件。你可以轻松的在页面上，可能应用程序中不相同景色（或页面）之间创建出酷炫的对接动画效果。由于它的
API 是根据组件的，因而，即便在多个 JavaScript
文件之间展开切换，设置过渡效果也不行的简单。
体系地址：【传送门】
7.Redocx
Redocx 是一个用于转移 Word 文档的 React 库。你可以动用 React
组件对文档举行定义，并因此命令行将其渲染为 Word
文档。同时，此库也蕴含了表格、图像、页眉、页脚等充裕的零件供您挑选。
品种地址：【传送门】
7. Redocx
Redocx 是一个用来转移 Word 文档的 React 库。你可以使用 React
组件对文档进行定义，并经过命令行将其渲染为 Word
文档。同时，此库也蕴含了表格、图像、页眉、页脚等丰硕的零部件供您拔取。
品类地址：【 传送门 】
8. Planck.js
亚洲必赢官网 ，以此种类是游玩开发人士使用 C ++ 对 Box2D物理引擎的
JavaScript 重写。Plank.js 优化了 Web 和运动浏览器的发动机，并提供了一个对
JavaScript 友好的开源代码库和 API。所以，当开发人士在制作 2D
游戏时，他们能更百步穿杨。
种类地址：【传送门】
1. MoveTo
少了点击滚动动画库的每月资源引进，终究是不完全的。所以，在本月的资源推介列表中，咱们为大家带来了零爱惜的
JavaScript 库：MoveTo 。它是一个仅有 1kb 的 gzip 压缩，并超易使用的 JS
库，同时你可以使用原生的 window.scroll API 来创造动画。
花色地址：【传送门】
8.Fuzzysort
那是一个用以创设模糊搜索界面的 JS 库，类似 Sublime Text
中的界面样式。该库会依照查找查询的匹配度，总计出搜索匹配数与时长。
系列地址：【传送门】
8. Fuzzysort
那是一个用于打造模糊搜索界面的 JS 库，类似 Sublime Text
中的界面样式。该库会依照查找查询的匹配度，总括出搜索匹配数与时长。
品类地址：【 传送门 】
9. Create React Native App
继成功了Create React
App花色的
Boilerplate 之后，那还有一个不要搭建项目布局，用于创建 React Native
应用程序的工具。无需安装 Xcode 或 Android Studio，你就可以对 React
Native 应用程序举办安装与测试。
品种地址：【传送门】
1. Anchorme
Anchorme 是一个精锐的 JavaScript
库，它可以接收任何字符串或文本文件，并检测其中的享有 UPRADOL
地址。它很快、可相信，并有好多实用的效果，同时可以自定义选项。它的利用示例包涵：将文件中的链接转换为可点击的
HTML <a>标签，从字符串中提取 U哈弗L 地址，或将其视作电子邮件，U奥德赛L 和 IP
的验证器。
品类地址：【传送门】
- [RPG
Awesome]()
那是一个具备近 500 个科幻核心的免费矢量图标网站，它包罗了 ENVISIONPG
游戏中武器、盔甲、魔法以及库存物品等相关的图标，而利用方法也与其他网页图标字体相同。
(<i class="ra ra-sword"></i>) 甚至，你还足以行使 CSS 或 SASS
举办简短的自定义更改。
项目地址：【传送门】
9.Trowel
Trowel 是一个 SASS 工具包，它提供了一种写入 SASS
变量的新章程，允许你将八个变量分组到单个对象中，让您的 SASS
代码更易编写，更易阅读。
花色地址：【传送门】
9. Trowel
Trowel 是一个 SASS 工具包，它提供了一种写入 SASS
变量的新办法，允许你将七个变量分组到单个对象中，让你的 SASS
代码更易编写，更易阅读。
序列地址：【 传送门 】
10. Pushy Buttons
一款纯 CSS 达成的 3D
按钮微型库。点击按钮后，会有种平滑推压的作用。而按钮包括了 4 种尺寸与 3
种颜色，你可以经过 SASS 轻松的举行自定义，也足以省略地修改 .css 源文件。
品种地址：【传送门】
1. Tent CSS
Tent CSS 是一个基础的 CSS
框架，它为你提供了打造响应式网站所必不可少的主旨组件。它是轻量级的（gzip
压缩后仅有 5kb 大小），并按照BEM
标准，同时可用于现代的
Flexbox 网格布局。
类型地址：【传送门】
感激你的开卷。若您抱有收获，欢迎点赞与分享。
注：
- 正文版权归原小编所有，仅用于学习与沟通。
- 如需转发译文，烦请按江湖注脚出处消息，多谢！
英文原稿：15 Interesting JavaScript and CSS Libraries for April
2017
作者：Danny Markov
译者：IT程序狮
译文地址：http://www.jianshu.com/p/7f4efaf22adc
10.Vivify
Vivify 是由纯 CSS 写的卡通片库，该库提供了跨越 50
种动画效果供你挑选。你只必要将Vivify的类添加到相应的元素，即可使其爆发动画效果，并且增进infinite类后，动画就可以循环播放了。
花色地址：【传送门】
10. Vivify
Vivify 是由纯 CSS 写的动画片库，该库提供了领先 50
种动画效果供你挑选。你只要求将 Vivify
的类添加到相应的元素，即可使其暴发动画效果，并且添加 infinite
类后，动画就足以循环播放了。
项目地址：【 传送门 】
11. React Overdrive
React Overdrive 是一个为 React
应用程序创设的简单、神奇的连接动画制作零部件。你可以轻松的在页面上，可能应用程序中分化境况（或页面）之间创造出酷炫的连通动画效果。由于它的
API 是依照组件的，因而，纵然在八个 JavaScript
文件之间开展切换，设置过渡效果也尤其的简单。
品种地址：【传送门】
11.Tons of Checkboxes
那是一个 CSS
复选框组件合集，它由大小不一、样式各异的复选框组成。同时，所有的复选框都富有
4 种不一致的尺寸，并且同盟 IE9+ 和拥有现代浏览器。
序列地址：【传送门】
11. Tons of Checkboxes
那是一个 CSS
复选框组件合集，它由大小不一、样式各异的复选框组成。同时，所有的复选框都有所
4 种不一样的尺寸，并且格外 IE9+ 和有着现代浏览器。
品类地址：【 传送门
】
12. MoveTo
少了点击滚动动画库的每月资源推荐，毕竟是不完整的。所以，在本月的资源引进列表中，大家为我们带来了零重视的
JavaScript 库：MoveTo 。它是一个仅有 1kb 的 gzip 压缩，并超易使用的 JS
库，同时你可以运用原生的 window.scroll API 来制作动画。
品类地址：【传送门】
12.Push
Push 是一个通用的桌面公告框架。它依据强大的Notification
API，可作为可信的跨浏览器解决方案，如若用户的浏览器不辅助新型的
API，则会沿用老版 API 已毕。
连串地址：【传送门】
12. Push
Push 是一个通用的桌面公告框架。它依据强大的 Notification
API
，可作为可相信的跨浏览器化解方案，倘诺用户的浏览器不协助最新的
API，则会沿用老版 API 达成。
品种地址：【 传送门 】
13. Anchorme
Anchorme 是一个无敌的 JavaScript
库，它能够接过任何字符串或文本文件，并检测其中的装有 UOdysseyL
地址。它很快、可相信，并有很多实用的效应，同时可以自定义选项。它的施用示例包罗：将文件中的链接转换为可点击的
HTML “标签，从字符串中领到 UMuranoL 地址，或将其当作电子邮件，U途睿欧L 和 IP
的验证器。
品类地址：【传送门】
13.react-imgpro
react-imgpro 是一个用以图像处理的 React 组件。它能够使用 filters
举办图像处理，并生成 base64
格式的图像。它大致易用，你只需求指定一个图像的 U兰德酷路泽L，选用相应的
filters，并填写输出图像的轻重与格式即可。
花色地址：【传送门】
13. react-imgpro
react-imgpro 是一个用于图像处理的 React 组件。它能够利用 filters
进行图像处理，并生成 base64
格式的图像。它大致易用，你只必要指定一个图像的 USportageL，选择相应的
filters，并填写输出图像的大小与格式即可。
项目地址：【 传送门 】
14. RPG Awesome
那是一个有着近 500 个科幻大旨的免费矢量图标网站，它含有了 LacrossePG
游戏中武器、盔甲、魔法以及库存物品等连锁的图标，而拔取办法也与任何网页图标字体相同。
(“) 甚至，你还是能利用 CSS 或 SASS 举行简要的自定义更改。
花色地址：【传送门】
14.Lozad.js
Lozad.js 是一个高品质、可安插的纯 JS 完成的懒加载器。它依照
Intersection Observer
API，没有此外借助，支持动态懒加载添日成分。
同时，它也是轻量级库，在 Gzip 压缩后唯有 535 字节大小。
项目地址：【传送门】
14. Lozad.js
Lozad.js 是一个高品质、可配备的纯 JS 完毕的懒加载器。它依照
Intersection Observer
API
，没有其余借助，协理动态懒加载添日币素。 同时，它也是轻量级库，在 Gzip
压缩后唯有 535 字节大小。
品种地址：【 传送门 】
15. Tent CSS
Tent CSS 是一个基础的 CSS
框架，它为你提供了打造响应式网站所不可或缺的主题组件。它是轻量级的（gzip
压缩后仅有 5kb 大小），并依照BEM
标准，同时可用来现代的 Flexbox 网格布局。
项目地址：【传送门】
多谢您的读书。若你富有收获，欢迎点赞与分享。
1 赞 3 收藏
评论
15.Semiotic
这是一个结合了 React 和 D3 的数量可视化框架。它提供了 3
体系型的框架（XYFrame，OSportageFrame，NetworkFrame），可接济您生成一些酷炫图表。而显示数据的主意，也足以透过调整框架中安装大概添加
CSS 样式举行定制。
种类地址：【传送门】
多谢你的阅读。若您所有收获，欢迎点赞与分享。
1 赞 5 收藏
评论
15. Semiotic
这是一个结合了 React 和 D3 的数目可视化框架。它提供了 3
种档次的框架（XYFrame，O本田UR-VFrame，NetworkFrame），可襄助你生成一些酷炫图表。而展现数据的艺术，也足以经过调整框架中安装或然加上
CSS 样式进行定制。
类型地址：【 传送门 】
来自：