/aliceui.org

淘宝支付宝 前端 写样式的一种方式

Primary LanguageCSSMIT LicenseMIT

关于 Alice

  • order: 1
  • category: alice

Alice 是什么

Alice 是漫游仙境的童话女神,是支付宝的样式解决方案,是一套精选的基于 spm 生态圈的样式模块集合,是 Arale 的子集,也是一套模块化的样式命名和组织规范,是写 CSS 的更好方式。

她包括了一套通用样式模块库,一个模块化样式构建规范,一组帮助书写和组织样式的工具,以及产出更多 Alice 模块和样式库的完善方案。

图片来自 meago

Alice 的特点

  1. 模块化的命名和组织方式。

    基于 spm 生态圈,使用了Alice 命名规范,以模块的方式组织样式。

  2. 强大的工具支持。

    Alice 使用了 spmnicoPeaches 等实用的工具帮助开发样式。

  3. 使用 iconfontCSS3 技术。

    我们推崇纯色和简单渐变的视觉效果,Alice 的通用样式模块一律不使用背景图片来实现, 而是使用了 iconfont 和渐进增强的 CSS3 技术,视觉上有更好的适应性和现代感,并且支持 Retina 屏幕, 而在低端浏览器下只保证了基础的视觉支持(比如没有圆角)。

    不使用图片的另一个好处是可以在页面中大胆使用通用模块而不用担心请求数过多影响性能。

    注:一切必须用背景图片才能实现的视觉效果都是耍流氓。

  4. 提供了样式开发方案。

    Alice 不仅仅是一套前端精选模块集,她为写样式提供了一套更好的方案, 你能够很容易基于她的体系来产出属于自己和团队的模块和样式库。

  5. 完整的前端开发体系。

    Alice 是 Arale 的子集,她完善和补充了 Arale 中对于样式的解决方案。在背后有着 Arale 的强大支持, Alice 的样式模块也能做更多事情。

兼容性

严正声明,我们不支持 IE5.5 或更早的版本!

Alice 基于支付宝的实际需求产出了一套通用样式模块,因此这些模块仍然需要支持 IE6/7 , 但不拘泥在低级浏览器上的视觉效果(我们讨厌它们,所以把视觉弄得很丑)。

和 Arale 的关系

Alice 是 Arale 的子集,是原有的 Arale 体系中对样式的补充。 使用 Alice 的样式规范和工具开发出来的样式很容易和 Arale 的 JavaScript 的模块配合。

什么,对 Arale 不熟悉?可以先访问下 Arale 的官网

加入我们

Alice 的前身是 http://github.com/sofish/alice, 新方案是在此基础上结合了 cmd 生态圈的特性和这一年来对实际需求的总结而产出的。 感谢 @小鱼 @展新 @欣欣 同学过去的工作成果,也感谢社区对我们的关注和贡献。

这是一个开放的体系,非常欢迎大家在 Alice 的规范下产出自己的模块和样式库。

若对 Alice 有任何问题或建议,欢迎提 issue 与我们沟通。

Github 仓库

Github 组织

Arale 官网