1. 基础模版
  2. 使用Mikit开发

作为一个轻量级、易用的、完整的、基于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制作网站如此容易。为了加快开发速度提高开发效率,只需从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;
}