个有趣的

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

2017/04/12 · CSS ·
CSS,
JS

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

亚洲必赢官网 1

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程序狮   

亚洲必赢官网 2

迎来了金秋 9 月,在那拿到的时令,Tutorialzine
又为大家带来了何等优良、有趣的前端资源呢?前端开发者们,一起来探望有木有您要求的前端库。


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

1. Core UI

亚洲必赢官网 3

Core UI 是一个依照 Bootstrap 4
的田间管理模板,它提供了成立控制面板的可观自定义化解方案。同时,为了让你快速的将它与一些风靡的框架整合利用(AngularJS,Angular
2,React.js 和 Vue.js.),它还提供了有些单独的规范版本。

个有趣的。项目地址:【传送门】

时刻如日月如梭, Tutorialzine 为大家带来了 2017 年 十一月份一些心细选择的卓绝 Web
开发资源。前端开发者们,让大家一同先睹为快呢!

1.DisplayJS

亚洲必赢官网 4

DisplayJS 是一个帮衬您渲染 DOM 的简练框架。使用它,你可以更易于地将 JS
变量遍历到特定的 HTML 元素中,类似于 React 或 Vue.js 处理模版的法门。

花色地址:【传送门】

1. DisplayJS

亚洲必赢官网 5

DisplayJS 是一个支援您渲染 DOM 的概括框架。使用它,你可以更易于地将 JS
变量遍历到特定的 HTML 成分中,类似于 React 或 Vue.js 处理模版的办法。

类型地址:【 传送门 】

2. React Trend

亚洲必赢官网 6

这是由Unsplash公司产品的一款 React
组件,用于创造显示趋势与运动目标的优雅的线型图。该类型依照极简化的解决理念,并提要求您一个用来消除现实难题的简便、优雅的缓解方案。别的,它还有不合法的Vue
接口,但不会提供完整的图表库。

类型地址:【传送门】


2.React Beautiful DnD

亚洲必赢官网 7

那是由 Atlassian 开源的用于创建拖拽组件的 React 库。它提供了强硬、易用的
API,以及充分的定制选项和控件。它所生成的零部件,也存有了平整的 GPU
动画功能。当成分被捡拾或再一次排序时,其听从将会显得出来。

类型地址:【传送门】

2. React Beautiful DnD

亚洲必赢官网 8

那是由 Atlassian 开源的用于创建拖拽组件的 React 库。它提供了强压、易用的
API,以及丰裕的定制选项和控件。它所生成的零部件,也有着了平整的 GPU
动画功能。当成分被捡拾或再一次排序时,其效率将会显得出来。

类型地址:【 传送门

3. Element

亚洲必赢官网 9

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.),它还提供了部分独自的榜样版本。

品类地址:【传送门】

  1. [React

    Trend]()

这是由Unsplash团伙出品的一款
React
组件,用于创立体现趋势与移动目标的优雅的线型图。该项目比照极简化的缓解理念,并提须求你一个用来消除实际难点的简约、优雅的消除方案。其它,它还有野鸡的Vue
接口,但不会提供整机的图表库。

项目地址:【传送门】

3.R2

亚洲必赢官网 10

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

项目地址:【传送门】

3. R2

亚洲必赢官网 11

那是一个全新版的 Node.js Request
库,它提供了一个更轻量的 HTTP 客户端消除方案。与 Request
库区其余是,它创建在原生浏览器 Fetch
API
之上,可被使用于 Node.js. 并且,奇骏2 在缩减后仅有 16KB 大小。

项目地址:【 传送门 】

4. Extension Boilerplate

亚洲必赢官网 12

其一项目为大家创造跨浏览器增加奠定了坚固的基础。Boilerplate
基于WebExtensions,可以两次写入扩充名,并得以将它们同时部署到
Chrome,Opera 和 Firefox 上。它还持有一些其余很酷的效用,例如实时重载。

项目地址:【传送门】

1. Element

Element 是一款基于 Vue.js 2.0 的 UI 组件库。它富含了 50+
的机件,并根据一致性的布置原则,即界面中的设计样式、颜色搭配保持一致。同时,每种成分都不难定制,并可在其余的
Vue.js 项目中运用。那还有一个用于创设实体模型的实用的Sketch
Template零件,你也得以看看。

花色地址:【传送门】

  1. [Extension

    Boilerplate]()

本条类型为我们创造跨浏览器伸张奠定了深厚的基本功。Boilerplate
基于WebExtensions,可以一次写入增加名,并能够将它们同时配备到
Chrome,Opera 和 Firefox 上。它还持有一些别样很酷的效能,例如实时重载。

品种地址:【传送门】

4.Primer CSS

亚洲必赢官网 13

Primer CSS 是由 GitHub 的前端设计师研发的 CSS 框架。为了方便安装,它的
23 个包被划分为 3 个基本的元包,每一种包都能够透过 NPM
进行单独版本的公布。

品类地址:【传送门】

4. Primer CSS

亚洲必赢官网 14

Primer CSS 是由 GitHub 的前端设计师研发的 CSS 框架。为了方便安装,它的
23 个包被划分为 3 个中央的元包,各个包都可以透过 NPM
举办独立版本的公布。

项目地址:【 传送门 】

5. BigPicture

亚洲必赢官网 15

一款轻量级的灯箱插件,它亦可同时为图像和录制,提供流畅的卡通叠加弹出窗口。BigPicture
提供了一个很棒的功能,即它可以与`标签和background-image`成分一同工作,而开发者也能够拓展自由的记号。至于视频格式
– YouTube、Vimeo 和直接录制链接均可扶助。

品种地址:【传送门】

1. BigPicture

一款轻量级的灯箱插件,它亦可同时为图像和录制,提供流畅的动画叠加弹出窗口。BigPicture
提供了一个很棒的机能,即它可以与<img>标签和background-image要素一同工作,而开发者也得以拓展自由的标记。至于摄像格式

  • YouTube、Vimeo 和直接视频链接均可支撑。

种类地址:【传送门】

  1. [Reactive

    Listener]()

请不要因为它的名字,让您出现一些模糊,它可不是 React 组件。Reactive
listener是由Zurb集团出品的一款微型库,它亦可帮助大家创造高级的事件监听器,用来响应那一个(比不难的点击与悬停)更扑朔迷离的操作。方今它只可以够分辨用户何时向成分移动,但前途或者会扩充更多的作用。

品种地址:【传送门】

5.Puppeteer

亚洲必赢官网 16

Puppeteer 是一个用于操纵 Headless Chrome 的封装库,它由 Chrome DevTools
官方社团开展保证。你也足以在我们的稿子《使用 Node.js 自动化Google
Chrome》中,掌握越多大家尝试的一些效益。

连串地址:【传送门】

5. Puppeteer

亚洲必赢官网 17

Puppeteer 是一个用于操纵 Headless Chrome 的封装库,它由 Chrome DevTools
官方社团开展保险。你也足以在大家的稿子 《使用 Node.js 自动化Google
Chrome》
中,通晓更多我们品尝的部分作用。

品种地址:【 传送门 】

6. Reactive Listener

亚洲必赢官网 18

请不要因为它的名字,让您现身有的歪曲,它可不是 React 组件。Reactive
listener是由Zurb公司出品的一款微型库,它能够协理大家创制高级的风浪监听器,用来响应这么些(比简单的点击与悬停)更复杂的操作。方今它只好够辨识用户几时向成分移动,但前途可能会伸张越多的功能。

品类地址:【传送门】

1. Eagle.js

Eagle.js 是一个用于制作基于 Web 幻灯片的 Vue.js
框架,与Reveal.js一般。它接济动画、大旨、交互小部件(用于
Web 演示),并且可以轻松地在示范文稿之间举行零部件、幻灯片和体裁的拔取。

花色地址:【传送门】

6.Marko

亚洲必赢官网 19

这是一款与 React 和 Vue.js 类似的流行 JS
框架。它可以支持你将应用程序分解为单身的零件,并可随时间的延迟,以及响应用户操作的转变突显程序视图的转变。同时,马克o
能够在拔取中自动更新 DOM 来反馈数据。

品种地址:【传送门】

6. Marko

亚洲必赢官网 20

那是一款与 React 和 Vue.js 类似的风靡 JS
框架。它可以协理您将应用程序分解为独立的机件,并可随时间的推迟,以及响应用户操作的成形突显程序视图的变化。同时,马克o
可以在动用中自动更新 DOM 来反馈数据。

项目地址:【 传送门 】

7. Eagle.js

亚洲必赢官网 21

Eagle.js 是一个用以创造基于 Web 幻灯片的 Vue.js
框架,与Reveal.js诚如。它帮助动画、大旨、交互小部件(用于
Web 演示),并且可以轻松地在演示文稿之间举行零部件、幻灯片和体裁的重用。

类型地址:【传送门】

1. Planck.js

以此类型是游玩开发人员使用 C ++ 对
Box2D物理引擎的
JavaScript 重写。Plank.js 优化了 Web 和移动浏览器的引擎,并提供了一个对
JavaScript 友好的开源代码库和 API。所以,当开发人士在制作 2D
游戏时,他们能更百发百中。

品类地址:【传送门】

  1. [Create React Native

    App]()

继成功了Create React
App花色的
Boilerplate 之后,这还有一个不必搭建项目配置,用于制作 React Native
应用程序的工具。无需安装 Xcode 或 Android Studio,你就足以对 React
Native 应用程序举行设置与测试。

花色地址:【传送门】

  1. [Pushy

    Buttons]()

一款纯 CSS 已毕的 3D
按钮微型库。点击按钮后,会有种平滑推压的法力。而按钮包罗了 4 种尺寸与 3
种颜色,你可以通过 SASS 轻松的开展自定义,也得以大概地修改 .css 源文件。

品种地址:【传送门】

  1. [React

    Overdrive]()

React Overdrive 是一个为 React
应用程序营造的简约、神奇的交接动画制作零部件。你可以轻松的在页面上,可能应用程序中不相同景色(或页面)之间创建出酷炫的对接动画效果。由于它的
API 是根据组件的,因而,即便在多个 JavaScript
文件之间展开切换,设置过渡效果也不行的简单。

体系地址:【传送门】

7.Redocx

亚洲必赢官网 22

Redocx 是一个用于转移 Word 文档的 React 库。你可以动用 React
组件对文档举行定义,并因此命令行将其渲染为 Word
文档。同时,此库也蕴含了表格、图像、页眉、页脚等充裕的零件供您挑选。

品种地址:【传送门】

7. Redocx

亚洲必赢官网 23

Redocx 是一个用来转移 Word 文档的 React 库。你可以使用 React
组件对文档进行定义,并经过命令行将其渲染为 Word
文档。同时,此库也蕴含了表格、图像、页眉、页脚等丰硕的零部件供您拔取。

品类地址:【 传送门 】

8. Planck.js

亚洲必赢官网 24

亚洲必赢官网 ,以此种类是游玩开发人士使用 C ++ 对 Box2D物理引擎的
JavaScript 重写。Plank.js 优化了 Web 和运动浏览器的发动机,并提供了一个对
JavaScript 友好的开源代码库和 API。所以,当开发人士在制作 2D
游戏时,他们能更百步穿杨。

种类地址:【传送门】

1. MoveTo

少了点击滚动动画库的每月资源引进,终究是不完全的。所以,在本月的资源推介列表中,咱们为大家带来了零爱惜的
JavaScript 库:MoveTo 。它是一个仅有 1kb 的 gzip 压缩,并超易使用的 JS
库,同时你可以使用原生的 window.scroll API 来创造动画。

花色地址:【传送门】

8.Fuzzysort

亚洲必赢官网 25

那是一个用以创设模糊搜索界面的 JS 库,类似 Sublime Text
中的界面样式。该库会依照查找查询的匹配度,总计出搜索匹配数与时长。

系列地址:【传送门】

8. Fuzzysort

亚洲必赢官网 26

那是一个用于打造模糊搜索界面的 JS 库,类似 Sublime Text
中的界面样式。该库会依照查找查询的匹配度,总括出搜索匹配数与时长。

品类地址:【 传送门 】

9. Create React Native App

亚洲必赢官网 27

继成功了Create React
App花色的
Boilerplate 之后,那还有一个不要搭建项目布局,用于创建 React Native
应用程序的工具。无需安装 Xcode 或 Android Studio,你就可以对 React
Native 应用程序举办安装与测试。

品种地址:【传送门】

1. Anchorme

Anchorme 是一个精锐的 JavaScript
库,它可以接收任何字符串或文本文件,并检测其中的享有 UPRADOL
地址。它很快、可相信,并有好多实用的效果,同时可以自定义选项。它的利用示例包涵:将文件中的链接转换为可点击的
HTML <a>标签,从字符串中提取 U哈弗L 地址,或将其视作电子邮件,U奥德赛L 和 IP
的验证器。

品类地址:【传送门】

  1. [RPG

    Awesome]()

那是一个具备近 500 个科幻核心的免费矢量图标网站,它包罗了 ENVISIONPG
游戏中武器、盔甲、魔法以及库存物品等相关的图标,而利用方法也与其他网页图标字体相同。
(<i class="ra ra-sword"></i>) 甚至,你还足以行使 CSS 或 SASS
举办简短的自定义更改。

项目地址:【传送门】

9.Trowel

亚洲必赢官网 28

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

花色地址:【传送门】

9. Trowel

亚洲必赢官网 29

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

序列地址:【 传送门 】

10. Pushy Buttons

亚洲必赢官网 30

一款纯 CSS 达成的 3D
按钮微型库。点击按钮后,会有种平滑推压的作用。而按钮包括了 4 种尺寸与 3
种颜色,你可以经过 SASS 轻松的举行自定义,也足以省略地修改 .css 源文件。

品种地址:【传送门】

1. Tent CSS

Tent CSS 是一个基础的 CSS
框架,它为你提供了打造响应式网站所必不可少的主旨组件。它是轻量级的(gzip
压缩后仅有 5kb 大小),并按照BEM
标准,同时可用于现代的
Flexbox 网格布局。

类型地址:【传送门】


感激你的开卷。若您抱有收获,欢迎点赞与分享。

注:

  1. 正文版权归原小编所有,仅用于学习与沟通。
  2. 如需转发译文,烦请按江湖注脚出处消息,多谢!

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

10.Vivify

亚洲必赢官网 31

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

花色地址:【传送门】

10. Vivify

亚洲必赢官网 32

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

项目地址:【 传送门 】

11. React Overdrive

亚洲必赢官网 33

React Overdrive 是一个为 React
应用程序创设的简单、神奇的连接动画制作零部件。你可以轻松的在页面上,可能应用程序中分化境况(或页面)之间创造出酷炫的连通动画效果。由于它的
API 是依照组件的,因而,纵然在八个 JavaScript
文件之间开展切换,设置过渡效果也尤其的简单。

品种地址:【传送门】

11.Tons of Checkboxes

亚洲必赢官网 34

那是一个 CSS
复选框组件合集,它由大小不一、样式各异的复选框组成。同时,所有的复选框都富有
4 种不一致的尺寸,并且同盟 IE9+ 和拥有现代浏览器。

序列地址:【传送门】

11. Tons of Checkboxes

亚洲必赢官网 35

那是一个 CSS
复选框组件合集,它由大小不一、样式各异的复选框组成。同时,所有的复选框都有所
4 种不一样的尺寸,并且格外 IE9+ 和有着现代浏览器。

品类地址:【 传送门

12. MoveTo

亚洲必赢官网 36

少了点击滚动动画库的每月资源推荐,毕竟是不完整的。所以,在本月的资源引进列表中,大家为我们带来了零重视的
JavaScript 库:MoveTo 。它是一个仅有 1kb 的 gzip 压缩,并超易使用的 JS
库,同时你可以运用原生的 window.scroll API 来制作动画。

品类地址:【传送门】

12.Push

亚洲必赢官网 37

Push 是一个通用的桌面公告框架。它依据强大的Notification
API,可作为可信的跨浏览器解决方案,如若用户的浏览器不辅助新型的
API,则会沿用老版 API 已毕。

连串地址:【传送门】

12. Push

亚洲必赢官网 38

Push 是一个通用的桌面公告框架。它依据强大的 Notification
API
,可作为可相信的跨浏览器化解方案,倘诺用户的浏览器不协助最新的
API,则会沿用老版 API 达成。

品种地址:【 传送门 】

13. Anchorme

亚洲必赢官网 39

Anchorme 是一个无敌的 JavaScript
库,它能够接过任何字符串或文本文件,并检测其中的装有 UOdysseyL
地址。它很快、可相信,并有很多实用的效应,同时可以自定义选项。它的施用示例包罗:将文件中的链接转换为可点击的
HTML “标签,从字符串中领到 UMuranoL 地址,或将其当作电子邮件,U途睿欧L 和 IP
的验证器。

品类地址:【传送门】

13.react-imgpro

亚洲必赢官网 40

react-imgpro 是一个用以图像处理的 React 组件。它能够使用 filters
举办图像处理,并生成 base64
格式的图像。它大致易用,你只需求指定一个图像的 U兰德酷路泽L,选用相应的
filters,并填写输出图像的轻重与格式即可。

花色地址:【传送门】

13. react-imgpro

亚洲必赢官网 41

react-imgpro 是一个用于图像处理的 React 组件。它能够利用 filters
进行图像处理,并生成 base64
格式的图像。它大致易用,你只必要指定一个图像的 USportageL,选择相应的
filters,并填写输出图像的大小与格式即可。

项目地址:【 传送门 】

14. RPG Awesome

亚洲必赢官网 42

那是一个有着近 500 个科幻大旨的免费矢量图标网站,它含有了 LacrossePG
游戏中武器、盔甲、魔法以及库存物品等连锁的图标,而拔取办法也与任何网页图标字体相同。
(“) 甚至,你还是能利用 CSS 或 SASS 举行简要的自定义更改。

花色地址:【传送门】

14.Lozad.js

亚洲必赢官网 43

Lozad.js 是一个高品质、可安插的纯 JS 完成的懒加载器。它依照
Intersection Observer
API,没有此外借助,支持动态懒加载添日成分。
同时,它也是轻量级库,在 Gzip 压缩后唯有 535 字节大小。

项目地址:【传送门】

14. Lozad.js

亚洲必赢官网 44

Lozad.js 是一个高品质、可配备的纯 JS 完毕的懒加载器。它依照
Intersection Observer
API
,没有其余借助,协理动态懒加载添日币素。 同时,它也是轻量级库,在 Gzip
压缩后唯有 535 字节大小。

品种地址:【 传送门 】

15. Tent CSS

亚洲必赢官网 45

Tent CSS 是一个基础的 CSS
框架,它为你提供了打造响应式网站所不可或缺的主题组件。它是轻量级的(gzip
压缩后仅有 5kb 大小),并依照BEM
标准,同时可用来现代的 Flexbox 网格布局。

项目地址:【传送门】


多谢您的读书。若你富有收获,欢迎点赞与分享。

1 赞 3 收藏
评论

亚洲必赢官网 46

15.Semiotic

亚洲必赢官网 47

这是一个结合了 React 和 D3 的数量可视化框架。它提供了 3
体系型的框架(XYFrame,OSportageFrame,NetworkFrame),可接济您生成一些酷炫图表。而显示数据的主意,也足以透过调整框架中安装大概添加
CSS 样式举行定制。

种类地址:【传送门】


多谢你的阅读。若您所有收获,欢迎点赞与分享。

1 赞 5 收藏
评论

亚洲必赢官网 48

15. Semiotic

亚洲必赢官网 49

这是一个结合了 React 和 D3 的数目可视化框架。它提供了 3
种档次的框架(XYFrame,O本田UR-VFrame,NetworkFrame),可襄助你生成一些酷炫图表。而展现数据的艺术,也足以经过调整框架中安装或然加上
CSS 样式进行定制。

类型地址:【 传送门 】

 

来自:

网站地图xml地图