holakit
Version:
Yet another design-driven UI component set.
257 lines (255 loc) • 13.9 kB
HTML
<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>