-
Notifications
You must be signed in to change notification settings - Fork 5
/
index.html
256 lines (255 loc) · 13.6 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
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
<html class="hola-html-reset hola-var">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>HolaKit</title>
<link rel="stylesheet" href="dist/holakit.css">
<link rel="stylesheet" href="assets/demo/holakitdemo.css">
</head>
<body class="hola-body-typography hola-grey-bg">
<header class="hola-navbar hola-navbar-transparent hola-navbar-darkbg">
<div class="hola-container">
<nav class="hola-navbar-main">
<a href="#" class="hola-navbar-brand">HolaKit</a>
</nav>
<input type="checkbox" class="hola-navbar-toggle" id="navbar-toggle">
<label for="navbar-toggle" class="hola-navbar-toggle-label"></label>
<nav class="hola-navbar-sub">
<a href="https://ihola.one">¡Hola! 官网</a>
<a href="https://design.ihola.one">¡Hola! Design</a>
</nav>
</div>
</header>
<div class="hola-hero hola-hero-dark-bg hola-hero-height-extended">
<div class="hola-container hola-hero-content">
<h1>HolaKit</h1>
<p>又一个设计驱动的 UI 组件库。</p>
<a href="styleguide/" class="hola-button hola-button-ghost">查看文档</a>
</div>
</div>
<div class="hola-container">
<h3 class="hola-card-stack-title hola-card-stack-title-light">UI 组件</h3>
<div class="hola-columns hola-card-stack">
<div class="hola-columns-item">
<div class="hola-card">
<h2 class="hola-card-title">按钮 Buttons</h2>
<p>
<input type="submit" class="hola-button hola-button-normal" value="表单提交">
<button class="hola-button hola-button-normal"><button> 组件</button>
<a href="#" class="hola-button hola-button-normal">链接按钮</a>
</p>
<p>
<a href="#" class="hola-button hola-button-primary">Primary Button</a>
<a href="#" class="hola-button hola-button-ghost">Ghost Button</a>
</p>
</div>
</div>
<div class="hola-columns-item">
<div class="hola-card">
<h2 class="hola-card-title">纵向菜单 V-Menus</h2>
<ul class="hola-vmenu">
<li class="hola-vmenu-item"><a href="#">苟利国家生死以，岂因祸福避趋之。敢同恶鬼争高下，不向霸王让寸分。</a></li>
<li class="hola-vmenu-item"><a href="#">毛泽东思想</a></li>
<li class="hola-vmenu-item"><a href="#">邓小平理论<span class="hola-badge">微小的贡献</span></a></li>
<li class="hola-vmenu-item"><a class="hola-vmenu-item-active" href="#">三个代表重要思想<span class="hola-badge">重要</span><span class="hola-badge hola-badge-radii">64</span></a></li>
<li class="hola-vmenu-item"><a href="#">科学发展观</a></li>
</ul>
</div>
</div>
<div class="hola-columns-item">
<div class="hola-card hola-card-with-image">
<img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
<h2 class="hola-card-title">头图卡片 Card with image</h2>
<p>Nulla neque ducimus, natus a voluptatibus quae minima cumque tenetur iusto modi. Harum repellendus fugit laboriosam quia beatae tempore voluptates?</p>
</div>
</div>
<div class="hola-columns-item">
<div class="hola-card hkdemo-avatar-spacing">
<h2 class="hola-card-title">头像 Avatar</h2>
<img src="https://laosb.github.io/assets/img/avatar.png" alt="Round" class="hola-image hola-image-round hola-avatar hola-avatar-medium">
<img src="https://laosb.github.io/assets/img/avatar.png" alt="Radii" class="hola-image hola-image-radii hola-avatar hola-avatar-medium">
<img src="https://laosb.github.io/assets/img/avatar.png" alt="Round" class="hola-image hola-image-round hola-avatar hola-avatar-medium hola-avatar-highlighted">
<img src="https://laosb.github.io/assets/img/avatar.png" alt="Radii" class="hola-image hola-image-radii hola-avatar hola-avatar-medium hola-avatar-highlighted">
</div>
</div>
<div class="hola-columns-item">
<div class="hola-card">
<h2 class="hola-card-title">表单 Form</h2>
<form action="">
<p>
<input class="hola-form-ctrl hola-input-singleline" type="text" placeholder="输入一些文字">
</p>
<p>
<textarea class="hola-form-ctrl hola-input-multiline" placeholder="输入一大坨文字"></textarea>
</p>
<p>
<input type="submit" class="hola-button hola-button-primary" value="提交">
</p>
</form>
</div>
</div>
<div class="hola-columns-item">
<div class="hola-card">
<h2 class="hola-card-title">标签 Badge<span class="hola-badge">0.12.0</span></h2>
<p>这是一个长长长长的长标题<span class="hola-badge">并没有分类</span><span class="hola-badge hola-badge-radii">233</span></p>
</div>
</div>
<div class="hola-columns-item">
<div class="hola-card hola-card-full-image">
<img src="https://source.unsplash.com/featured/?sky" alt="Photo from Unsplash" class="hola-image">
</div>
</div>
<div class="hola-columns-item">
<div class="hola-card hola-card-list">
<div class="hola-card-list-item">
<h3 class="hola-card-list-item-title-title">Card List Item 1</h3>
<p>Posted at Aug 17th.</p>
</div>
<div class="hola-card-list-item">
<h3 class="hola-card-list-item-title-title">Card List Item 2</h3>
<p>Posted at Dec 25th.</p>
</div>
<div class="hola-card-list-item">
<h3 class="hola-card-list-item-title-title">Card List Item 1</h3>
<p>Posted at Jun 4th.</p>
</div>
</div>
</div>
<div class="hola-columns-item">
<div class="hola-card">
<h2 class="hola-card-title">信息表 Info Sheet<span class="hola-badge">0.22.0</span></h2>
<div class="hola-infosheet">
<div class="hola-infosheet-row">
<span class="hola-infosheet-key">用户名</span>
<p class="hola-infosheet-value">laosb</p>
</div>
<div class="hola-infosheet-row">
<span class="hola-infosheet-key">手机号码</span>
<p class="hola-infosheet-value">+1 (555) 555 5555</p>
</div>
<div class="hola-infosheet-row">
<span class="hola-infosheet-key">备注</span>
<p class="hola-infosheet-value">并不住在美国，但是用着一个美国手机号。他是 Holakit 的最初作者及维护者，常常诈尸。</p>
</div>
</div>
</div>
</div>
<div class="hola-columns-item">
<div class="hola-card">
<h2 class="hola-card-title">Aut, atque porro?</h2>
<p>Corrupti odit adipisci molestiae expedita quasi necessitatibus. Ipsam aliquam cumque temporibus incidunt quidem possimus, voluptas, alias nam molestias labore pariatur!</p>
</div>
</div>
</div>
</div>
<h3 class="hola-container hola-card-stack-title">横滚布局</h3>
<div class="hola-layout-container hola-layout-scrollable-hori">
<div class="hola-container">
<div class="hola-card hola-card-with-image hola-card-tiny">
<img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
<h4 class="hola-card-title">小卡片</h4>
</div>
<div class="hola-card hola-card-with-image hola-card-tiny">
<img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
<h4 class="hola-card-title">小卡片</h4>
</div>
<div class="hola-card hola-card-with-image hola-card-tiny">
<img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
<h4 class="hola-card-title">小卡片</h4>
</div>
<div class="hola-card hola-card-with-image hola-card-tiny">
<img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
<h4 class="hola-card-title">小卡片</h4>
</div>
<div class="hola-card hola-card-with-image hola-card-tiny">
<img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
<h4 class="hola-card-title">小卡片</h4>
</div>
<div class="hola-card hola-card-with-image hola-card-tiny">
<img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
<h4 class="hola-card-title">小卡片</h4>
</div>
<div class="hola-card hola-card-with-image hola-card-tiny">
<img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
<h4 class="hola-card-title">小卡片</h4>
</div>
<div class="hola-card hola-card-with-image hola-card-tiny">
<img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
<h4 class="hola-card-title">小卡片</h4>
</div>
<div class="hola-card hola-card-with-image hola-card-tiny">
<img src="https://source.unsplash.com/featured/?head" alt="Photo from Unsplash" class="hola-image">
<h4 class="hola-card-title">小卡片</h4>
</div>
</div>
</div>
<h3 class="hola-container hola-card-stack-title">大小栏布局</h3>
<div class="hola-container hola-layout-container hola-layout-container-sidebar-right">
<div class="hola-layout-main hola-card-stack">
<div class="hola-card">
<h2 class="hola-card-title">表格 Table</h2>
<div class="hola-table-container">
<table class="hola-table hola-table-fullwidth">
<thead>
<tr>
<th>Lorem.</th>
<th>Reiciendis.</th>
<th>Ducimus?</th>
</tr>
</thead>
<tbody>
<tr>
<td>Lorem ipsum dolor sit, amet consectetur adipisicing elit.</td>
<td>Ab voluptates dolorum adipisci ut impedit aperiam velit!</td>
<td>Eum iusto ad dolores sit obcaecati ipsa sint?</td>
</tr>
<tr>
<td>23333</td>
<td>23333</td>
<td>23333</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="hola-card">
<h2 class="hola-card-title">文字设计 Typography</h2>
<div class="hola-content">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Commodi libero debitis consequatur error quae id ipsa, earum velit vel. Hic?</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Minima sed assumenda cupiditate, laudantium facere magni?</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tempore, nam. Excepturi, eaque necessitatibus, quasi, cupiditate eveniet explicabo ducimus dolorum distinctio voluptas non et. Libero ratione quibusdam, beatae rerum aliquid officia.</p>
<img src="https://source.unsplash.com/featured/?step" alt="Pic">
<h3>兰亭集序</h3>
<p>永和九年，岁在癸丑，暮春之初，会于会稽山阴之兰亭，脩稧（禊）事也。群贤毕至，少长咸集。此地有崇山峻领（岭），茂林脩竹；又有清流激湍，映带左右，引以为流觞曲水，列坐其次。虽无丝竹管弦之盛，一觞一咏，亦足以畅叙幽情。</p>
<p>是日也，天朗气清，惠风和畅。仰观宇宙之大，俯察品类之盛。所以游目骋怀，足以极视听之娱，信可乐也。</p>
<p>夫人之相与，俯仰一世，或取诸怀抱，悟言一室之内；或因寄所托，放浪形骸之外。虽趣（取/趋）舍万殊，静躁不同，当其欣于所遇，暂得于己，快然自足，不知老之将至；及其所之既倦，情随事迁，感慨系之矣。向之所欣，俯仰之间，已为陈迹，犹不能不以之兴怀；况脩短随化，终期于尽。古人云：“死生亦大矣。”岂不痛哉！</p>
<p>每揽（览）昔人兴感之由，若合一契，未尝不临文嗟悼，不能喻之于怀。固知一死生为虚诞，齐彭殇为妄作。后之视今，亦由（犹）今之视昔，悲夫！故列叙时人，录其所述，虽世殊事异，所以兴怀，其致一也。后之揽（览）者，亦将有感于斯文。</p>
<h3>代码测试</h3>
<pre><code>.hola-image, .hola-content img {
display: block;
width: 100%;
margin: var(--hola-element-gap) 0;
}
.hola-image-round {
border-radius: 50%;
}
.hola-image-radii {
border-radius: 5px;
}
</code></pre>
</div>
</div>
</div>
<div class="hola-layout-sidebar">
<div class="hola-card">
Lorem ipsum dolor sit.
</div>
</div>
</div>
<footer class="hola-footer">
<div class="hola-container">
<p>Copyright 2018 Team ¡Hola!.</p>
<p>This project is hosted on <a href="https://github.com/teamhola/holakit">GitHub</a>.</p>
</div>
</footer>
</body>
</html>