专栏名称: OSC开源社区

OSChina 开源中国官方微信账号

15 个有用的 JavaScript 和 CSS 库 | 本月推荐

OSC开源社区 · 公众号 · 程序员 · 2017-05-24 08:28

正文

请输入标题 bcdef

摘要: 五月 JavaScript 和 CSS 库推荐！

请输入标题 abcdefg

高质量的网页设计需要直观和用户友好的界面，而且屏幕上的元素也起着非常重要的作用。Web 设计师不断地寻找优秀代码的集合，希望能提升工作效率。但找到合适的工具库并不总是那么容易的。

网络上有太多的资源可以使用，而且也是免费的，因此很难判断哪些资源比较好。这就是精心搜索并编写这个最好的库列表的原因。

无论是希望创建一个视觉上吸引人和功能强大的布局，还是需要在表单和其他区域添加屏幕上的规则和验证，你都会喜欢这个集合。

这里列出的库是由具有丰富网页设计经验的专家创建的，这些库不仅是经验丰富的设计师的优秀工具，也是适用于初学者的好工具。这个集合将会帮你节省很多时间，来看一看吧！

Buefy

适用于 Vue.js 项目的轻量级 UI 框架，使用流行的基于 flexbox 的 CSS 库 Bulma 构建。它具有典型的 Web APP 所需的全部组件，包括像模态框、吐司和通知这样的动态元素，使开发者可以快速添加任何用户界面到现有的 Vue.js 项目。

传送门：

https://buefy.github.io/#/

HR.js

零依赖库，用于在 DOM 中以编程的方式高亮显示并替换字符串，HR.js API 的使用不能再简单了 — 只需使用 CSS 选择器来定位目标文本的父 HTML 元素，选择要突出显示的单词，设置背景颜色，然后就完成了！

传送门：

https://mburakerman.github.io/hrjs/

React VR

React VR 是为 VR 应用而创建的框架，运行在 Web 浏览器中。它将现代 API（例如 WebGL 和 WebVR）与 React 的声明能力结合起来，通过各种设备提供适用于消费者的体验。

传送门：

https://facebook.github.io/react-vr/

Tippy.js

轻量的纯 JavaScript 动态提示工具插件库。它提供了大量的不同悬停效果和超过 20 个可定制的选项。Tippy.js 是超级轻量的，并且具有相当不错的浏览器兼容性，当不被支持时会自动回退到常规的 title 属性。

传送门：

https://atomiks.github.io/tippyjs/

Barba.js

没有依赖关系的 JavaScript 库，用于在单页面应用程序的视图之间创建平滑的过渡。该逻辑是围绕PJAX（push state AJAX）构建的，它会检查所有有效的 URL，阻止它们的正常行为，并通过 XMLHttpRequest 加载新页面。Barba 还会确保通过使用 Push State API，使得状态的更改可在页面的 URL 中正确反映出来。

传送门：

http://barbajs.org/

UIkit

优秀的 CSS 和 JavaScript 前端框架，包括 SVG 图标字体和几十个组件。无论是外观还是作为一个框架，UIkit 的设计都非常好，它具有统一的样式，易于记忆的 API，许多自定义选项和有用的修饰符类。文档也是写得十分好。

传送门：

https://github.com/uikit/uikit

Haul

Haul 是用于开发 React Native 应用程序的命令行工具。它可以直接替代 React Native packager，提供更好的 webpack 支持，改进的错误消息，大大减少编译时间。Haul 是可定制和完全开源的，文档也十分优秀。

传送门：

https://github.com/callstack-io/haul

AcrossTabs

用于在浏览器选项卡之间进行通信的 JavaScript 库，使一个网页可以打开和关闭其他浏览器选项卡。父选项卡可以访问有关其子选项卡的有用信息，包括唯一的 ID 以及子选项卡是否仍然打开或已关闭。

传送门：

https://github.com/wingify/across-tabs

Stylelint

Stylelint 是一款现代化的 CSS linter，可帮助团队在样式表中强制使用客观的 CSS 标准。该库非常强大，可以禁用或列出特定属性，捕获错误和识别 SCSS 语法。StyleLint 是完全可定制的，可以选择添加新规则或移除你不认可的规则。

传送门：

https://stylelint.io/

Iconate

优秀的 vanilla JavaScript 库，可让你将点击中的一个图标转换为另一个图标，并具有各种平滑的动画。Iconate 与所有 CSS 图标字体一起使用 — 只需在 HTML 中添加一个图标，并使用简单的 JavaScript API 来选择将其转换为哪一种，有 15 种以上的动画可供选择。

传送门：

https://bitshadow.github.io/iconate/

React-Datasheet

React 组件用于向应用添加功能齐全的类 Excel 数据表格。表格单元可以自由编辑、分组选择、复制、粘贴、删除，以及你期望的其他任何功能。其 GitHub 主页上有三个有用的例子 —— 一个基本的表格、带有公式的 spreadsheet，以及带有嵌套组件的表格。

传送门：

https://github.com/nadbm/react-datasheet

Pure CSS

模块化 CSS 框架，体积十分小，压缩后整个库只有 3.8kb，还可以通过移除一些不需要的部分进一步减小大小。模块包括基本的样式集，响应式网格，表单组件，按钮，表格和菜单。

传送门：

https://purecss.io/

Simple Icons

收集了大量社交网络、app、服务和其他品牌的免费图标。因为所有的图标都是使用 SVG 制作的，所以它们可以缩放到任何的尺寸而不用担心变模糊。基于 SVG 还使得它们非常轻量 — 大多数低于 500 bytes，具有更多细节的大约为 1、2KB。

传送门：

https://simpleicons.org/

Chroma.js

用于处理颜色的小巧的 JavaScript 库。它提供了丰富的 API，具有超过 50 种操作颜色的功能，可在颜色模式之间切换改变亮度和饱和度，创建渐变梯度等许多有用的方法。

传送门：

https://github.com/gka/chroma.js

Weex

Weex 是构建跨平台移动应用的框架，类似于 React Native，但适用于 Vue.js 项目。它可以让你使用 HTML，CSS 和 JavaScript 编写应用，然后在 Android 中将其渲染成 Java 或在 iOS 中将其渲染成 Swift。该框架有许多内置组件、API 和其他有用的功能。

传送门：

https://weex.apache.org/