当前位置: 首页 > 业界动态 > 技术实现 > 本文


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




发布时间: 2017-5-15 14:48:18  

  时光飞逝, 每月 Tutorialzine 都会为大家分享一些有趣的前端库。在本月,他们又准备了哪些的 Web 开发资源呢?前端儿,一起来瞧瞧吧!


  1. Buefy


  这是一个基于 Bulma 的 Vue.js 轻量级 UI 组件,而 Bulma 则是基于 Flexbox 的 CSS 库。Buefy 具备典型的 Web 应用程序所必备的所有组件,例如 modals、toast 以及 notifications 等动态元素,使开发人员可以快速添加任何用户界面到其现有的 Vue.js 项目。


  项目地址:【传送门



  2. HR.js


  HR.js 是一个用于高亮并替换 DOM 中文本的零依赖库。它的 API 简直不能再简单了。你只需要使用 CSS 选择器来定位保存所需文本的 HTML 父元素,选择好要高亮的单词,并设置背景颜色,就可以搞定了。


  项目地址:【传送门



  3. React VR


  React VR 是用于创建在 Web 浏览器中运行 VR 应用程序的框架。它将现代的 API(如 WebGL 和 WebVR)与 React 的声明式渲染进行搭配,从而产生可以通过各种设备使用的体验。


  项目地址:【传送门



  4. Tippy.js


  这是一个用于动画工具提示的纯 JavaScript 库。Tippy.js 提供了丰富的悬停效果以及超过 20 个自定义选项。它也是超轻量级的库,并具备相当不错的浏览器兼容性。但如果出现个别浏览器不支持的情况,它会自动退回至常规的 title 属性。


  项目地址:【传送门



  5. Barba.js


  Barba.js 是一个无依赖的 JavaScript 库,可用于在单页应用程序的视图间创建平滑的过渡效果。该库的逻辑是围绕 PJAX(推送状态 AJAX)来设计的,绕过正常有效的 URL,并通过 XMLHttpRequest 来加载新页面。Barba 还能确保通过 Push 状态的 API,在应用程序的 URL 中可以正确的反映出状态的变化。


  项目地址:【传送门



  6. UIkit


  UIkit 是一个的轻量级前端框架,它包含了相应的 SVG 图标字体以及丰富的组件。无论是外观,还是框架,UIkit 的设计都十分的出彩。它不光具备统一的样式,还有易于记忆的 API,许多自定义选项以及有用的修饰器类,并且它的用文档编写的也相当的出众。


  项目地址:【传送门




  7. Haul


  Haul 是一个用于开发 React Native 应用程序的命令行工具。它可以直接替代 React Native packager,提供比 Webpack 更好的支持,并能够改进错误消息,大大减少编译时间。Haul 也拥有出色的使用文档,并且完全开源、可定制。


  项目地址:【传送门

  8. AcrossTabs


  AcrossTabs 是一个用于跨浏览器 Tabs 间进行通信的 JavaScript 库,你可以使用它在不同的浏览器 Tabs 上打开或关闭网页。由于父 Tab 可以访问子 Tab 上有用的信息(例如 UID),所以它可以判断子 Tab 是否依旧打开,或者已关闭。


  项目地址:【传送门


  9. Stylelint


  Stylelint 是一款现代的 CSS linter 工具,它可以帮助团队在样式表中执行固定的 CSS 标准。该库非常强大,它不仅可以让你禁止或设置白名单属性,还能够捕获错误以及识别 SCSS 语法。同时,Stylelint 也可完全定制,帮助你添加或去除一些规则选项。


  项目地址:【传送门



  10. Iconate


  这是一个非常棒的 Vanilla JavaScript 库。通过点击图标,它能够帮你完成带有丰富平滑动画效果的图标转换。你也可以将 Iconate 与所有的 CSS 图标字体一同使用。即你只需在 HTML 中添加一个图标,并使用简单的 JavaScript API 来选择要将其转换为哪一种图标,同时选择相应的动画效果就搞定了。


  项目地址:【传送门



  11. React-Datasheet


  React-Datasheet 是一个用于向应用程序添加类似 Excel 数据表的 React 组件。你可以对单元格进行自由编辑、分组选择、复制、粘贴、删除等操作。另外,在 GitHub 上还有三个有用的示例,供你参考。即基本的表,带有公式的表以及嵌套组件的表。


  项目地址:【传送门



  12. Pure CSS


  这是一个轻量级、响应式的纯 CSS 模块框架。整个库在 gzip 压缩后, 3.8 kb 的大小,如果你仅使用其中的一部分模块,那 CSS 真是小到没有朋友了!同时,它模块包括了基本样式集、响应格网、表单组件、按钮、表格和菜单,适用于任何的 Web 项目。


  项目地址:【传送门


  13. Simple Icons


  Simple Icons 是一个涉及知名品牌(涵盖社交网络、应用程序、服务等)的免费图标合集。这些图标都是用 SVG 制作的,所以它们可以被缩放到任何尺寸,不用担心图片的像素。而大多数图标的大小都低于 500 字节。


  项目地址:【传送门



  14. Chroma.js


  Chroma.js 是一个用于处理颜色的微型 JavaScript 库。它提供了丰富的 API,以及超过 50 种用于操纵颜色的功能,让你可以使用色彩模式切换,改变亮度和饱和度,创建渐变比例等许多实用的色阶处理方法。


  项目地址:【传送门



  15. Weex


  Weex 是一个构建跨平台的移动应用程序框架,类似于 React Native,但适用于 Vue.js. 你可以利用 HTML、CSS 和 JavaScript 编写应用程序,并将其以 Android 和 iOS 客户端的形式呈现。该框架有许多内置的组件、API 和其他有用的功能。


  项目地址:【传送门



  英文原文:15 Interesting JavaScript and CSS Libraries for May 2017


  作者:Danny Markov


  译者:IT程序狮


  译文地址:http://www.jianshu.com/p/99b66b214bbd


阅读:672次
推荐阅读:

版权所有 © 2011-2017 南京云创大数据科技股份有限公司(股票代码:835305), 保留一切权利。(苏ICP备11060547号-1)  
云创大数据-专业的云存储、大数据、云计算产品供应商