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

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

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

0. Buefy

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

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

1. HR.js

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

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

2. React VR

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

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

3. Tippy.js

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

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

4. Barba.js

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

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

5. UIkit

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

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

6. Haul

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

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

7. AcrossTabs

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

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

8. Stylelint

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

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

9. Iconate

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

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

10. React-Datasheet

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

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

11. Pure CSS

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

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

12. Simple Icons

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

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

13. Chroma.js

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

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

14. Weex

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

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

文章转载自 开源中国社区[https://www.oschina.net]