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 样式进行定制。
类型地址:【 传送门 】
来自: