-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
205 lines (200 loc) · 10.7 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
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
<!DOCTYPE html>
<html>
<head>
<title>Neko UI</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="./dist/css/neko.css">
<style>
body{
background-color: #fff;
}
.neko-row>div {
box-sizing: border-box;
border: 1px solid #2d9cd0;
line-height: 50px;
}
.neko-container .neko-row + .neko-row{
margin-top: 10px;
}
.button-row>div{
border: 0;
}
.button-row .neko-btn{
margin: 10px 8px;
}
</style>
</head>
<body>
<div class="neko-container neko-no-gutters">
<h2>neko-button</h2>
<div class="neko-row button-row">
<div class="neko-col-12">
<h3>Default</h3>
<button class="neko-btn">Black</button>
<button class="neko-btn neko-color-blue">Blue</button>
<button class="neko-btn neko-color-light-blue">Light Blue</button>
<button class="neko-btn neko-color-cyan">Cyan</button>
<button class="neko-btn neko-color-teal">Teal</button>
<button class="neko-btn neko-color-green">Green</button>
<button class="neko-btn neko-color-light-green">Light Green</button>
<button class="neko-btn neko-color-lime">Lime</button>
</div>
<div class="neko-col-12">
<h3>Outline</h3>
<button class="neko-btn outline">Black</button>
<button class="neko-btn outline neko-color-blue">Blue</button>
<button class="neko-btn outline neko-color-light-blue">Light Blue</button>
<button class="neko-btn outline neko-color-cyan">Cyan</button>
<button class="neko-btn outline neko-color-teal">Teal</button>
<button class="neko-btn outline neko-color-green">Green</button>
<button class="neko-btn outline neko-color-light-green">Light Green</button>
<button class="neko-btn outline neko-color-lime">Lime</button>
</div>
<div class="neko-col-12">
<h3>Merge (Immersion)</h3>
<div class="neko-row button-row">
<div class="neko-col-12">
<button class="neko-btn merge">Black</button>
<button class="neko-btn merge neko-color-blue">Blue</button>
<button class="neko-btn merge neko-color-light-blue">Light Blue</button>
<button class="neko-btn merge neko-color-cyan">Cyan</button>
<button class="neko-btn merge neko-color-teal">Teal</button>
<button class="neko-btn merge neko-color-green">Green</button>
<button class="neko-btn merge neko-color-light-green">Light Green</button>
<button class="neko-btn merge neko-color-lime">Lime</button>
</div>
</div>
</div>
<div class="neko-col-12">
<h3>Shadow</h3>
<div class="neko-row button-row">
<div class="neko-col-12">
<button class="neko-btn shadow">Black</button>
<button class="neko-btn shadow neko-color-blue">Blue</button>
<button class="neko-btn shadow neko-color-light-blue">Light Blue</button>
<button class="neko-btn shadow neko-color-cyan">Cyan</button>
<button class="neko-btn shadow neko-color-teal">Teal</button>
<button class="neko-btn shadow neko-color-green">Green</button>
<button class="neko-btn shadow neko-color-light-green">Light Green</button>
<button class="neko-btn shadow neko-color-lime">Lime</button>
</div>
<div class="neko-col-12">
<button class="neko-btn outline shadow">Black</button>
<button class="neko-btn outline shadow neko-color-blue">Blue</button>
<button class="neko-btn outline shadow neko-color-light-blue">Light Blue</button>
<button class="neko-btn outline shadow neko-color-cyan">Cyan</button>
<button class="neko-btn outline shadow neko-color-teal">Teal</button>
<button class="neko-btn outline shadow neko-color-green">Green</button>
<button class="neko-btn outline shadow neko-color-light-green">Light Green</button>
<button class="neko-btn outline shadow neko-color-lime">Lime</button>
</div>
<div class="neko-col-12">
<button class="neko-btn merge shadow">Black</button>
<button class="neko-btn merge shadow neko-color-blue">Blue</button>
<button class="neko-btn merge shadow neko-color-light-blue">Light Blue</button>
<button class="neko-btn merge shadow neko-color-cyan">Cyan</button>
<button class="neko-btn merge shadow neko-color-teal">Teal</button>
<button class="neko-btn merge shadow neko-color-green">Green</button>
<button class="neko-btn merge shadow neko-color-light-green">Light Green</button>
<button class="neko-btn merge shadow neko-color-lime">Lime</button>
</div>
</div>
</div>
</div>
<h2>box-sizing</h2>
<p>neko.css 将页面中所有元素的 <code>box-sizing</code> 置为 <code>border-box</code>， 这意味着元素的 <code>width</code> 和 <code>height</code> 属性将包括 <code>padding</code> 和 <code>border</code>， 详情
<a target="_blank" href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-sizing">MDN</a></p>
<h2>布局容器</h2>
<p>使用布局容器来包含页面主体内容。</p>
<p><code>.neko-container</code> 类占据100%的宽度，最大宽度980px。</p>
<p><code>.neko-container-fluid</code> 类占据100%的宽度，没有最大宽度。</p>
<h2>网格系统</h2>
<p><code>.neko-row</code> 类为网格系统的容器。自带一个 <code>-8px</code> 的 <code>margin (gutters)</code> 来抵消布局容器的边距。使用 <code>.neko-no-gutters</code> 类可以删除 <code>gutters</code></p>
<p><code>.neko-row</code> 类的子元素只能是 <code>col</code>，内容应该被放在 <code>col</code> 里，<code>col</code> 只能是 <code>.neko-row</code> 的子元素</p>
<p>neko 的网格系统使用 <code>Flexbox</code> 实现，要注意局限性和 <a target="_blank" href="https://github.com/philipwalton/flexbugs">Flexbox bugs</a>。</p>
<p>每个 <code>col</code> 都有水平的 <code>padding</code>，你可以在 <code>row</code> 上添加 <code>.neko-no-gutters</code> 类来删除它</p>
<h2>neko-col-*</h2>
<p><code>.neko-col-*</code> 类可以创建一个 <code>col</code>。<code>.neko-col-*</code> 其中的 * 代表该元素占据多少列，一行最多12列，超出的元素会换到下一行。</p>
<div class="neko-row grid-example-row neko-m-b-1">
<div class="neko-col-3">.neko-col-3</div>
</div>
<div class="neko-row grid-example-row neko-m-b-1">
<div class="neko-col-6">.neko-col-6</div>
</div>
<div class="neko-row grid-example-row neko-m-b-1">
<div class="neko-col-12">.neko-col-12</div>
</div>
<h2>响应式网格</h2>
<ul>
<li>.neko-col-[1-12] 所有屏幕设备上都会生效，如手机、电脑等。> 0</li>
<li>.neko-col-sm-[1-12] 在超小屏幕及以上的设备上生效，如横着的手机。> 576px</li>
<li>.neko-col-md-[1-12] 在小屏幕及以上的设备上生效，如平板电脑。> 768px</li>
<li>.neko-col-lg-[1-12] 在中等屏幕及以上的设备上生效，如笔记本电脑。> 992px</li>
<li>.neko-col-xl-[1-12] 在更大屏幕设备上生效，如台式电脑。> 1200px</li>
</ul>
<div class="neko-row grid-example-row">
<div class="neko-col-md-8 neko-col-5 neko-col-lg-3">.neko-col-md-8<br>.neko-col-5<br>.neko-col-lg-3</div>
<div class="neko-col-md-4 neko-col-7 neko-col-lg-9">.neko-col-md-4<br>.neko-col-7<br>.neko-col-lg-9</div>
</div>
<h2>消除边距 .neko-no-gutters</h2>
<p>消除 <code>neko-row</code> 的负边距和 <code>neko-col</code> 的 <code>padding</code></p>
<div class="neko-row grid-example-row neko-no-gutters">
<div class="neko-col-md-8 neko-col-5 neko-col-lg-3">.neko-col-md-8<br>.neko-col-5<br>.neko-col-lg-3</div>
<div class="neko-col-md-4 neko-col-7 neko-col-lg-9">.neko-col-md-4<br>.neko-col-7<br>.neko-col-lg-9</div>
</div>
<h2>网格偏移</h2>
<p><code>neko-offset-*-*</code> 将列向右边偏移，支持响应式。</p>
<div class="neko-row grid-example-row">
<div class="neko-offset-md-6 neko-col-6">.neko-offset-md-6<br>.neko-col-6</div>
</div>
<h2>自动列宽</h2>
<p><code>neko-col-md-auto</code> 自动列宽，随内容变化。</p>
<div class="neko-row grid-example-row">
<div class="neko-col-lg-auto">.neko-col-lg-auto</div>
</div>
<div class="neko-row grid-example-row">
<div class="neko-col-auto">.neko-col-auto</div>
</div>
<h2>网格嵌套</h2>
<div class="neko-row grid-example-row">
<div class="neko-col-9">
.neko-col-9
<div class="neko-row grid-example-row">
<div class="neko-col-6">.neko-col-6</div>
<div class="neko-col-6">.neko-col-6</div>
</div>
<br>
</div>
</div>
<h2>隐藏元素 neko-hidden</h2>
<pre>.neko-hidden {
display: none;
}</pre>
<h2>响应式隐藏 neko-hidden-*-[up/down]</h2>
<ul>
<li>.neko-hidden-*-up：在指定宽度及以上的设备上隐藏。</li>
<li>.neko-hidden-*-down：在指定宽度及以下的设备上隐藏。</li>
</ul>
<div class="neko-row grid-example-row">
<div class="neko-col-auto neko-hidden-md-up">neko-hidden-md-up</div>
</div>
<div class="neko-row grid-example-row">
<div class="neko-col-auto neko-hidden-md-down">neko-hidden-md-down</div>
</div>
<h2>水平居中</h2>
<button class="neko-helper-center neko-btn">.neko-btn .neko-helper-center</button>
<h2>边距工具</h2>
<p><code>.neko-[m/p]-{$direction}-{$level}</code></p>
<ul>
<li>m: margin</li>
<li>p: padding</li>
<li>$direction: l(eft), r(ight), t(op), b(ottom), h(orizontal), v(ertical)</li>
<li>$level: 1-5 之间的等级。每个等级之间相差 8px</li>
</ul>
<button class="neko-m-l-4 neko-btn neko-m-b-1">.neko-btn .neko-m-l-4 .neko-m-b-1</button><br>
<button class="neko-p-h-2 neko-btn neko-m-b-1">.neko-btn .neko-p-h-2 .neko-m-b-1</button>
</div>
</body>
</html>