aliceui / aliceui.github.io

写样式的一种方式

关于 Alice

• order: 1
• category: alice

---

Alice 是什么

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

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

图片来自 meago。

Alice 的特点

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

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

2. 强大的工具支持。

   Alice 使用了 spm、nico、Peaches 等实用的工具帮助开发样式。

3. 使用 iconfont 和 CSS3 技术。

   我们推崇纯色和简单渐变的视觉效果，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 官网

aliceui.github.io's Issues

构建团队的样式库小白遇到问题..求大神细解...

curl https://raw.github.com/aliceui/stylib/master/bootstrap.sh | sh
命令运行后会在当前目录建立一个样式库文件夹 stylib，先修改 package.json 中的 family 为你注册维护的.

完全不明白其中意识... 我就想在本地做一个样式库集合, 可以吗? 把自己写的所有样式像http://aliceui.org/stylib/ 支付宝他们这样显示出来.. 求.....

求教：.eot ,.woff ,.ttf ,.svg这些格式的文件是怎么制作的

备份自原有库的 issue

@feiwen8772:

请问Rei - iconfont中.eot ,.woff ,.ttf ,.svg这些格式的文件是怎么制作的？有没有统一的工具，谢谢！

引入seajs-style以及没有决解问题

Uncaught TypeError: Object # has no method 'importStyle'

网站打不开了 :(

如题

构建样式库 stylib无法下载的问题

我执行$ curl https://raw.github.com/aliceui/stylib/master/bootstrap.sh | sh命令之后，并没有产生stylib目录。提示除了Time spend 是4、5秒以外，其他全是0，为什么呢？望解答，谢谢。

vim 插件问题

Alice solutions 的vim插件，当展开sl-file时，html.snippets中的sl-file-input前面多了一个"."

像分页这样的ui样式，arale能提供对应的交互么

感觉arale也应该有分页这个组件，但是没找到。

将 aliceui.org 迁移过来

• issues
• 代码

equal-height-layout解决方案中，子元素应添加 .sl-equalheight-item实现等高

原文为"子元素添加 .sl-equalheight 可以实现等高"，应该属笔误。

alice 里面的 REI字库怎么兼容ie10的，首页给的css里面没有对ie10的兼容

IE6兼容性问题

备份自原有库的 issue

@joelhy:

aliceui.org 在IE6下报js错误

在IE10下http://aliceui.org/docs/javascript.html演示的日历和自动完成无效果

如题。

popup 和 button-dropdown 结合的范例

备份自原有库的 issue

@afc163:

在 javascript 页面添加这一典型的例子。

aliceui 网站不可访问

目前我们公司使用了aliceUI的开源代码，但是这块如果网站停止维护，能否提供一个demo集合页，不然我们公司前端的一些日常的工作，就受到了一些阻碍。谢谢！

有没有LESS或者SASS的源码包啊？

如题，问一下Alice有没有像bootstrap一样的，官方的LESS或者SASS的源码包啊？既然都是开源的，这样可以方便二次开发的扩展，求包，哈哈

迁移至 spm3 并优化样式和代码

Alice 4 开发规划

（待偏右整理，需要至少包括两块：1、Q3 规划中的做的事情，时间点和里程碑。2、现有的 issues 梳理。）

官网的animate.css和grid.css无法加载

这个页面http://aliceui.org/docs/framework.html

http://assets.spmjs.org/alice/grid/1.0.0/grid.css Failed to load resource: net::ERR_NAME_RESOLUTION_FAILED
http://assets.spmjs.org/alice/animate/1.0.0/animate.css Failed to load resource: net::ERR_NAME_RESOLUTION_FAILED

导致http://aliceui.org/docs/framework.html#css3-animate 这个位置的两个demo动画展示不了

solutions里custom-file.html编码不正确

meta里写的是utf-8，但比如title里就不是
`

<title>×Ô¶¨Òå file ÉÏ´«</title>`

alice grid在IE7下和iconfont在firefox下

alice grid 页面http://aliceui.org/grid/iframe-readme-1.html ，在IE7下的margin崩溃以及iconfont在firefox下乱码你们没有解决吗？咨询一下官方的解决方案。

添加了一个 components

没有 demo，只有一个 raw css。没有任何说明。另外，这个东西是开源还是内部使用？

问题请教--Alice/base.css中关于去除边框的定义

在Alice/base.css中有一下css定义
/* 去除默认边框 */
fieldset,img,a img{
border:0;
}

请问后面第三个选择器 a img 是出于什么考虑？img 不是也能将 a下面的img 选中了？
-一般提问在哪里？初次使用GitHub

修改css预览问题

修改了src目录下面css文件的内容，在访问http://127.0.0.1:8000没什么变化。

构建项目的步骤如下

1. spm init
   2.在README.md里面添加如下内容

<div class=" ui-dialog">
aa
</div>

3.spm doc watch
4.访问127.0.0.1:8000发现ui-dialog的样式并没有展现出来

Alice 下一步规划

迁移的 issue

@afc163:

计划在 7 月底前做完。

增加

• #14 响应式设计
• #12 popup 和 button-dropdown 结合的范例
• #16 建设 alipay-css 为 family 的支付宝专用模块库
• #15 支付宝新版UI更新。

spm2 支持

• #2 spm2 接入，package.json格式更新，并发布到 spmjs.org
• #13 静态文档托管到 spmjs.org 上

bugfix

• tipbox 间距调整
• iconfont 图标重做，解决定位不准的问题 #10

参考

http://developer.android.com/design/index.html

谁能给我讲下 这个ui-label css 为什么要这样设计 .

.ui-label {
float: left;
width: 170px;
/margin-left: -180px;/
padding-top: 5px;
text-align: right;
font-size: 14px;
}
感觉 这个-180px 用的很突兀 和 很具体化. 是不是自己要根据自己的需求全面修改aliceui
提供的通用样式css 呢? 还是和bootstrap 主要是使用.不用自己大规模改造.

Alice 站点和组件发展

迁移的 issue

@afc163:

• alice 项目迁移 https://github.com/aliceui/
• alice 各模块兼容性测试
• spm 支持样式打包和依赖 spmjs/spm#645
• aliceui.org 首页样式和框架
• aliceui.org 各文档撰写
• aralejs.org 添加alice的内容和链接
• 确定业务线模块开发模式
• 样式库快速搭建方案
• 找一个 favicon
• arale.alipay.im 域名解析
• aliceui.com 域名找小鱼要来
• gitlab 的代码托管 alipay-css 的 group
• iconfont

aralejs/aralejs.github.io#230 alice 现状和未来

样式库脚本

我记得原来有初始化样式库的脚本的，删了？

生成类似这样的页面 http://aliceui.org/docs/widget.html

建议 CSS 中的 html 添加 overflow-y: scroll

建议在 html 标签中，添加 overflow-y: scroll，以避免页面从初始的没有滚动条到产生滚动条而产生的页面抖动。谢谢！

fn前缀求原因(why fn prefix?)

我看到base.css里面中关于浮动相关的类用了fn作为前缀。想知道为什么。

请问怎么使用spm全部下载下来

貌似spm只能一个模块一个模块的下载

th的reset是否重复？

th {
text-align: inherit;
}

caption, th {
text-align: left;
}

alice 开发工具

迁移的 issue

@popomore:

• spm2 打包支持
• alice-stylus-mixins
• nico 支持
• peaches 支持
• selector 探测
• family + name + version 样式隔离方案 #9
• 整体方案集成到 spm-alipay-suite

spm build 打包css文件含有@import url 失败

spm build 打包css文件含有@import url 失败
C:\Program Files (x86)\nodejs\node_modules\spm\node_modules\spm-build\node_modul
es\gulp-spm\node_modules\css-imports\index.js:27
imports(str).forEach(function(r){
^
TypeError: Cannot read property 'path' of undefined
at C:\Program Files (x86)\nodejs\node_modules\spm\node_modules\spm-build\nod
e_modules\gulp-spm\lib\plugin\css.js:92:27
at C:\Program Files (x86)\nodejs\node_modules\spm\node_modules\spm-build\nod
e_modules\gulp-spm\node_modules\css-imports\index.js:28:33
at Array.forEach (native)
at map (C:\Program Files (x86)\nodejs\node_modules\spm\node_modules\spm-buil
d\node_modules\gulp-spm\node_modules\css-imports\index.js:27:16)
at imports (C:\Program Files (x86)\nodejs\node_modules\spm\node_modules\spm-
build\node_modules\gulp-spm\node_modules\css-imports\index.js:9:18)
at transportFile (C:\Program Files (x86)\nodejs\node_modules\spm\node_module
s\spm-build\node_modules\gulp-spm\lib\plugin\css.js:68:16)

问题反馈：a标签的按钮:hover状态的文字颜色问题

备份自原有库的 issue

@feiwen8772:

蓝色按钮为什么没边框border？和其他按钮放在一起明显尺寸小了一号，感觉不是很好！

小激动一下

我现在一直在做这方面的工作，忽然在微博看到alice，感觉挺激动的，想参与一下！但有些疑问。是自己要建仓吗？

请问字体设置的依据是？

迁移的 issue

@jsw0528:

body {
    font:12px/1.5 tahoma,arial,Hiragino Sans GB,"Microsoft Yahei",\5b8b\4f53;
}

arial 应该都会有吧？那Microsoft Yahei还能被应用么？

aliceui.org宕了

需求：跨浏览器前端表单验证

表单验证想必是前端开发者们都头疼的问题，虽然HTML5已经加入了新的标签以及属性来做表单验证（input type="email" required等等），但各浏览器的支持程度不一，验证形式也各不相同。希望能有一个通用的方式来做到跨浏览器的表单验证。

最好能加上类似于Ant这种简单的building工具

配置好需要的sl 然后就可以buiding出.min 的样式文件
可能更加方便大家构建自己的应用

只是建议

有关sl-custom-file

IE7 button的padding，有bug。
处于显示状态的button可以有更多的样式来表现。

在编译base.less文件的时候报错

如题，在使用Crunch编译base.less的时候报了一个语法错误：

Compiler Errors
Syntax Error on line 32 (Line: 32)

看了一下，是这段代码出错了

/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea{
    font:12px/1.5 tahoma,arial,\5b8b\4f53;
}

在less中/表示的是一个运算符，看lesscss.net 中有避免编译这一节，所以就将上面的代码改了一下：

/* 要注意表单元素并不继承父级 font 的问题 */
body,button,input,select,textarea{
    font:~'12px/1.5 tahoma,arial,\5b8b\4f53';
}

这样子就不会出现Syntax Error这个错误了。

问题：有没有其它的方案可以解决这种需要反编译的符号？

关于iframe的说明错误

原文如下：
/* ie6 7 8(q) bug 显示为行内表现 */
iframe {
display:block;
}
但根据我查询资料，以及在各大浏览器测试（IE6-9,FF11,S5,O11,CH17）下均为行内表现，
不过display:block;确实可以解决iframe在html5的doctype下的一个小问题，详见：

https://github.com/niceue/Nice/blob/master/src/normal.css 中关于iframe的说明

测试：https://github.com/niceue/Nice/tree/master/src/test/iframe

最后说明下：Nice是我个人最近才上传的项目，但是已经经过了无数次的测试与修改，包含一些基础样式库，很多代码都是经过两年开发中的兼容测试经验的总结。
Alice是个不错的项目，希望能够互相汲取经验，为前端做出贡献

aliceui.org 系列网站 都打不开了！

base.css中的渐变不支持ie10

/* 简单的渐变 */
.fn-linear {
background: -webkit-gradient(linear, left top, left bottom, from(#fcfcfc), to(#f1f1f1));
background: -moz-linear-gradient(top, #fcfcfc, #f1f1f1);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfcfc', endColorstr='#f1f1f1');
background:-o-linear-gradient(top, #fcfcfc, #f1f1f1);
background: linear-gradient(top, #fcfcfc, #f1f1f1);
}
IE10+、Firefox19.0+、Chrome26.0+和Opera12.1+等浏览器支持w3c写法
最后一个应该改为 background: linear-gradient(to bottom, #fcfcfc, #f1f1f1);

关于在 Alice 中彻底隔离样式冲突的方案

备份自原有库的 issue

@afc163:

http://aliceui.org/docs/javascript.html#%E5%9C%A8-arale-%E4%B8%AD%E4%BD%BF%E7%94%A8%E6%A0%B7%E5%BC%8F

在上面的链接中提到，目前在 Arale 中使用样式有两种方案。一种是使用标准的 link 标签，一种是在 JS 中 require 样式文件的方式。

其中，后一种方式由于比较对用户友好方便，成为 Alice 中的一个重要实践。目前使用了第二种方法载入样式的组件有 arale.dialog、alipay.xbox、alipay.poptip，实践中发现有较为严重的冲突问题。

主要原因是支付宝的页面上已经使用了很多 ui-poptip、ui-dialog、ui-xbox 等 className ，因此这些组件的样式都和页面互相造成了冲突。

冲突主要分为两部分，一是其他样式对模块自身的影响覆盖，二是模块自身对其他样式的覆盖。

1、解决其他样式对模块自身的影响覆盖。

现在解决这个问题的方案是使用 classPrefix 来替换模板中的类命名空间，然后自己写样式来定义。

比如在 alipay.xbox 组件中，模板 xbox.tpl 和 样式文件 xbox.css 如下：

<div class="ui-xbox">
    <div class="ui-xbox-container"></div>
</div>

.ui-xbox { ... }
.ui-xbox-container { ... }

将 classPrefix 置换为 ui-newxbox 后，模板变为了：

<div class="ui-newxbox">
    <div class="ui-newxbox-container"></div>
</div>

这样页面上的 ui-xbox 类就不会再影响我们的结构了。第一个问题的解决方案是能解决问题但比较麻烦的，这个方案更大的用途是用来做自定义的样式。

2、解决模块自身对其他样式的影响覆盖。

这个问题是本 issue 主要要解决的问题。 继续看上面的例子：

.ui-xbox { ... }
.ui-xbox-container { ... }

无论 classPrefix 是否自定义，这段样式始终会通过 importStyle 的方式载入，也就有可能对页面上的其他 ui-xbox 产生冲突。

importStyle('.ui-xbox{...};.ui-xbox-containter{...}');

要解决这个问题，目前想到的有以下几个方案：

1. 当 classPrefix 自定义时，说明开发者不再需要使用默认样式，需要自己写相关样式，就不再载入 xbox.css 。

   方案缺点：当用户需要避免自身模块对页面其他地方冲突时，必须自定义 classPrefix 。

2. 统一使用 ai- 开头代替目前的 ui-前缀，规避这个问题。

   方案缺点：没有实际解决问题，未来的冲突还可能存在，特别是同一组件的不同版本的问题。

3. 在 spm 打包时，把样式中的类的主要名称全部替换成 classPrefix 的默认值。比如上面的 xbox.css，假设 classPrefix 为 alipay-xbox，将会被替换成：

.alipay-xbox-1_0_0 { ... }
.alipay-xbox-1_0_0-container { ... }

就是将所有的 ui-xbox 替换成 alipay-xbox-1_0_0 这样 family、name 和版本的集合，同时也需要修改相应的模板。这样生成的奇异的默认样式就基本上不会和已有的样式产生冲突，并且不同版本之间也会有隔离。

方案缺点：对样式书写有一定要求。而且替换的 ui-xbox 和被替换的 alipay-xbox 分别用什么方式进行指定还不清楚。

---

综上，方案 3 是我们（我）比较中意的方案，但也有很多问题要解决。希望尽快解决这个问题，并将在 spm2 进行实现。

或者大家有没有什么更好的方案？

@fool2fish @leoner @lepture @lifesinger @popomore @shaoshuai0102 @noahlu

---

最终解决方案

package.json 配置 styleBox 会支持此功能

"spm": {
  "styleBox": true
}

spm build 会有两方面的处理

对于 require 的样式

这部分样式会打包进来，并添加前缀，其他样式不处理。

define(function(require, exports, module) {
  require('./xbox.css');
});

转换成

define('alipay/xbox/1.0.0/xbox', [..., './xbox.css'], function(require, exports, module) {
  require('./xbox.css');
});
define('alipay/xbox/1.0.0/xbox.css', [], function() {
  seajs.importStyle('.alipay-xbox-1_0_0 .ui-xbox{} ...');
});

对于 js

会处理所有的 js 脚本，在下方如下添加

define('alipay/xbox/1.0.0/xbox', [..., './xbox.css'], function(require, exports, module) {
  require('./xbox.css');
  module.exports.outerBoxClass = "alipay-xbox-1_0_0";
});

widget 的处理

如果组件存在 outerBoxClass，在生成 element 的时候会生成一个 outerBox

<div class="alipay-xbox-1_0_0">
  <div class="ui-box"></div> // <= 这是 element
</div>

iconfont有一个bug

备份自原有库的 issue

@luyes:

第24行到32行：
/* 预设左右位置 */
.iconfont-right {
margin-left:0;
margin-right:4px;
}
.iconfont-right {
margin-right:0;
margin-left:4px;
}
两个类的名称重复了，我估计是有一个写错了

垂直居中里增加"单元素里包含未知宽高图片"的解决方案?

HTML 如：
<div>
<img src="" />
</div>
这种好像比较常见，希望能增加下。

ie7下没有间距了。。。

http://aliceui.org/grid/iframe-readme-5.html

ie7下没有间距了。。。