mikit-framework
Version:
A web framework for professional developers and designers alike.
117 lines (97 loc) • 4.05 kB
HTML
<html>
<head>
<title>Mikit</title>
<!-- Mikit core CSS -->
<link rel="stylesheet" type="text/css" href="../dist/css/mikit.min.css"/>
<script type="text/javascript" src="../dist/js/jquery.min.js"></script>
<script type="text/javascript" src="../dist/js/mikit.min.js"></script>
<style>
.component-index-box {
counter-reset: count;
max-width: 400px;
margin: 30px auto 60px auto;
padding: 32px;
background: #fbfbfb;
border: 1px solid rgba(0, 0, 0, 0.08);
}
.component-index-box li {
line-height: 40px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
margin-right: 24px;
counter-increment: count;
}
.component-index-box li a {
display: block;
text-decoration: none;
position: relative;
padding-left: 10px;
}
.component-show {
width: 1180px;
margin: 0 auto;
}
.example {
border: 1px solid rgba(0, 0, 0, 0.07);
padding: 32px;
margin-bottom: 16px;
}
</style>
</head>
<body>
<div class="component-index-box">
<ol>
<li><a href="#h-basic-template">基础模版</a></li>
<li><a href="#h-development">使用Mikit开发</a></li>
</ol>
</div>
<div class="component-show">
<p>作为一个轻量级、易用的、完整的、基于jQuery的Web UI框架，使用Mikit可以帮助您快速创建网页模板，把更多的事件留给您喜爱做的事。 开始使用Mikit是非常简单和快速的，你可以在一分钟之内学会使用。 以下是设置Mikit的方法，以及"开箱即用"的基本定制。</p>
<h3 id="h-basic-template" class="section-head">基础模版</h3>
<p>使用Mikit设置你的Web应用框架，只需将此代码添加到您的Web页面中，即可使基本模板立即生效。 </p>
<pre class="prettyprint lang-js"><!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></pre>
<h3>浏览器支持</h3>
<ul>
<li>最新 Chrome</li>
<li>最新 Firefox</li>
<li>最新 Safari</li>
<li>最新 Opera</li>
<li>Microsoft Edge</li>
<li>Internet Explorer 11</li>
</ul>
<h3 id="h-development" class="section-head">使用Mikit开发</h3>
<p>Mikit被设计来帮助你的网站开发，这就是为什么使用Mikit制作网站如此容易。为了加快开发速度提高开发效率，只需从Mikit源文件(包括variables,mixins 和简化日常任务所需的工具)里引入mikit.scss文件即可。例如：在项目master.scss样式文件中引入mikit.scss 将会编译成master.css:</p>
<pre class="prettyprint lang-js">// master.scss
@import "dist/scss/mikit.scss";</pre>
<p>
现在Mikit所有的变量和集合在master.scss都是现成的，你可以在需要的时候使用它们。例如：
</p>
<pre class="prettyprint lang-js">// master.scss
@import "dist/scss/mikit.scss";
#sidebar {
@include flex-item-width(200px);
}</pre>
<p>另外，你可以从variables.scss设置</p>
<pre class="prettyprint lang-js">// master.scss
@import "dist/scss/mikit.scss";
#my-layout {
padding: $base-line;
}</pre>
</div>
</body>
</html>