致敬

奇趣框架的开发，不仅源自我的开发经验，更少不了来自开源社区广大项目的馈赠。在奇趣框架的设计过程中，我多少参考或引用了这些项目的内容（仅按照项目名称长度排序，不分前后）：

• Tabler
• JQuery
• Bootstrap
• Normalize.css

Bootstrap 虽然功能齐全，但是有很多类名，我就几乎没有使用过。能用一行 CSS 样式附加在指定元素上面，为什么还得额外记类名呢？如果你要写一个拥有自己设计风格的块，肯定是用自己的类名来定义，才能更快速的实现吧！

注意

Kico Style 是一个从简优化的框架。和其他前端框架（例如 Bootstrap、Foundation）不同的是，它不可以快速搭建用户界面。因此，它没有提供大量丰富的组件和样式，不必担心类名命名空间的问题，覆盖样式也更容易。如果你不想自主编写样式，而是更偏向快速搭建网站结构，请尝试 Bootstrap 吧。

如果想要在 React/Vue 的开发环境下搭建一个用于生产力的应用，需要大量交互组件，不如在使用 Kico Style 的基础上，再使用 Ant Design 组件库吧，作者实测基本上是没有冲突问题的。

Kico Style 为支持 HTML5、CSS3 的浏览器所打造，谷歌（Webkit）、火狐（Gecko）等现代浏览器效果最佳。经过日月沧桑，IE 已经逐渐退出市场，取而代之的是基于 Webkit 的国产浏览器，所以开发者完全没有必要为了一款上古产品而消耗时间优化改良自己的产品。

为何使用？

它拥有类似 Bootstrap 的栅格系统，并且用法相似。并为移动设备的展示提供了更好的解决方案。

它拥有高度的 DIY 空间，你不需要像 Bootstrap 一样必须编写其固定的结构并思考如何覆盖其内置的样式。

它重写了很多基础风格，article 文章标签内的元素无论是字体大小还是间距都进行了优化，在版式上几乎无需二次重写。

它结合了作者的实战开发经验，内置了一些常用的 JavaScript 组件，例如 “AJAX”、“图片灯箱”、“消息弹框”、“图片懒加载”...

下载与使用

在 GitHub 上获取

1. 引用 CSS 样式

<!-- 直接引用项目文件夹 -->
<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"/>

2. 在 head 标签内插入可视区域代码，开启响应式功能

<meta name="viewport" content="width=device-width, maximum-scale=1, initial-scale=1"/>

3. 如需使用本框架的原生 JS 组件，请在 body 标签结尾之前引用 JavaScript。

<!-- 直接引用项目文件夹 -->
<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>

PS：CDN 上的版本跟随的是最新的 Release，开发版本也有一定时长的缓存时间，开发版本之间产生的差异可能会多一些，所以暂时建议进行本地引入

另请参阅

还有音乐播放器 Kico Player、时钟小工具 Kico Tools 等有趣的前端作品，欢迎关注！