15 个有用的 JavaScript 和 CSS 库

0顶
1踩

2017-05-24 17:19 by 副主编 jihong10102006 评论(0) 有5689人浏览

javascript css

高质量的网页设计需要直观和用户友好的界面，而且屏幕上的元素也起着非常重要的作用。Web 设计师不断地寻找优秀代码的集合，希望能提升工作效率。但找到合适的工具库并不总是那么容易的。网络上有太多的资源可以使用，而且也是免费的，因此很难判断哪些资源比较好。这就是精心搜索并编写这个最好的库列表的原因。

无论是希望创建一个视觉上吸引人和功能强大的布局，还是需要在表单和其他区域添加屏幕上的规则和验证，你都会喜欢这个集合。这里列出的库是由具有丰富网页设计经验的专家创建的，这些库不仅是经验丰富的设计师的优秀工具，也是适用于初学者的好工具。这个集合将会帮你节省很多时间，来看一看吧！

1. Buefy

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

2. HR.js

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

3. React VR

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

4. Tippy.js

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

5. Barba.js

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

6. UIkit

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

7. Haul

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

8. AcrossTabs

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

9. Stylelint

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

10. Iconate

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

11. React-Datasheet

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

12. Pure CSS

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

13. Simple Icons

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

14. Chroma.js

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

15. Weex

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

来源：DzineShip