[第 63 期] 两个手绘风格的组件库: papercss 和 wired.js

[hacker0limbo]

papercss: 一个手绘风格的纯 css 库, 没有任何 js 依赖. 有基本的组件, 对于基本标签都有自己的默认样式, 因此甚至可以无需写 css. e.g. <button>效果如下图:

wired.js: 一个手绘风格的 js 库, 使用 web component 进行了封装. 同时也可以在流行框架比如vue, react, Angular等进行调用. e.g. <button> 效果如下图:

两个库都有一个小缺点是: 目前组件还太少

参考:

• papercss 官网
• papercss github 地址
• wired.js 官网
• wired.js github 地址

[sanbeichahegongheguo]

你有没有用过？有什么具体区别吗？

[hacker0limbo]

区别不大, 但是papercss是一个纯 css 框架, 类似 bootstrap, 你可以用它来布局和修改样式. 而wired.js 是一个 js 组件库, 基于 Web Component 的, 所以更多的是直接引入调用里面的组件, 风格上区别不大, 差异在于如何调用(引用)

我目前自己的博客就是用的papercss进行布局和样式的设计, 但是缺点还是很明显的, 两个库目前的组件都还是还少了, 尤其是wired.js. 不过毕竟两个库还是挺新的, 可以理解.

可以试着自己用用这两个库, 文档还是比较齐全的, 而且都还不断在更新. 用在自己的项目里面风格还是挺别具一格的

[rmlzy]

http://rate.poppython.com/

我在一个小型的页面里使用 papercss, 感觉效果还不错