135 lines
9.8 KiB
HTML
Executable File
135 lines
9.8 KiB
HTML
Executable File
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>开始 - Kico Style</title>
|
||
<meta name="theme-color" content="#3498db">
|
||
<link rel="icon" href="static/icon-32.png" sizes="32x32"/>
|
||
<link rel="icon" href="static/icon-192.png" sizes="192x192"/>
|
||
<link href="static/kico.css" rel="stylesheet" type="text/css"/>
|
||
<link href="static/doc.css?v=22.12.25" rel="stylesheet" type="text/css"/>
|
||
<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>
|
||
</head>
|
||
<body>
|
||
<aside class="sidebar">
|
||
<div class="header">
|
||
<img src="static/kico.svg" title="Kico Style" />
|
||
<span class="title">Style</span>
|
||
</div>
|
||
<nav class="menu">
|
||
<a href="index.html" content="开始">
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M893.7 505.9H129.3c-13 0-24.8-7.9-29.8-19.9-5-12-2.2-25.9 7-35.2l307-307c26.1-26.1 60.9-40.5 98-40.5s71.9 14.4 98 40.5l307 307c9.2 9.2 12 23.1 7 35.2-5 12.1-16.7 19.9-29.8 19.9zM673.2 919.9h-31.5c-17.8 0-32.3-14.4-32.3-32.3v-77.4c0-23.1-18.8-42.1-41.9-42.4-22.3 0.3-41.1 19.3-41.1 42.4v77.4c0 17.8-14.4 32.3-32.3 32.3H349.8c-70.9 0-128.7-63.7-128.7-141.9V581.9c0-17.8 14.4-32.3 32.3-32.3h516.2c17.8 0 32.3 14.4 32.3 32.3V778c-0.1 78.3-57.8 141.9-128.7 141.9z"></path>
|
||
</svg>
|
||
</a>
|
||
<a href="wrap.html" content="样式">
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M877.3 154.7C836.9 114.3 783 92 725.5 92c-57.5 0-111.4 22.3-151.8 62.7l-48.1 48.1-251.4 251.3 303.6 303.6 299.4-299.4c40.4-40.4 62.7-94.3 62.7-151.8 0-57.4-22.2-111.4-62.6-151.8zM221.5 506.9L177 551.3c-16.8 16.8-27.9 37.9-32.4 61.2l-53.9 285c-2.3 12.1 1.6 24.6 10.3 33.3 7.1 7.1 16.6 10.9 26.4 10.9 2.3 0 4.6-0.2 6.9-0.6l285-53.9c23.3-4.4 44.5-15.6 61.2-32.4l44.4-44.4-303.4-303.5z"></path>
|
||
</svg>
|
||
</a>
|
||
<a href="components.html" content="组件">
|
||
<svg viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg">
|
||
<path d="M512 510.4m-105.9 0a105.9 105.9 0 1 0 211.8 0 105.9 105.9 0 1 0-211.8 0ZM876 553.6l-8.2-4.8c-20-11.6-22.2-30.7-22.2-38.4 0-7.7 2.2-26.9 22.2-38.4l8.2-4.7c25.3-14.6 43.4-38.1 50.9-66.3 7.6-28.2 3.7-57.6-10.9-82.9l-35.3-61.2c-14.6-25.3-38.1-43.4-66.3-50.9-28.2-7.5-57.6-3.7-82.9 10.9l-8.2 4.7c-20 11.6-37.7 3.9-44.4 0s-22.2-15.3-22.2-38.4v-9.5c0-60.2-49-109.3-109.3-109.3h-70.6c-60.2 0-109.3 49-109.3 109.3v9.5c0 19.6-11.3 30.8-18 35.7-11.6 8.4-30.5 13.6-48.8 2.9l-8.8-5.2c-2.6-1.5-4.8-2.8-7.6-4.1-0.1 0-0.2-0.1-0.2-0.1-51.6-24-112.1-4.9-140.6 44.5L108 318c-14.6 25.3-18.5 54.7-10.9 82.9 7.6 28.2 25.6 51.7 50.9 66.3l8.2 4.8c20 11.6 22.2 30.7 22.2 38.4 0 7.7-2.2 26.9-22.2 38.4l-8.2 4.7c-25.3 14.6-43.4 38.1-50.9 66.3-7.6 28.2-3.7 57.6 10.9 82.9l35.3 61.2c14.6 25.3 38.1 43.4 66.3 50.9 28.2 7.5 57.6 3.7 82.9-10.9l8.2-4.7c20-11.6 37.7-3.9 44.4 0 6.7 3.9 22.2 15.3 22.2 38.4v9.5c0 60.2 49 109.3 109.3 109.3h70.6c60.2 0 109.3-49 109.3-109.3v-9.5c0-23.1 15.5-34.6 22.2-38.4 6.7-3.9 24.3-11.6 44.4 0l8.2 4.8c25.3 14.6 54.7 18.5 82.9 10.9 28.2-7.6 51.7-25.6 66.3-50.9l35.3-61.2c14.6-25.3 18.5-54.7 10.9-82.9-7.4-28.1-25.5-51.7-50.7-66.3zM512 687.8c-97.8 0-177.3-79.5-177.3-177.3S414.2 333.1 512 333.1s177.3 79.5 177.3 177.3S609.8 687.8 512 687.8z"></path>
|
||
</svg>
|
||
</a>
|
||
</nav>
|
||
</aside>
|
||
<main class="content">
|
||
<div class="wrap min">
|
||
<div class="ks-title">
|
||
<h1>开始</h1>
|
||
<h2>如何使用 Kico Style</h2>
|
||
</div>
|
||
<div class="ks-content">
|
||
<h1>介绍</h1>
|
||
<p>Kico Style 是一个简洁轻盈的前端框架，由 <a href="https://paul.ren">奇趣保罗</a> 开发，是 Kico 前端作品系列的一员。</p>
|
||
<ul>
|
||
<li>最新版本：1.0.2</li>
|
||
<li>上次更新：2023.4.15</li>
|
||
<li>上次修订：2021.12.24</li>
|
||
</ul>
|
||
<section>
|
||
<h2 id="thanks">致敬</h2>
|
||
<p>奇趣框架的开发，不仅源自我的开发经验，更少不了来自开源社区广大项目的馈赠。在奇趣框架的设计过程中，我多少参考或引用了这些项目的内容（仅按照项目名称长度排序，不分前后）：</p>
|
||
<ul>
|
||
<li>Tabler</li>
|
||
<li>JQuery</li>
|
||
<li>Bootstrap</li>
|
||
<li>Normalize.css</li>
|
||
</ul>
|
||
<p>Bootstrap 虽然功能齐全，但是有很多类名，我就几乎没有使用过。能用一行 CSS 样式附加在指定元素上面，为什么还得额外记类名呢？如果你要写一个拥有自己设计风格的块，肯定是用自己的类名来定义，才能更快速的实现吧！</p>
|
||
</section>
|
||
<section>
|
||
<h2 id="notice">注意</h2>
|
||
<p>Kico Style 是一个从简优化的框架。和其他前端框架（例如 <code>Bootstrap</code>、<code>Foundation</code>）不同的是，它不可以快速搭建用户界面。因此，它没有提供大量丰富的组件和样式，不必担心类名命名空间的问题，覆盖样式也更容易。如果你不想自主编写样式，而是更偏向快速搭建网站结构，请尝试 <a href="https://getbootstrap.com" target="_blank">Bootstrap</a> 吧。</p>
|
||
<p>如果想要在 React/Vue 的开发环境下搭建一个用于生产力的应用，需要大量交互组件，不如在使用 Kico Style 的基础上，再使用 <a href="https://ant.design" target="_blank">Ant Design</a> 组件库吧，作者实测基本上是没有冲突问题的。</p>
|
||
<p>Kico Style 为支持 <code>HTML5</code>、<code>CSS3</code> 的浏览器所打造，谷歌（Webkit）、火狐（Gecko）等现代浏览器效果最佳。经过日月沧桑，<code>IE</code> 已经逐渐退出市场，取而代之的是基于 <code>Webkit</code> 的国产浏览器，所以开发者完全没有必要为了一款上古产品而消耗时间优化改良自己的产品。</p>
|
||
</section>
|
||
<section>
|
||
<h2 id="why">为何使用？</h2>
|
||
<p>它拥有类似 Bootstrap 的栅格系统，并且用法相似。并为移动设备的展示提供了更好的解决方案。</p>
|
||
<p>它拥有高度的 DIY 空间，你不需要像 Bootstrap 一样必须编写其固定的结构并思考如何覆盖其内置的样式。</p>
|
||
<p>它重写了很多基础风格，<code>article</code> 文章标签内的元素无论是字体大小还是间距都进行了优化，在版式上几乎无需二次重写。</p>
|
||
<p>它结合了作者的实战开发经验，内置了一些常用的 JavaScript 组件，例如 “AJAX”、“图片灯箱”、“消息弹框”、“图片懒加载”...</p>
|
||
</section>
|
||
<section>
|
||
<h2 id="download">下载与使用</h2>
|
||
<p>
|
||
<a class="btn blue customed" href="https://github.com/Dreamer-Paul/Kico-Style" target="_blank">在 GitHub 上获取</a>
|
||
</p>
|
||
<p>1. 引用 CSS 样式</p>
|
||
<pre class="language-html"><code><!-- 直接引用项目文件夹 -->
|
||
<link href="kico.css" rel="stylesheet" type="text/css"/>
|
||
|
||
<!-- JSDelivr 免费提供的 CDN 链接 -->
|
||
<link href="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Kico-Style/kico.min.css" rel="stylesheet" type="text/css"/>
|
||
|
||
<!-- 最新开发版（和文档始终同步）-->
|
||
<link href="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Kico-Style@master/kico.min.css" rel="stylesheet" type="text/css"/>
|
||
</code></pre>
|
||
<p>2. 在 <code>head</code> 标签内插入可视区域代码，开启响应式功能</p>
|
||
<pre class="language-html"><code><meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/></code></pre>
|
||
<p>3. 如需使用本框架的原生 JS 组件，请在 <code>body</code> 标签结尾之前引用 JavaScript。</p>
|
||
<pre class="language-html"><code><!-- 直接引用项目文件夹 -->
|
||
<script src="kico.js"></script>
|
||
|
||
<!-- JSDelivr 免费提供的 CDN 链接 -->
|
||
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Kico-Style/kico.min.js"></script>
|
||
|
||
<!-- 最新开发版（和文档始终同步）-->
|
||
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Kico-Style@master/kico.min.js"></script></code></pre>
|
||
<blockquote>PS：CDN 上的版本跟随的是最新的 Release，开发版本也有一定时长的缓存时间，开发版本之间产生的差异可能会多一些，所以暂时建议进行本地引入</blockquote>
|
||
</section>
|
||
<section>
|
||
<h2 id="more">另请参阅</h2>
|
||
<p>还有音乐播放器 Kico Player、时钟小工具 Kico Tools 等有趣的前端作品，欢迎关注！</p>
|
||
<div class="more-product">
|
||
<h4>奇趣播放器（Kico Player）</h4>
|
||
<p>功能强大的前端音乐播放器，同样由保罗开发。</p>
|
||
<p>
|
||
<a class="btn blue customed" href="https://github.com/Dreamer-Paul/Kico-Player" target="_blank">项目地址</a>
|
||
<a class="btn blue customed" href="https://works.paugram.com/player" target="_blank">文档地址</a>
|
||
</p>
|
||
</div>
|
||
<div class="more-product">
|
||
<h4>奇趣小工具 (Kico Tools)</h4>
|
||
<p>一个集合了时钟、秒表、倒计时和随机数的小工具，依旧是由保罗开发。它采用 SvelteJS 框架进行开发。</p>
|
||
<p>
|
||
<a class="btn blue customed" href="https://github.com/Dreamer-Paul/Kico-Tools">项目地址</a>
|
||
</p>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<footer>
|
||
<a class="to-top" href="#"></a>
|
||
<p>© 2023 By <a href="https://paugram.com" target="_blank">Dreamer-Paul</a>.</p>
|
||
</footer>
|
||
|
||
<script src="static/kico.js"></script>
|
||
<script src="static/doc.js?v=22.12.25"></script>
|
||
<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Single@2.1/static/prism.js"></script>
|
||
</body>
|
||
</html>
|