开始

如何使用 Kico Style

介绍

Kico Style 是一个简洁轻盈的前端框架,由 奇趣保罗 开发,是 Kico 前端作品系列的一员。

  • 最新版本:1.0.2
  • 上次更新:2020.1.20
  • 上次修订:2020.12.31

致敬

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

  • Tabler
  • JQuery
  • Bootstrap
  • Normalize.css

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

注意

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

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

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

为何使用?

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

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

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

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

兼容性

  • Edge 14+
  • Firefox 30+
  • Chrome 40+
  • Android Browser 4.4+

下载与使用

在 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"/>

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

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

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

<script src="kico.js"></script>

或者是

<script src="https://cdn.jsdelivr.net/gh/Dreamer-Paul/Kico-Style/kico.min.js"></script>
PS:CDN 上的版本可能没有同步最新的提交,部分样式规则可能存在差异!

另请参阅

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

奇趣播放器(Kico Player)

功能强大的前端音乐播放器,同样由保罗开发。

文档地址

奇趣助理(Kico Tools)

一款清爽简洁的在线小工具,依旧是由保罗开发。它采用 ES6 标准进行开发,包括了闹钟、倒计时、秒表和随机数的功能,便于使用。

项目地址