mikit-framework
Version:
A web framework for professional developers and designers alike.
810 lines (668 loc) • 23.6 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: 100%;
max-width: 1180px;
margin: 0 auto;
}
@media (max-width: 768px) {
.component-show {
width: 100%;
}
}
.section-head {
padding-top: 80px;
}
.example {
border: 1px solid rgba(0, 0, 0, 0.07);
padding: 20px;
margin-bottom: 16px;
}
.demo-grid .mi-row {
margin-bottom: 4px;
background: #ebf4fc;
}
.demo-grid .mi-col {
font-family: Consolas, Monaco, "Courier New", monospace;
font-size: 12px;
padding: 8px 12px;
background: #d8e9fa;
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
.demo-grid .mi-row.mi-gutters {
background: none;
}
.demo-grid .demo-col-nested {
border-left: none ;
padding: 0 ;
}
.demo-grid .mi-col {
font-family: Consolas, Monaco, "Courier New", monospace;
font-size: 12px;
padding: 8px 12px;
background: #d8e9fa;
border-left: 1px solid rgba(0, 0, 0, 0.1);
}
#demo-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
#demo-sidebar, #demo-content {
font-family: Consolas, Monaco, "Courier New", monospace;
font-size: 12px;
padding: 8px 12px;
min-height: 80px;
}
#demo-sidebar {
flex: 0 0 300px;
background: #c4def7;
}
#demo-content {
flex: auto;
background: #ebf4fc;
}
#demo-media-grid {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 2%;
-moz-column-gap: 2%;
column-gap: 2%;
}
#demo-media-grid > div {
display: inline-block;
width: 100%;
}
@media (max-width: 768px) {
#demo-media-grid {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}
#demo-media-grid > div {
font-family: Consolas, Monaco, "Courier New", monospace;
font-size: 12px;
padding: 8px 12px;
background: #eae2f2;
text-align: center;
margin-bottom: 20px;
height: 80px;
}
#demo-media-grid > div:nth-child(2n) {
height: 200px;
}
#demo-media-grid > div:nth-child(5n) {
height: 120px;
}
</style>
</head>
<body>
<!------------------------------------------------------------------>
<div class="component-index-box">
<ol>
<li>
<a href="#h-columns">单元格Columns</a>
</li>
<li>
<a href="#h-gutters">间距Gutters</a>
</li>
<li>
<a href="#h-auto-width">自动宽度Auto Width</a>
</li>
<li>
<a href="#h-bricks">堆叠Bricks</a>
</li>
<li>
<a href="#h-offset">偏移Offset</a>
</li>
<li>
<a href="#h-nested">嵌套Nested</a>
</li>
<li>
<a href="#h-equal-height">等高Equal Height</a>
</li>
<li>
<a href="#h-reordering">重置排序Reordering</a>
</li>
<li>
<a href="#h-around">围绕Around</a>
</li>
<li>
<a href="#h-between">隔离Between</a>
</li>
<li>
<a href="#h-alignment">对齐Alignment</a>
</li>
<li>
<a href="#h-push">单元格对齐Push</a>
</li>
<li>
<a href="#h-fixed-column">单元格固定Fixed Width Column</a>
</li>
<li>
<a href="#h-media-grid">媒体网格Media Grid</a>
</li>
</ol>
</div>
<div class="component-show">
<h3 id="h-columns" class="section-head">网格</h3>
<p>Mikit网格系统可以快速布局网站。</p>
<div class="example demo-grid">
<div class="mi-row">
<div class="mi-col mi-col-1">1</div>
<div class="mi-col mi-col-11">11</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-2">2</div>
<div class="mi-col mi-col-10">10</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-3">3</div>
<div class="mi-col mi-col-9">9</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-4">4</div>
<div class="mi-col mi-col-8">8</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-5">5</div>
<div class="mi-col mi-col-7">7</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-6">6</div>
<div class="mi-col mi-col-6">6</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-7">7</div>
<div class="mi-col mi-col-5">5</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-8">8</div>
<div class="mi-col mi-col-4">4</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-9">9</div>
<div class="mi-col mi-col-3">3</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-10">10</div>
<div class="mi-col mi-col-2">2</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-11">11</div>
<div class="mi-col mi-col-1">1</div>
</div>
<div class="mi-row">
<div class="mi-col mi-col-12">12</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row">
<div class="mi-col mi-col-4">...</div>
<div class="mi-col mi-col-8">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 id="h-gutters" class="section-head">网格间距 Gutters</h3>
<div class="example demo-grid">
<div class="mi-row mi-gutters">
<div class="mi-col mi-col-3">3</div>
<div class="mi-col mi-col-9">9</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row mi-gutters">
<div class="mi-col mi-col-3">...</div>
<div class="mi-col mi-col-9">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 id="h-auto-width" class="section-head">自动宽度Auto</h3>
<div class="example demo-grid">
<div class="mi-row mi-auto">
<div class="mi-col">auto</div>
<div class="mi-col">auto</div>
<div class="mi-col">auto</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row mi-auto">
<div class="mi-col">...</div>
<div class="mi-col">...</div>
<div class="mi-col">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h5>自动宽度Auto + 间距Gutters</h5>
<div class="example demo-grid">
<div class="mi-row mi-gutters mi-auto">
<div class="mi-col">auto</div>
<div class="mi-col">auto</div>
<div class="mi-col">auto</div>
<div class="mi-col">auto</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row mi-gutters mi-auto">
<div class="mi-col">...</div>
<div class="mi-col">...</div>
<div class="mi-col">...</div>
<div class="mi-col">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 class="section-head" id="h-bricks">网格堆叠Bricks</h3>
<div class="example demo-grid">
<div class="mi-row">
<div class="mi-col mi-col-6">50%</div>
<div class="mi-col mi-col-6">50%</div>
<div class="mi-col mi-col-6">50%</div>
<div class="mi-col mi-col-6">50%</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row">
<div class="mi-col mi-col-6">...</div>
<div class="mi-col mi-col-6">...</div>
<div class="mi-col mi-col-6">...</div>
<div class="mi-col mi-col-6">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h5>堆叠Bricks + 间距Gutters</h5>
<div class="example demo-grid">
<div class="mi-row mi-gutters">
<div class="mi-col mi-col-4">33%</div>
<div class="mi-col mi-col-4">33%</div>
<div class="mi-col mi-col-4">33%</div>
<div class="mi-col mi-col-4">33%</div>
<div class="mi-col mi-col-4">33%</div>
<div class="mi-col mi-col-4">33%</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row mi-gutters">
<div class="mi-col mi-col-4">...</div>
<div class="mi-col mi-col-4">...</div>
<div class="mi-col mi-col-4">...</div>
<div class="mi-col mi-col-4">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 class="section-head" id="h-offset">偏移Offset</h3>
<p>在Mikit中Offset(偏移网格设置)很简单,只需要在网格类中使用Offset网格类即可,例如在元素类 <code>mi-col mi-col-2</code> 中添加类 <code>mi-offset-4</code>,这样会使被添加offset类的网格偏移4个单元格 (注意：mi-offset-偏移单元格数)</p>
<div class="example demo-grid">
<div class="mi-row">
<div class="mi-col mi-col-2">2</div>
<div class="mi-col mi-col-6 mi-offset-4">6</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row">
<div class="mi-col mi-col-2">...</div>
<div class="mi-col mi-col-6 mi-offset-4">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 class="section-head" id="h-nested">嵌套Nested</h3>
<p>Mikit 网格可以自由嵌套，示例：外层网格 <code>.mi-row</code> 包含有两列 <code>.mi-col mi-col-6</code>，在第二单元格中嵌套了一个由 <code>.mi-row</code> 包含的3列单元格组成的内层网格。</p>
<div class="example demo-grid">
<div class="mi-row">
<div class="mi-col mi-col-6">6</div>
<div class="mi-col mi-col-6 demo-col-nested">
<div class="mi-row">
<div class="mi-col mi-col-4">4</div>
<div class="mi-col mi-col-4">4</div>
<div class="mi-col mi-col-4">4</div>
</div>
</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row">
<div class="mi-col mi-col-6">...</div>
<div class="mi-col mi-col-6">
<div class="mi-row">
<div class="mi-col mi-col-4">
<div class="mi-col mi-col-4">
<div class="mi-col mi-col-4">
</div>
</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 class="section-head" id="h-equal-height">等高Equal Height</h3>
<p>在Mikit中单元格默认是等高的</p>
<div class="example demo-grid">
<div class="mi-row">
<div class="mi-col mi-col-6">1</div>
<div class="mi-col mi-col-6">1<br> 2<br> 3</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row">
<div class="mi-col mi-col-6">
...
</div>
<div class="mi-col mi-col-6">
...
...
...
</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 class="section-head" id="h-reordering">重置排序Reordering</h3>
<h5>第一个</h5>
<div class="example demo-grid">
<div class="mi-row">
<div class="mi-col mi-col-4">4</div>
<div class="mi-col mi-col-8 mi-first-item">8</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row">
<div class="mi-col mi-col-4">...</div>
<div class="mi-col mi-col-8 mi-first-item">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h5>最后一个</h5>
<div class="example demo-grid">
<div class="mi-row">
<div class="mi-col mi-col-3 mi-last-item">3</div>
<div class="mi-col mi-col-9">9</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row">
<div class="mi-col mi-col-3 mi-last-item">...</div>
<div class="mi-col mi-col-9">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 class="section-head" id="h-around">围绕Around</h3>
<p>当您希望单元格被两边的均匀边距围绕时，只需使用<code>.mi-around</code>类即可。</p>
<div class="example demo-grid">
<div class="mi-row mi-around">
<div class="mi-col mi-col-3">3</div>
<div class="mi-col mi-col-3">3</div>
<div class="mi-col mi-col-3">3</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row mi-around">
<div class="mi-col mi-col-3">...</div>
<div class="mi-col mi-col-3">...</div>
<div class="mi-col mi-col-3">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 class="section-head" id="h-between">隔离Between</h3>
<p>有时你只需要单元格之间的空间，而不是围绕他们，则需要 <code>.mi-between</code>。</p>
<div class="example demo-grid">
<div class="mi-row mi-between">
<div class="mi-col mi-col-3">3</div>
<div class="mi-col mi-col-3">3</div>
<div class="mi-col mi-col-3">3</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><div class="mi-row mi-between">
<div class="mi-col mi-col-3">...</div>
<div class="mi-col mi-col-3">...</div>
<div class="mi-col mi-col-3">...</div>
</div></pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 class="section-head" id="h-alignment">对齐Alignment</h3>
<h5>水平居中 Align Center</h5>
<div class="example demo-grid">
<div class="mi-row mi-flex-align-center">
<div class="mi-col mi-col-6">6</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html">
<div class="mi-row mi-flex-align-center">
<div class="mi-col mi-col-6">6</div>
</div>
</pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h5>右对齐 Align Right</h5>
<div class="example demo-grid">
<div class="mi-row mi-flex-align-right">
<div class="mi-col mi-col-3">3</div>
<div class="mi-col mi-col-3">3</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html">
<div class="mi-row mi-flex-align-right">
<div class="mi-col mi-col-3">3</div>
<div class="mi-col mi-col-3">3</div>
</div>
</pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h5>垂直居中 Align Middle</h5>
<div class="example demo-grid">
<div class="mi-row mi-flex-align-middle" style="height: 104px; border: 1px solid #eee;">
<div class="mi-col mi-col-4" style="height: 36px;">4</div>
<div class="mi-col mi-col-4" style="height: 56px;">4</div>
<div class="mi-col mi-col-4" style="height: 36px;">4</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html">
<div class="mi-row mi-flex-align-middle" style="height: 104px; border: 1px solid #eee;">
<div class="mi-col mi-col-4" style="height: 36px;">4</div>
<div class="mi-col mi-col-4" style="height: 56px;">4</div>
<div class="mi-col mi-col-4" style="height: 36px;">4</div>
</div>
</pre>
</div>
</div>
<h3 class="section-head" id="h-push">单元格对齐 Push</h3>
<h5>水平居中 Push Center</h5>
<div class="example demo-grid">
<div class="mi-row">
<div class="mi-col mi-col-4 mi-push-center">.push-center</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html">
<div class="mi-row">
<div class="mi-col mi-col-4 mi-push-center">.push-center</div>
</div>
</pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h5>右对齐 Push Right</h5>
<div class="example demo-grid">
<div class="mi-row">
<div class="mi-col mi-col-6">...</div>
<div class="mi-col mi-col-4 mi-push-right">.push-right</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html">
<div class="mi-row">
<div class="mi-col mi-col-6">...</div>
<div class="mi-col mi-col-4 mi-push-right">.push-right</div>
</div>
</pre>
</div>
</div>
<h5>垂直居中 Push Middle</h5>
<div class="example demo-grid">
<div class="mi-row" style="height: 104px;">
<div class="mi-col mi-col-8 mi-push-middle">.push-middle</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html">
<div class="mi-row">
<div class="mi-col mi-col-8 mi-push-middle">.push-right</div>
</div>
</pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h5>混合对齐 Push Mixed</h5>
<div class="example demo-grid">
<div class="mi-row" style="height: 104px;">
<div class="mi-col mi-col-8 mi-push-middle mi-push-center">.push-middle .push-center</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html">
<div class="mi-row">
<div class="mi-col mi-col-8 mi-push-middle mi-push-center">.push-middle .push-center</div>
</div>
</pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h5>底部对齐 Push Bottom</h5>
<div class="example demo-grid">
<div class="mi-row" style="height: 104px;">
<div class="mi-col mi-col-8 mi-push-bottom">.push-bottom</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html">
<div class="mi-row">
<div class="mi-col mi-col-8 mi-push-bottom">.push-bottom</div>
</div>
</pre>
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 class="section-head" id="h-fixed-column">单元格固定 Fixed Width Column</h3>
<p>您可以设置一个固定宽度的单元格列，并且在这个固定宽度列旁边有一个响应灵活的布局。</p>
<div class="example demo-grid">
<div id="demo-container">
<div id="demo-sidebar">
sidebar
</div>
<div id="demo-content">
content
</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><!-- scss -->
#container {
@include grid-row;
}
#sidebar {
@include flex-item-width(300px);
}
#content {
@include flex-item-auto;
}
<!-- html -->
<div id="container">
<div id="sidebar">Sidebar</div>
<div id="content">Content</div>
</div></pre>
<br />
</div>
</div>
<!-- ---------------------------------------------- -->
<h3 class="section-head" id="h-media-grid">
Media Grid
</h3>
<p>媒体网格是Mikit的灵活性和通用性的一个很好的例子。当你有一些媒体展示，你可以选择使用媒体网格。这种类型的网格非常适合图片展示。</p>
<div class="example demo-grid">
<div id="demo-media-grid">
<div>
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<div>
6
</div>
<div>
7
</div>
<div>
8
</div>
<div>
9
</div>
<div>
10
</div>
</div>
<div class="demo-code">
<pre class="prettyprint lang-html"><!-- scss -->
#media-grid {
@include grid-media-columns(2);
& > div {
margin-bottom: 20px;
height: 80px;
}
& > div:nth-child(2n) {
height: 200px;
}
& > div:nth-child(5n) {
height: 120px;
}
}
<!-- html -->
<div id="media-grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div></pre>
<br />
</div>
</div>
</div>
</body>
</html>