个有趣的

2017 年 9 月:15 个有趣的 JS 和 CSS 库

2017/09/21 · CSS,
JavaScript ·
资源

原文出处: Danny
Markov   译文出处:IT程序狮   

美高梅开户网址 1

迎来了金秋 9 月,在那获得的时令,Tutorialzine
又为咱们带来了哪些卓绝、有趣的前端能源呢?前端开发者们,一起来探望有木有你必要的前端库。


开发者们,一起来探望有木有你要求的前端库。

迎来了金秋 9 月,在这获得的时节,Tutorialzine
又为大家带来了怎么非凡、有趣的前端财富呢?前端开发者们,一起来探视有木有您需求的前端库。

2017 年 4 月:15 个好玩的 JS 和 CSS 库

2017/04/12 · CSS ·
CSS,
JS

原稿出处: Danny
Markov   译文出处:IT程序狮   

美高梅开户网址 2

15 个有意思的 JS 和 CSS 库(2017 年 4 月)

时刻如日月如梭, Tutorialzine 为大家带来了 2017 年 11月份一些仔细选料的绝妙 Web
开发能源。前端开发者们,让我们一同先睹为快呢!


1.DisplayJS

美高梅开户网址 3

DisplayJS 是一个推搡您渲染 DOM 的简练框架。使用它,你能够更易于地将 JS
变量遍历到一定的 HTML 成分中,类似于 React 或 Vue.js 处理模版的格局。

品种地址:【传送门】

1. DisplayJS

美高梅开户网址 4

DisplayJS 是三个救助您渲染 DOM 的归纳框架。使用它,你能够更易于地将 JS
变量遍历到一定的 HTML 成分中,类似于 React 或 Vue.js 处理模版的措施。

品类地址:【 传送门 】


1. Core UI

美高梅开户网址 5

Core UI 是二个基于 Bootstrap 4
的田管模板,它提供了创制控制面板的中度自定义务消防队除方案。同时,为了让您快捷的将它与局地风行的框架整合利用(AngularJS,Angular
2,React.js 和 Vue.js.),它还提供了有个别单独的样板版本。

体系地址:【传送门】

2.React Beautiful DnD

美高梅开户网址 6

那是由 Atlassian 开源的用于创造拖拽组件的 React 库。它提供了强劲、易用的
API,以及充裕的定制选项和控件。它所生成的零件,也保有了平整的 GPU
动画成效。当成分被捡拾或重复排序时,其意义将会议及展览示出来。

种类地址:【传送门】

2. React Beautiful DnD

美高梅开户网址 7

这是由 Atlassian 开源的用于成立拖拽组件的 React 库。它提供了强大、易用的
API,以及丰盛的定制选项和控件。它所生成的机件,也存有了平整的 GPU
动画成效。当成分被捡拾或重复排序时,其效用将会来得出来。

花色地址:【 传送门

1.DisplayJS

DisplayJS 是贰个拉扯您渲染 DOM 的简约框架。使用它,你能够更易于地将 JS
变量遍历到特定的 HTML 成分中,类似于 React 或 Vue.js 处理模版的章程。

类型地址:【传送门】

2. React Trend

美高梅开户网址 8

这是由Unsplash团伙出品的一款 React
组件,用于创建体现趋势与运动指标的优雅的线型图。该项目依照极简化的缓解理念,并提供给您二个用来化解实际难题的简易、优雅的消除方案。其余,它还有野鸡的Vue
接口,但不会提供整机的图表库。

项目地址:【传送门】

3.R2

美高梅开户网址 9

那是2个全新版的 Node.js
Request库,它提供了3个更轻量的
HTTP 客户端消除方案。与 Request 库不一致的是,它创设在原生浏览器Fetch
API以上,可被使用于
Node.js. 并且,QX562 在收缩后仅有 16KB 大小。

项目地址:【传送门】

3. R2

美高梅开户网址 10

那是1个全新版的 Node.js Request
库,它提供了1个更轻量的 HTTP 客户端消除方案。与 Request
库分歧的是,它创制在原生浏览器 Fetch
API
之上,可被应用于 Node.js. 并且,景逸SUV2 在缩减后仅有 16KB 大小。

品种地址:【 传送门 】

2.React Beautiful DnD

那是由 Atlassian 开源的用于创造拖拽组件的 React 库。它提供了强硬、易用的
API,以及丰裕的定制选项和控件。它所生成的组件,也装有了平坦的 GPU
动画效能。当成分被捡拾或另行排序时,其作用将会呈现出来。

项目地址:【传送门】

3. Element

美高梅开户网址 11

Element 是一款基于 Vue.js 2.0 的 UI 组件库。它包涵了 50+
的机件,并根据一致性的安插基准,即界面中的设计样式、颜色搭配保持一致。同时,每一种成分都简单定制,并可在此外的
Vue.js 项目中采纳。那还有3个用于构建实体模型的实用的Sketch
Template零件,你也得以看看。

花色地址:【传送门】

4.Primer CSS

美高梅开户网址 12

Primer CSS 是由 GitHub 的前端设计师研究开发的 CSS 框架。为了方便安装,它的
23 个包被划分为 3 个着力的元包,种种包都能够因而 NPM
举行独立版本的公布。

美高梅开户网址,类型地址:【传送门】

4. Primer CSS

美高梅开户网址 13

Primer CSS 是由 GitHub 的前端设计师研发的 CSS 框架。为了便于安装,它的
23 个包被划分为 3 个主导的元包,每一个包都能够因此 NPM
实行单独版本的揭露。

品种地址:【 传送门个有趣的。 】

3.R2

那是三个簇新版的 Node.js
Request库,它提供了二个更轻量的
HTTP 客户端化解方案。与 Request 库不相同的是,它确立在原生浏览器Fetch
API如上,可被应用于
Node.js. 并且,Haval2 在裁减后仅有 16KB 大小。

品种地址:【传送门】

4. Extension Boilerplate

美高梅开户网址 14

这么些连串为大家成立跨浏览器扩充奠定了深厚的基本功。Boilerplate
基于WebExtensions,能够3回写入扩张名,并得以将它们同时铺排到
Chrome,Opera 和 Firefox 上。它还具有一些任何很酷的效应,例如实时重载。

品种地址:【传送门】

5.Puppeteer

美高梅开户网址 15

Puppeteer 是叁个用来操纵 Headless Chrome 的封装库,它由 Chrome DevTools
官方协会开始展览维护。你也足以在大家的稿子《使用 Node.js 自动化Google
Chrome》中,掌握越来越多我们品尝的一对成效。

类型地址:【传送门】

5. Puppeteer

美高梅开户网址 16

Puppeteer 是三个用来操纵 Headless Chrome 的封装库,它由 Chrome DevTools
官方组织拓展维护。你也能够在大家的文章 《使用 Node.js 自动化Google
Chrome》
中,领悟更加多大家尝试的一些意义。

花色地址:【 传送门 】

4.Primer CSS

Primer CSS 是由 GitHub 的前端设计师研究开发的 CSS 框架。为了方便安装,它的
23 个包被划分为 3 个着力的元包,每种包都可以由此 NPM
进行独立版本的昭示。

类型地址:【传送门】

5. BigPicture

美高梅开户网址 17

一款轻量级的灯箱插件,它亦可同时为图像和录制,提供流畅的动画叠加弹出窗口。BigPicture
提供了多少个很棒的机能,即它可以与`标签和background-image`成分一同工作,而开发者也足以拓展随机的号子。至于摄像格式
– YouTube、Vimeo 和直接录制链接均可支撑。

项目地址:【传送门】

6.Marko

美高梅开户网址 18

这是一款与 React 和 Vue.js 类似的风靡 JS
框架。它能够扶助你将应用程序分解为独立的组件,并可随时间的推移,以及响应用户操作的变动展现程序视图的更动。同时,马克o
能够在使用中自动更新 DOM 来反馈数据。

品种地址:【传送门】

6. Marko

美高梅开户网址 19

那是一款与 React 和 Vue.js 类似的新星 JS
框架。它能够扶持您将应用程序分解为单独的零件,并可随时间的延期,以及响应用户操作的转变显示程序视图的转变。同时,马克o
能够在运用中自动更新 DOM 来反馈数据。

项目地址:【 传送门 】

5.Puppeteer

Puppeteer 是一个用以操纵 Headless Chrome 的封装库,它由 Chrome DevTools
官方组织实行保险。你也得以在咱们的篇章《使用 Node.js 自动化Google
Chrome》中,领悟更加多大家品尝的部分功效。

品种地址:【传送门】

6. Reactive Listener

美高梅开户网址 20

请不要因为它的名字,让您出现实时势部模糊,它可不是 React 组件。Reactive
listener是由Zurb集团出品的一款微型库,它能够支持大家创造高级的轩然大波监听器,用来响应那三个(比简单的点击与悬停)更复杂的操作。近年来它只可以够辨识用户哪天向成分移动,但前途可能会增加越来越多的功效。

品种地址:【传送门】

7.Redocx

美高梅开户网址 21

Redocx 是1个用以转移 Word 文书档案的 React 库。你能够应用 React
组件对文书档案进行定义,并透过命令行将其渲染为 Word
文书档案。同时,此库也含有了表格、图像、页眉、页脚等丰盛的零件供您接纳。

品种地址:【传送门】

7. Redocx

美高梅开户网址 22

Redocx 是三个用以转移 Word 文档的 React 库。你能够行使 React
组件对文书档案举行定义,并透过命令行将其渲染为 Word
文书档案。同时,此库也饱含了报表、图像、页眉、页脚等丰裕的机件供您选拔。

品种地址:【 传送门 】

6.Marko

那是一款与 React 和 Vue.js 类似的新式 JS
框架。它能够匡助您将应用程序分解为独立的组件,并可随时间的推移,以及响应用户操作的扭转显示程序视图的转移。同时,马克o
能够在行使中自动更新 DOM 来反馈数据。

品种地址:【传送门】

7. Eagle.js

美高梅开户网址 23

Eagle.js 是一个用来制作基于 Web 幻灯片的 Vue.js
框架,与Reveal.js一般。它补助动画、主旨、交互小部件(用于
Web 演示),并且能够轻松地在演示文稿之间展开零部件、幻灯片和体裁的选取。

花色地址:【传送门】

8.Fuzzysort

美高梅开户网址 24

那是3个用以塑造立模型糊搜索界面包车型客车 JS 库,类似 Sublime Text
中的界面样式。该库会依据查找查询的匹配度,总括出搜索匹配数与时间长度。

类型地址:【传送门】

8. Fuzzysort

美高梅开户网址 25

那是1个用来营造立模型糊搜索界面包车型客车 JS 库,类似 Sublime Text
中的界面样式。该库会依据查找查询的匹配度,总计出搜索匹配数与时间长度。

品种地址:【 传送门 】

7.Redocx

Redocx 是3个用来转移 Word 文书档案的 React 库。你能够利用 React
组件对文书档案进行定义,并由此命令行将其渲染为 Word
文书档案。同时,此库也包蕴了报表、图像、页眉、页脚等充分的组件供你挑选。

项目地址:【传送门】

8. Planck.js

美高梅开户网址 26

本条项目是游玩开发人员使用 C ++ 对 Box2D大体引擎的
JavaScript 重写。Plank.js 优化了 Web 和平运动动浏览器的电动机,并提供了一个对
JavaScript 友好的开源代码库和 API。所以,当开发人士在制作 2D
游戏时,他们能更百步穿杨。

品种地址:【传送门】

9.Trowel

美高梅开户网址 27

Trowel 是3个 SASS 工具包,它提供了一种写入 SASS
变量的新点子,允许你将多少个变量分组到单个对象中,让你的 SASS
代码更易编写,更易阅读。

项目地址:【传送门】

9. Trowel

美高梅开户网址 28

Trowel 是二个 SASS 工具包,它提供了一种写入 SASS
变量的新措施,允许你将四个变量分组到单个对象中,让你的 SASS
代码更易编写,更易阅读。

品类地址:【 传送门 】

8.Fuzzysort

那是三个用来营造立模型糊搜索界面包车型客车 JS 库,类似 Sublime Text
中的界面样式。该库会依照查找查询的匹配度,计算出搜索匹配数与时长。

品种地址:【传送门】

9. Create React Native App

美高梅开户网址 29

继成功了Create React
App项目标Boilerplate 之后,那还有一个不要搭建项目配置,用于制作 React Native
应用程序的工具。无需安装 Xcode 或 Android Studio,你就能够对 React
Native 应用程序实行设置与测试。

品种地址:【传送门】

10.Vivify

美高梅开户网址 30

Vivify 是由纯 CSS 写的卡通片库,该库提供了当先 50
种动画效果供您选用。你只须求将Vivify的类添加到相应的因素,即可使其产生动画效果,并且增进infinite类后,动画就能够循环播放了。

类别地址:【传送门】

10. Vivify

美高梅开户网址 31

Vivify 是由纯 CSS 写的动画库,该库提供了超越 50
种动画效果供你挑选。你只必要将 Vivify
的类添加到相应的要素,即可使其发出动画效果,并且添加 infinite
类后,动画就足以循环播放了。

种类地址:【 传送门 】

9.Trowel

Trowel 是三个 SASS 工具包,它提供了一种写入 SASS
变量的新办法,允许你将多个变量分组到单个对象中,让您的 SASS
代码更易编写,更易阅读。

品种地址:【传送门】

10. Pushy Buttons

美高梅开户网址 32

一款纯 CSS 实现的 3D
按钮微型库。点击按钮后,会有种平滑推压的功能。而按钮包含了 4 种尺寸与 3
种颜色,你能够由此 SASS 轻松的开始展览自定义,也能够大约地修改 .css 源文件。

项目地址:【传送门】

11.Tons of Checkboxes

美高梅开户网址 33

那是3个 CSS
复选框组件合集,它由大小不一 、样式各异的复选框组成。同时,全部的复选框都有着
4 种分裂的尺寸,并且十二分 IE9+ 和具备现代浏览器。

品类地址:【传送门】

11. Tons of Checkboxes

美高梅开户网址 34

这是二个 CSS
复选框组件合集,它由大小不一 、样式各异的复选框组成。同时,全体的复选框都独具
4 种分化的尺码,并且非凡 IE9+ 和具备现代浏览器。

类型地址:【 传送门

10.Vivify

Vivify 是由纯 CSS 写的动画片库,该库提供了当先 50
种动画效果供你选拔。你只供给将Vivify的类添加到相应的因素,即可使其产生动画效果,并且拉长infinite类后,动画就足以循环播放了。

项目地址:【传送门】

11. React Overdrive

美高梅开户网址 35

React Overdrive 是贰个为 React
应用程序塑造的大约、神奇的连片动画制作零部件。你可以轻松的在页面上,只怕应用程序中分裂情状(或页面)之间创立出酷炫的衔接动画效果。由于它的
API 是基于组件的,因而,尽管在两个 JavaScript
文件之间实行切换,设置过渡效果也要命的不难。

项目地址:【传送门】

12.Push

美高梅开户网址 36

Push 是一个通用的桌面通告框架。它依据强大的Notification
API,可用作可信的跨浏览器消除方案,假如用户的浏览器不帮忙新型的
API,则会沿用老版 API 达成。

项目地址:【传送门】

12. Push

美高梅开户网址 37

Push 是2个通用的桌面文告框架。它依照强大的 Notification
API
,可用作可信的跨浏览器解决方案,假使用户的浏览器不匡助新型的
API,则会沿用老版 API 完成。

项目地址:【 传送门 】

11.Tons of Checkboxes

那是3个 CSS
复选框组件合集,它由大小不壹 、样式各异的复选框组成。同时,全数的复选框都具备
4 种分歧的尺寸,并且万分 IE9+ 和全体现代浏览器。

品类地址:【传送门】

12. MoveTo

美高梅开户网址 38

少了点击滚动动画库的每月能源推荐,究竟是不完整的。所以,在本月的资源引进列表中,大家为大家带来了零注重的
JavaScript 库:MoveTo 。它是三个仅有 1kb 的 gzip 压缩,并超易使用的 JS
库,同时您能够使用原生的 window.scroll API 来成立动画。

品种地址:【传送门】

13.react-imgpro

美高梅开户网址 39

react-imgpro 是3个用以图像处理的 React 组件。它能够应用 filters
举行图像处理,并生成 base64
格式的图像。它大约易用,你只须求钦赐2个图像的 U冠道L,采纳相应的
filters,并填写输出图像的轻重缓急与格式即可。

花色地址:【传送门】

13. react-imgpro

美高梅开户网址 40

react-imgpro 是三个用于图像处理的 React 组件。它能够动用 filters
实行图像处理,并生成 base64
格式的图像。它差不多易用,你只须要钦赐八个图像的 U昂科雷L,选取相应的
filters,并填写输出图像的深浅与格式即可。

花色地址:【 传送门 】

12.Push

Push 是二个通用的桌面公告框架。它依据强大的Notification
API,可作为可相信的跨浏览器消除方案,假诺用户的浏览器不帮忙新型的
API,则会沿用老版 API 完结。

花色地址:【传送门】

13. Anchorme

美高梅开户网址 41

Anchorme 是三个有力的 JavaScript
库,它能够接纳任何字符串或文本文件,并检查和测试当中的拥有 U福特ExplorerL
地址。它高效、可相信,并有成都百货上千实用的成效,同时能够自定义选项。它的接纳示例包含:将文件中的链接转换为可点击的
HTML “标签,从字符串中提取 U牧马人L 地址,或将其看成都电子通信工程学院子邮件,U奥迪Q5L 和 IP
的验证器。

项目地址:【传送门】

14.Lozad.js

美高梅开户网址 42

Lozad.js 是四个高性能、可布置的纯 JS 落成的懒加载器。它依照
Intersection Observer
API,没有别的借助,扶助动态懒加载添法郎素。
同时,它也是轻量级库,在 Gzip 压缩后唯有 535 字节大小。

花色地址:【传送门】

14. Lozad.js

美高梅开户网址 43

Lozad.js 是三个高质量、可配置的纯 JS 达成的懒加载器。它遵照
Intersection Observer
API
,没有其他借助,补助动态懒加载添比索素。 同时,它也是轻量级库,在 Gzip
压缩后唯有 535 字节大小。

品类地址:【 传送门 】

13.react-imgpro

react-imgpro 是一个用于图像处理的 React 组件。它能够利用 filters
举办图像处理,并生成 base64
格式的图像。它差不多易用,你只供给钦命八个图像的 UTiguanL,接纳相应的
filters,并填写输出图像的轻重缓急与格式即可。

品种地址:【传送门】

14. RPG Awesome

美高梅开户网址 44

那是一个存有近 500 个科学幻想焦点的免费矢量图标网站,它富含了 路虎极光PG
游戏中武器、盔甲、魔法以及仓库储存物品等连锁的图标,而采取办法也与其余网页图标字体相同。
(“) 甚至,你仍是可以应用 CSS 或 SASS 举办简短的自定义更改。

品种地址:【传送门】

15.Semiotic

美高梅开户网址 45

那是三个组成了 React 和 D3 的多少可视化框架。它提供了 3
连串型的框架(XYFrame,O奥迪Q5Frame,NetworkFrame),可帮忙你生成一些酷炫图表。而显得数据的法门,也得以透过调整框架中设置只怕添加
CSS 样式实行定制。

种类地址:【传送门】


谢谢您的读书。若您有着收获,欢迎点赞与享受。

1 赞 5 收藏
评论

美高梅开户网址 46

15. Semiotic

美高梅开户网址 47

那是贰个组合了 React 和 D3 的数码可视化框架。它提供了 3
种档次的框架(XYFrame,O福特ExplorerFrame,NetworkFrame),可帮忙你生成一些酷炫图表。而显得数据的法子,也足以通过调整框架中装置或许加上
CSS 样式举办定制。

类型地址:【 传送门 】

 

来自:

14.Lozad.js

Lozad.js 是叁个高质量、可配备的纯 JS 完结的懒加载器。它依据
Intersection Observer
API,没有此外借助,帮忙动态懒加载添日币素。
同时,它也是轻量级库,在 Gzip 压缩后唯有 535 字节大小。

品种地址:【传送门】

15. Tent CSS

美高梅开户网址 48

Tent CSS 是2个基础的 CSS
框架,它为您提供了创设响应式网站所必备的着力组件。它是轻量级的(gzip
压缩后仅有 5kb 大小),并依据BEM
标准,同时可用来现代的 Flexbox 网格布局。

品类地址:【传送门】


谢谢您的开卷。若你有着收获,欢迎点赞与分享。

1 赞 3 收藏
评论

美高梅开户网址 49

15.Semiotic

那是贰个组合了 React 和 D3 的数码可视化框架。它提供了 3
体系型的框架(XYFrame,OLacrosseFrame,NetworkFrame),可援救你生成一些酷炫图表。而显得数据的艺术,也得以透过调整框架中设置恐怕添加
CSS 样式举行定制。

项目地址:【传送门】


感激您的读书。若您富有收获,欢迎点赞与享受。

注:

  1. 正文版权归原小编全体,仅用于学习与调换;
  2. 如需转发译文,烦请按江湖表明出处新闻,多谢!

英文原稿:15 Interesting JavaScript and CSS Libraries for September
2017
作者:Danny Markov
译者:IT程序狮
译文地址:http://www.jianshu.com/p/ec9ff744eb20


更加多小说:

  1. 2017 年 8 月:15 个有意思的 JS 和 CSS
  2. 2017 年 6 月:15 个有意思的 JS 和 CSS
  3. 2017 年 5 月:15 个有趣的 JS 和 CSS
  4. 2017 年 4 月:15 个有趣的 JS 和 CSS

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图