作为一个轻量级、易用的、完整的、基于jQuery的Web UI框架,使用Mikit可以帮助您快速创建网页模板,把更多的事件留给您喜爱做的事。 开始使用Mikit是非常简单和快速的,你可以在一分钟之内学会使用。 以下是设置Mikit的方法,以及"开箱即用"的基本定制。
使用Mikit设置你的Web应用框架,只需将此代码添加到您的Web页面中,即可使基本模板立即生效。
<!DOCTYPE html>
<html>
<head>
<title>Basic Template</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Mikit CSS -->
<link rel="stylesheet" href="assets/css/kube.css">
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery + Mikit.js -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="assets/js/mikit.js"></script>
</body>
</html>
Mikit被设计来帮助你的网站开发,这就是为什么使用Mikit制作网站如此容易。为了加快开发速度提高开发效率,只需从Mikit源文件(包括variables,mixins 和简化日常任务所需的工具)里引入mikit.scss文件即可。例如:在项目master.scss样式文件中引入mikit.scss 将会编译成master.css:
// master.scss @import "dist/scss/mikit.scss";
现在Mikit所有的变量和集合在master.scss都是现成的,你可以在需要的时候使用它们。例如:
// master.scss
@import "dist/scss/mikit.scss";
#sidebar {
@include flex-item-width(200px);
}
另外,你可以从variables.scss设置
// master.scss
@import "dist/scss/mikit.scss";
#my-layout {
padding: $base-line;
}