forked from aliceui/aliceui.github.io
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathframework.html
More file actions
317 lines (302 loc) · 19.6 KB
/
framework.html
File metadata and controls
317 lines (302 loc) · 19.6 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Alice - 基础框架</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="generator" content="nico-spm 0.5.5" />
<link type="image/x-icon" href="../static/favicon.ico" rel="icon">
<link rel="stylesheet" href="../static/css/normalize.css" />
<link rel="stylesheet" href="../static/css/site.css" />
<link rel="stylesheet" href="../static/css/solarized.css" />
<link rel="stylesheet" href="../static/style.css" />
<style>
/* alipay iconfont */
@font-face {
font-family: "rei";
src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130423"); /* IE9 */
src: url("https://i.alipayobjects.com/common/fonts/rei.eot?20130423#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("https://i.alipayobjects.com/common/fonts/rei.woff?20130423") format("woff"), /* chrome 6+、firefox 3.6+、Safari5.1+、Opera 11+ */
url("https://i.alipayobjects.com/common/fonts/rei.ttf?20130423") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
url("https://i.alipayobjects.com/common/fonts/rei.svg?20130423#rei") format("svg"); /* iOS 4.1- */
}
.iconfont {
font-family: "rei"!important;
font-style: normal;
font-weight: normal;
cursor: default;
-webkit-font-smoothing: antialiased;
}
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1239219615670154" crossorigin="anonymous"></script>
<script src="../static/js/sea.js?nowrap"></script>
<!--[if lt IE 9]>
<script src="../static/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<script src="../dist/bundle.js?nowrap"></script>
<div id="body-wrapper">
<div class="head-area">
<div class="title-area">
<h1>
<a href="../">Alice</a>
</h1>
<p class="description">写样式的更好方式</p>
<img src="/static/alice-top.png" alt="alice" />
</div>
<iframe src="http://ghbtns.com/github-btn.html?user=aliceui&repo=aliceui.org&type=watch&count=true"
allowtransparency="true" frameborder="0" scrolling="0" width="90" height="20"></iframe>
</div>
<div class="nav-area">
<ol class="main-nav">
<li><a href="/"><i title="首页" class="iconfont"></i> 首页</a></li>
<li><a href="build.html">构建模块和样式库</a></li>
<li><a href="framework.html">基础框架</a></li>
<li><a href="javascript.html">JavaScript</a></li>
<li><a href="rule.html">规范和最佳实践</a></li>
<li><a href="start.html">开始使用</a></li>
<li><a href="tool.html">工具</a></li>
<li><a href="widget.html">通用样式库</a></li>
</ol>
</div>
<div class="main-area">
<div class="side-area"><ul><li><a href="#base-重设">Base 重设</a><ul><li><a href="#字体">字体</a></li><li><a href="#常用功能类">常用功能类</a></li></ul></li><li><a href="#rei-iconfont">Rei - iconfont</a></li><li><a href="#grid-栅格">Grid 栅格</a></li><li><a href="#css3-animate">CSS3 Animate</a></li></ul></div>
<script type="text/template" id="list-template">
<li><a href="#"><i class="iconfont" title="单箭头右">å</i></a></li>
</script>
<div class="content-area">
<h1>基础框架</h1>
<div class="content"><!--filepath:docs/framework.md --> <blockquote>
<p>Louis, I think this is the beginning of a beautiful friendship.
<em>「 Casablanca 」1942</em></p>
</blockquote>
<hr>
<p><link rel="stylesheet" href="http://assets.spmjs.org/alice/grid/1.0.0/grid.css" /></p>
<link rel="stylesheet" href="http://assets.spmjs.org/alice/animate/1.0.0/animate.css" />
<h2 id="base-重设">Base 重设<a href="#base-重设" class="anchor">¶</a></h2><p><a href="http://aliceui.org/base/">base.css</a> 是 Alice 的浏览器重设样式。</p>
<p>它扫除了浏览器默认样式的基本兼容性问题，像建筑的地基一样，让开发者在平地上放心的建造大楼。
Alice 的 base.css 是结合支付宝开发经验，借鉴 <a href="http://necolas.github.com/normalize.css/">normalize.css</a> 等业界优秀模块，并加上一些常用 className 而产出的一套重设样式。</p>
<blockquote>
<p><a href="http://snook.ca/archives/html_and_css/no_css_reset/">砸场子：No CSS Reset</a></p>
<p>实际上，Alice 也是 No CSS Reset 的拥趸，所有的通用模块都不依赖于 base.css 进行开发，它们会有自己的 reset 代码，这样它们在任何页面的表现都会 OK。
在 Alice 中，base.css 的更大作用是让第一线的页面开发者轻松些。</p>
</blockquote>
<h3 id="字体">字体<a href="#字体" class="anchor">¶</a></h3><p><a href="http://aliceui.org/base/">alice/base</a> 采用了 12 像素，1.5 的行高，并且兼容 Mac 和 Window 的字体配置，非常适合国内的网站样式。</p>
<div class="highlight"><pre><code class="css"><span class="tag">body</span>,<span class="tag">button</span>,<span class="tag">input</span>,<span class="tag">select</span>,<span class="tag">textarea</span> <span class="rules">{
<span class="rule"><span class="attribute">font</span>:<span class="value"><span class="number">12</span>px/<span class="number">1.5</span> tahoma,arial,<span class="string">"Hiragino Sans GB"</span>,\<span class="number">5</span>b8b\<span class="number">4</span>f53</span></span>;
<span class="rule">}</span></span></code></pre></div><h3 id="常用功能类">常用功能类<a href="#常用功能类" class="anchor">¶</a></h3><ul>
<li><p><code>fn-clear</code> 清除浮动</p>
</li>
<li><p><code>fn-hide</code> 隐藏元素</p>
</li>
<li><p><code>fn-left</code> <code>fn-right</code> 左右浮动</p>
</li>
<li><p><code>fn-text-overflow</code> 文字单行溢出省略号</p>
<div class="fn-text-overflow" style="width:100px">文字很长很长很长</div>
</li>
<li><p><code>fn-linear</code> 简单渐变</p>
</li>
<li><p><code>fn-linear-light</code> 浅色的简单渐变</p>
</li>
<li><p><code>fn-rmb</code> 金额样式 <span class="fn-rmb">￥23.67</span></p>
</li>
<li><p><code>fn-webkit-adjust</code> 用于修复 webkit 下小于 10px 的中文字体 <code>应该已失效</code></p>
</li>
</ul>
<p>我们使用 <code>fn-</code> 前缀表示一些常用的工具类名，灵活使用这些类会大大提高样式开发效率，请点击 <a href="http://aliceui.org/base">演示页面</a> 和 <a href="https://github.com/aliceui/base/blob/master/src/base.css">代码</a> 查看详情。</p>
<h2 id="rei-iconfont">Rei - iconfont<a href="#rei-iconfont" class="anchor">¶</a></h2><p>Rei（读音为“丽”）是支付宝的 iconfont 集，是一种把图标放入自定义字体中，然后使用字体图标来替代普通图标的技术。同时，Rei 也是动漫女神。</p>
<p><img src="https://i.alipayobjects.com/e/201303/2P2JVsHeCC.jpg" alt=""></p>
<p>字体图标具有良好的兼容性，矢量，规范，减少图片请求，适应性强等特点，大量先进的网站（包括 github 等）正在使用这种技术。
Alice 全面使用了 iconfont 技术，使得所有的通用样式模块都不会产生图片请求，并且也获得了良好的兼容性和通用性。</p>
<div class="highlight"><pre><code class="xml"><span class="tag"><<span class="title">i</span> <span class="attribute">class</span>=<span class="value">"iconfont"</span> <span class="attribute">title</span>=<span class="value">"灯泡"</span>></span>&#x00E3;<span class="tag"></<span class="title">i</span>></span></code></pre></div><p>Rei 目前涵盖了网站常用各类图标约 70 多个，兼容包括 <code>ie6/7/8</code> 在内的各主流浏览器，你可以自由的在页面中使用它。</p>
<style>
.iconset {
padding: 15px;
background: #FBFBFB;
border: 1px solid #eee;
border-radius: 4px;
}
.icon {
display: inline-block;
*display: inline;
*zoom: 1;
height: 22px;
width: 156px;
color: #888;
font-size: 14px;
line-height: 22px;
margin-bottom: 5px;
}
.icon .iconfont {
margin-right: 10px;
font-size: 18px;
width: 20px;
display: inline-block;
*display: inline;
*zoom: 1;
position: relative;
top: 2px;
}
</style>
<!-- 这段代码用来获取下面的字体 HTML 集合
<script src="http://site.alipay.im/rei/js/data.js"></script>
<script>
var array = [],
html = '';
array = array.concat(iconData['产品/品牌ICON']);
array = array.concat(iconData['通用ICON']);
array.forEach(function(item) {
html += '<div class="icon"><i class="iconfont" title="' + item[0] +
'">' + item[1] + '</i> ' + item[0] + '</div>\n';
});
console.log(html);
</script>
或者直接访问：
http://jsfiddle.net/FdE3c/show
-->
<div class="iconset fn-clear">
<div class="icon"><i class="iconfont" title="盾牌-阳"></i> 盾牌-阳</div>
<div class="icon"><i class="iconfont" title="代付"></i> 代付</div>
<div class="icon"><i class="iconfont" title="预付卡"></i> 预付卡</div>
<div class="icon"><i class="iconfont" title="信用支付"></i> 信用支付</div>
<div class="icon"><i class="iconfont" title="集分宝"></i> 集分宝</div>
<div class="icon"><i class="iconfont" title="集分宝反色"></i> 集分宝反色</div>
<div class="icon"><i class="iconfont" title="基金"></i> 基金</div>
<div class="icon"><i class="iconfont" title="账户通"></i> 账户通</div>
<div class="icon"><i class="iconfont" title="红包"></i> 红包</div>
<div class="icon"><i class="iconfont" title="银行卡"></i> 银行卡</div>
<div class="icon"><i class="iconfont" title="更多"></i> 更多</div>
<div class="icon"><i class="iconfont" title="常见问题"></i> 常见问题</div>
<div class="icon"><i class="iconfont" title="自助服务"></i> 自助服务</div>
<div class="icon"><i class="iconfont" title="回收站"></i> 回收站</div>
<div class="icon"><i class="iconfont" title="玩转支付宝"></i> 玩转支付宝</div>
<div class="icon"><i class="iconfont" title="优惠劵"></i> 优惠劵</div>
<div class="icon"><i class="iconfont" title="购物袋"></i> 购物袋</div>
<div class="icon"><i class="iconfont" title="支付宝卡"></i> 支付宝卡</div>
<div class="icon"><i class="iconfont" title="天猫"></i> 天猫</div>
<div class="icon"><i class="iconfont" title="支小宝"></i> 支小宝</div>
<div class="icon"><i class="iconfont" title="日历/日期"></i> 日历/日期</div>
<div class="icon"><i class="iconfont" title="喜欢"></i> 喜欢</div>
<div class="icon"><i class="iconfont" title="收藏"></i> 收藏</div>
<div class="icon"><i class="iconfont" title="设置"></i> 设置</div>
<div class="icon"><i class="iconfont" title="播放"></i> 播放</div>
<div class="icon"><i class="iconfont" title="添加-圆"></i> 添加-圆</div>
<div class="icon"><i class="iconfont" title="添加-方"></i> 添加-方</div>
<div class="icon"><i class="iconfont" title="添加-无框"></i> 添加-无框</div>
<div class="icon"><i class="iconfont" title="声音"></i> 声音</div>
<div class="icon"><i class="iconfont" title="右向"></i> 右向</div>
<div class="icon"><i class="iconfont" title="关闭/错误"></i> 关闭/错误</div>
<div class="icon"><i class="iconfont" title="选择/对勾"></i> 选择/对勾</div>
<div class="icon"><i class="iconfont" title="查询/搜索"></i> 查询/搜索</div>
<div class="icon"><i class="iconfont" title="安卓系统"></i> 安卓系统</div>
<div class="icon"><i class="iconfont" title="苹果系统"></i> 苹果系统</div>
<div class="icon"><i class="iconfont" title="windows Phone"></i> windows Phone</div>
<div class="icon"><i class="iconfont" title="显示器"></i> 显示器</div>
<div class="icon"><i class="iconfont" title="菱形"></i> 菱形</div>
<div class="icon"><i class="iconfont" title="视频"></i> 视频</div>
<div class="icon"><i class="iconfont" title="建议/对话"></i> 建议/对话</div>
<div class="icon"><i class="iconfont" title="联系邮箱"></i> 联系邮箱</div>
<div class="icon"><i class="iconfont" title="手机"></i> 手机</div>
<div class="icon"><i class="iconfont" title="首页"></i> 首页</div>
<div class="icon"><i class="iconfont" title="单箭头左"></i> 单箭头左</div>
<div class="icon"><i class="iconfont" title="单箭头右"></i> 单箭头右</div>
<div class="icon"><i class="iconfont" title="双箭头左"></i> 双箭头左</div>
<div class="icon"><i class="iconfont" title="双箭头右"></i> 双箭头右</div>
<div class="icon"><i class="iconfont" title="左三角形"></i> 左三角形</div>
<div class="icon"><i class="iconfont" title="右三角形"></i> 右三角形</div>
<div class="icon"><i class="iconfont" title="上三角形"></i> 上三角形</div>
<div class="icon"><i class="iconfont" title="下三角形"></i> 下三角形</div>
<div class="icon"><i class="iconfont" title="旺旺"></i> 旺旺</div>
<div class="icon"><i class="iconfont" title="用户"></i> 用户</div>
<div class="icon"><i class="iconfont" title="返回"></i> 返回</div>
<div class="icon"><i class="iconfont" title="图片"></i> 图片</div>
<div class="icon"><i class="iconfont" title="正方形"></i> 正方形</div>
<div class="icon"><i class="iconfont" title="账单"></i> 账单</div>
<div class="icon"><i class="iconfont" title="全部账单"></i> 全部账单</div>
<div class="icon"><i class="iconfont" title="出错"></i> 出错</div>
<div class="icon"><i class="iconfont" title="提示"></i> 提示</div>
<div class="icon"><i class="iconfont" title="警告"></i> 警告</div>
<div class="icon"><i class="iconfont" title="阻止"></i> 阻止</div>
<div class="icon"><i class="iconfont" title="成功"></i> 成功</div>
<div class="icon"><i class="iconfont" title="疑问"></i> 疑问</div>
<div class="icon"><i class="iconfont" title="等待"></i> 等待</div>
<div class="icon"><i class="iconfont" title="详情"></i> 详情</div>
<div class="icon"><i class="iconfont" title="切换"></i> 切换</div>
<div class="icon"><i class="iconfont" title="统计"></i> 统计</div>
<div class="icon"><i class="iconfont" title="下载"></i> 下载</div>
<div class="icon"><i class="iconfont" title="礼盒"></i> 礼盒</div>
<div class="icon"><i class="iconfont" title="备注"></i> 备注</div>
<div class="icon"><i class="iconfont" title="添加联系人"></i> 添加联系人</div>
<div class="icon"><i class="iconfont" title="申请还款"></i> 申请还款</div>
<div class="icon"><i class="iconfont" title="信用卡管理"></i> 信用卡管理</div>
<div class="icon"><i class="iconfont" title="记录"></i> 记录</div>
<div class="icon"><i class="iconfont" title="提醒"></i> 提醒</div>
<div class="icon"><i class="iconfont" title="地图"></i> 地图</div>
<div class="icon"><i class="iconfont" title="加载中"></i> 加载中</div>
</div>
<p>支付宝员工请直接访问 <a href="http://site.alipay.im/rei/">site.alipay.im/rei/</a> 来获取字体代码。</p>
<p>外网用户强烈推荐访问 <a href="http://iconfont.cn">阿里巴巴矢量图标库</a> 的公共服务来定制需要的字体图标。</p>
<h2 id="grid-栅格">Grid 栅格<a href="#grid-栅格" class="anchor">¶</a></h2><p>Alice 的布局是 990px 定宽 25 栅格，这是依托于支付宝实际需求的栅格系统，
在 <a href="https://my.alipay.com/">我的支付宝</a> 有应用。具体使用方式请见文档：<a href="http://aliceui.org/grid">aliceui.org/grid</a> 。</p>
<p><img src="https://i.alipayobjects.com/e/201303/2KLao4hPu8.png" alt=""></p>
<h2 id="css3-animate">CSS3 Animate<a href="#css3-animate" class="anchor">¶</a></h2><p>Alice 引入了一个优秀的 CSS3 <a href="http://aliceui.org/animate">动画库</a> 。</p>
<p>你可以通过简单的增减类名的方式在你的项目中实现数十种动画效果。比如：</p>
<blockquote>
<p>以下动画效果在支持css3 animate的高级浏览器中有效。</p>
</blockquote>
<style>
.animate-demo {
width: 80px;
height: 80px;
background: #42B8F7;
line-height: 80px;
text-align: center;
color: #fff;
display: inline-block;
}
#test2 {
background: #5FC161;
}
</style>
<div class="nico-insert-code"><div id="test1" class="animate-demo">点击我</div>
<div id="test2" class="animate-demo">点击我</div></div><div class="highlight"><pre><code class="xml"><span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"test1"</span> <span class="attribute">class</span>=<span class="value">"animate-demo"</span>></span>点击我<span class="tag"></<span class="title">div</span>></span>
<span class="tag"><<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"test2"</span> <span class="attribute">class</span>=<span class="value">"animate-demo"</span>></span>点击我<span class="tag"></<span class="title">div</span>></span></code></pre></div><script class="nico-insert-code">(function(){var $ = window['jquery'];
$('#test1').click(function() {
$(this).addClass('animated bounceOutLeft');
});
$('#test2').click(function() {
$(this).addClass('animated rotateInUpRight');
});})()</script><textarea mode="javascript" class="spm-doc-textarea">(function(){var $ = require('jquery');
$('#test1').click(function() {
$(this).addClass('animated bounceOutLeft');
});
$('#test2').click(function() {
$(this).addClass('animated rotateInUpRight');
});})()</textarea><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> $ = require(<span class="string">'jquery'</span>);
$(<span class="string">'#test1'</span>).click(<span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$(<span class="keyword">this</span>).addClass(<span class="string">'animated bounceOutLeft'</span>);
});
$(<span class="string">'#test2'</span>).click(<span class="function"><span class="keyword">function</span><span class="params">()</span> {</span>
$(<span class="keyword">this</span>).addClass(<span class="string">'animated rotateInUpRight'</span>);
});</code></pre></div><p>所有的动画效果请点击 <a href="http://daneden.github.io/animate.css/">daneden.me/animate</a> 查看。</p>
</div>
</div>
</div>
</div>
<div id="footer-wrapper">
<footer>
<p class="powered">
<a href="http://aralejs.org">Arale</a> •
<a href="http://aliceui.org">Alice</a> •
<a href="http://seajs.org">Sea.js</a> •
<a href="http://spmjs.io">spmjs.io</a> •
<a href="http://lab.lepture.com/nico/">nico-spm</a>
</p>
</footer>
</div>
<script>
window['aliceui.org'].init();
</script>
</body>
</html>