🎨 Neumorphism（新拟态）风格的 UI 框架 alpha 版本发布啦 ~ 样式部分纯 CSS，支持 Web 和小程序，简单易用，感谢大家关注和支持 ~

以希望能够统一自己的作品风格为出发点，在过去的一个月里，我开始着手开发一套 Neumorphism （新拟态）风格的 UI 框架。目前，基础样式部分已经完成，前天我也发布了 alpha 版本，归纳来说，

具备以下特点：

我的技术方案比较小众，所谓 UI 框架的部分大家目前很少能用到，但对于样式来说，核心的部分就是一个 mobius.css 文件，创建新拟态风格有它就足够了；
受 tailwindcss 的影响极深，采用了 utility-first 的编写方式，你可以只使用其中的个别类简单地创建新拟态风格组件，也可以综合使用其中提供的 Layout 、Typography 、Effects 、Interact 等功能类完成 80% 以上的页面样式开发工作；
大量使用了 CSS 变量，绝大多数功能类的细节都可以进行自定义调整（比如主题色、字号梯度、阴影大小、间距等）；
没有使用特别怪异的 CSS 属性，兼容大多数主流浏览器和小程序（目前主要是微信小程序）；
天然支持 DarkMode，支持四种光线角度调整；
...

体验或使用的理由：

也许是目前实现地最好的 Neumorphism 风格 CSS Library，纯 CSS 、框架无关；

缺点但我认为还勉强可以接受：

文档还在缓慢创作中（对于一个纯 CSS 库来说，文档似乎也不是什么拦路虎）；
样式类名有点长，一方面是目前 utility-first 或者叫做 atomic 风格的库也不少，为了避免命名冲突；另一方面是为了表意，gzip 和 brotli 面前，冗长的类名不是不可以接受，如果你的技术方案跟我相同的话，我有一套简单的解决办法；

本来是想写一篇文章详细梳理总结一下的，但最近个人因为种种原因蛮颓的，决定往后推一推，先写这么一段简介放出来给 V 友们瞧瞧，收集点反馈，希望大家可以多多关注、体验、支持！

Mobius UI GitHub Repo
- 准备了两个实例作为参考，一个网页，一个微信小程序；

cigaret

2020-05-19 10:13:10 +08:00

@lhx2008 @Tas1 @dcsite @fortunezhang @leeggco 有一说一，这种风格的可访问性确实是比较大的问题，目前我还没有见过在正式的面向用户的产品中使用的成熟案例。但我隐约觉得可以通过一些样式的使用规范来缓解这样的问题，还在探索中...

@BadReese @rioshikelong121 Demo 比较单薄有两点客观原因，一是现阶段主要是完成了基础功能类的开发，二是相关文档和使用案例的输出确实非常缓慢。主观上，utility-first 范式下高级组件其实就是基础功能类的拼接，当然，所有样式无非都是 CSS 属性的堆砌，这听起来是一句废话 🤐 随着文档和案例的更新，我也会逐步输出一些高阶组件的示例。

还有相当多不完善的地方，在预期的计划中，半年之后有望进入 beta 阶段，非常感谢大家的支持和关注！❤