-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
118 lines (100 loc) · 9.56 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>RUI</title>
<link rel="stylesheet" type="text/css" href="static/css/main.css">
<script type="text/javascript" src="static/js/jquery.js"></script>
<script type="text/javascript" src="static/js/transition.js"></script>
<script type="text/javascript" src="static/js/tab.js"></script>
<script type="text/javascript" src="static/js/dropdown.js"></script>
<script type="text/javascript" src="static/js/tooltip.js"></script>
<script type="text/javascript" src="static/js/popover.js"></script>
<script type="text/javascript" src="static/js/modal.js"></script>
</head>
<body>
<div class="navbar ">
<div class="container">
<div class="logo">
RUI
</div>
<ul><li class="active"><a href="index.html">首页</a></li><li><a href="html/快速入门.html">快速入门</a></li><li><a href="html/基础框架.html">基础框架</a></li><li><a href="html/组件.html">组件</a></li><li><a href="html/javascript组件.html">javascript组件</a></li></ul>
<div class="forkgithub"><a target="_blank" href="https://github.com/r-ui/rui/tree/master">fork on github</a></div>
</div>
</div>
<div class="bs-docs-header">
<div class="container">
<h1>RUI</h1>
<p>一套前端开发框架，视觉体验一致的基础样式库，借助开源力量为系统 Web 开发量身设计，可以令我们开发的系统使用感知更加统一。我们希望借助gulp加载正在使用的部分CSS代码。</p>
</div>
</div>
<div class="container">
<div class="page-toc">
<ul><li><a href="#t0代码规范">代码规范</a><ul><li><a href="#t1缩进">缩进</a></li><li><a href="#t2样式">样式</a><ul><li><a href="#t3通用样式命名">通用样式命名</a></li><li><a href="#t4函数命名">函数命名</a></li><li><a href="#t5变量命名">变量命名</a></li></ul></li><li><a href="#t6CSS语法">CSS语法</a></li><li><a href="#t7工具使用">工具使用</a><ul><li><a href="#t8编辑器配置">编辑器配置</a></li><li><a href="#t9CSS">CSS</a></li><li><a href="#t10js">js</a></li><li><a href="#t11自动化工具">自动化工具</a></li></ul></li></ul></li></ul>
</div>
<div class="content markdown-body">
<p>RUI 是一套基础样式库</p>
<h1 id="t0代码规范">代码规范 <a href="#t0代码规范"> # </a></h1>
<h2 id="t1缩进">缩进 <a href="#t1缩进"> # </a></h2>
<ul>
<li>嵌套元素应当缩进一次（即四个空格）。</li>
<li><code>Tab</code> 缩进用四个空格来代替制表符（tab）代码行缩进。</li>
</ul>
<h2 id="t2样式">样式 <a href="#t2样式"> # </a></h2>
<h3 id="t3通用样式命名">通用样式命名 <a href="#t3通用样式命名"> # </a></h3>
<ul>
<li>以一个英文单词命名（非组件样式）。</li>
</ul>
<h3 id="t4函数命名">函数命名 <a href="#t4函数命名"> # </a></h3>
<ul>
<li>根据styl特性，里面的函数命名使用横杠 <code>-</code> <s>非驼峰命名</s>、<s>非下划线命名</s>。</li>
<li>函数统一放到 <code>mixins/...</code> 目录中。</li>
</ul>
<h3 id="t5变量命名">变量命名 <a href="#t5变量命名"> # </a></h3>
<ul>
<li><code>stylus</code>中全局变量一定是下划线连接 <code>_</code>，与CSS区分如<code>font-weight:bold</code>。</li>
<li>全局样式放到 <code>variables.styl</code> 中。</li>
<li>英文单词命名拒绝拼音。</li>
</ul>
<h2 id="t6CSS语法">CSS语法 <a href="#t6CSS语法"> # </a></h2>
<p>CSS 全部使用<code>stylus</code> 这里是 <code>stylus</code> 使用语法</p>
<ul>
<li>为选择器分组时，将单独的选择器单独放在一行。</li>
<li>声明块的右花括号，<code>stylus</code> 一般情况没有，请查看官方文档。</li>
<li>每条声明语句的 <code>:</code> 后应该插入一个空格。</li>
<li>请不要在样式后面跟分号（例如，<code>margin: 10px</code> 代替 <code>margin: 10px;</code>）。</li>
<li>为选择器中的属性添加双引号，如：<code>input[type="text"]</code>。</li>
<li>不要在 <code>rgb()</code>、<code>rgba()</code>、<code>hsl()</code>、<code>hsla()</code> 或 <code>rect()</code> 值的内部的逗号后面插入空格。</li>
<li>避免为 0 值指定单位，例如，用 <code>margin: 0</code> 代替 <code>margin: 0px</code>。</li>
<li>对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，<code>.5</code> 代替 <code>0.5</code>；<code>-.5px</code> 代替 <code>-0.5px</code>）。</li>
<li>尽量使用简写形式的十六进制值，例如，用 <code>#fff</code> 代替 <code>#ffffff</code>。</li>
<li>十六进制值应该全部小写，例如，<code>#fff</code>。</li>
<li>对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。</li>
</ul>
<h2 id="t7工具使用">工具使用 <a href="#t7工具使用"> # </a></h2>
<h3 id="t8编辑器配置">编辑器配置 <a href="#t8编辑器配置"> # </a></h3>
<p>将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：</p>
<ul>
<li>用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。</li>
<li>保存文件时，删除尾部的空白符。</li>
<li>设置文件编码为 UTF-8。</li>
<li>在文件结尾添加一个空白行。</li>
</ul>
<h3 id="t9CSS">CSS <a href="#t9CSS"> # </a></h3>
<p>CSS 使用<code>Stylus</code>工具写，请不要使用<s><code>Less</code>、<code>Sass</code></s> </p>
<ul>
<li><a href="https://packagecontrol.io/packages/Stylus%20Clean%20Completions">sublime代码提示插件 Stylus Clean Completions</a></li>
<li><a href="http://learnboost.github.io/stylus/">官方文档</a></li>
<li><a href="http://www.zhangxinxu.com/jq/stylus/">张鑫旭中文翻译</a>、</li>
<li><a href="http://learnboost.github.io/stylus/try.html">Try Stylus!</a></li>
</ul>
<h3 id="t10js">js <a href="#t10js"> # </a></h3>
<p>js 请不要使用 <s><code>CoffeeScript</code>、<code>TypeScript</code></s></p>
<h3 id="t11自动化工具">自动化工具 <a href="#t11自动化工具"> # </a></h3>
<p>我们使用 <code>gulp</code> 不要使用 <s><code>grunt</code></s></p>
<div class="copyright">Powered by <a href="https://github.com/jaywcjlove/idoc" target="_blank">idoc</a>. Dependence <a href="https://nodejs.org">Node.js</a> run.</div>
</div>
</div>
</body>
</html>