mikit-framework

<!DOCTYPE html> <html> <head> <title>Mikit</title>  <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; } </style> </head> <body> <div class="component-index-box"> <ol> <li> <a href="#h-get-started">开始 Get Started</a> </li> <li> <a href="#h-headings">标题 Headings</a> </li> <li> <a href="#h-paragraphs">段落 Paragraphs</a> </li> <li> <a href="#h-quotes">引用 Quotes</a> </li> <li> <a href="#h-pre-formatted">预格式化 Pre-formatted</a> </li> <li> <a href="#h-inline-elements">内联元素 Inline Elements</a> </li> <li> <a href="#h-modifiers">修饰 Modifiers</a> </li> <li> <a href="#h-figure">数字图像 Figure</a> </li> <li> <a href="#h-lists">列表 Lists</a> </li> </ol> </div> <div class="component-show"> <p> 排版可能是网页上最重要和最显而易见的东西之一。即使稍有瑕疵也会毁掉完美的网站。Mikit，你会有理想的间距完美的字体，字体大小和比例，不管确切的风格或字体选择你的网站。 </p> <h3 id="h-get-started" class="section-head">开始 Get Started</h3> <p>基于4px水平网格mikit排版，它意味着对标题、段落、报价和其他选择的文本是一种线的高度，融入4px网格帮助默认设置设计水平的节奏。 </p> <img class="alignnone wp-image-28 size-full" src="<?php echo wp_upload_dir()['baseurl']; ?>/2017/06/typography01.png" alt="" width="676" height="180" /> <p>4px网格排版有了这个功能，你可以快速，轻松地建立一个坚实和和谐的网站和用户界面设计。你不需要做复杂的计算来找到文本基线的大小和比例，不需要寻找神奇的公式来建立一个水平的节奏。您可以使用所有的默认设置的排版，它总是看起来平衡。但你也可以很容易地更改字体大小，请设置行高倍为4px，文本的价值依然很好看。额外的平衡与和谐，用Mikit创造了一个经典的字体表。</p> <img class="alignnone wp-image-29 size-full" src="<?php echo wp_upload_dir()['baseurl']; ?>/2017/06/typography02.png" alt="" width="520" height="140" /> <p>排版有助于在标题和文本元素的大小之间建立平衡。</p> <h3 id="h-headings" class="section-head">标题Headings</h3> <p>使用.mi-h1 ~ .mi-h6类名定义标题，同时需要添加类class="mi-title"</p> <div class="example"> <h1 class="mi-title">标题</h1> <h1>一级标题</h1> <h2>二级标题</h2> <h3>三级标题</h3> <h4>四级标题</h4> <h5>五级标题</h5> <h6>六级标题</h6> <pre class="code"><span class="hljs-tag"><<span class="hljs-name">h1</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-title"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> <span class="hljs-tag"><<span class="hljs-name">h1</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h1</span>></span> ... <span class="hljs-tag"><<span class="hljs-name">h6</span>></span>...<span class="hljs-tag"></<span class="hljs-name">h6</span>></span></pre> </div> <h3 id="h-paragraphs" class="section-head">段落 Paragraphs</h3> <p>示例：</p> <div class="example"> <em>14px/20px</em> <p class="mi-text-small" style="font-size:14px;"> 汉皇重色思倾国，御宇多年求不得。杨家有女初长成，养在深闺人未识。天生丽质难自弃，一朝选在君王侧。回眸一笑百媚生，六宫粉黛无颜色。春寒赐浴华清池，温泉水滑洗凝脂。侍儿扶起娇无力，始是新承恩泽时。云鬓花颜金步摇，芙蓉帐暖度春宵。春宵苦短日高起，从此君王不早朝。 </p> <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-text-small"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> </div> <div class="example"> <em>12px/20px</em> <p class="mi-text-smaller" style="font-size:12px;"> 承欢侍宴无闲暇，春从春游夜专夜。后宫佳丽三千人，三千宠爱在一身。金屋妆成娇侍夜，玉楼宴罢醉和春。姊妹弟兄皆列土，可怜光彩生门户。遂令天下父母心，不重生男重生女。骊宫高处入青云，仙乐风飘处处闻。缓歌慢舞凝丝竹，尽日君王看不足。渔阳鼙鼓动地来，惊破霓裳羽衣曲。 </p> <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-text-smaller"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> </div> <div class="example"> <em>16px/24px</em> <p style="font-size:16px;"> 九重城阙烟尘生，千乘万骑西南行。翠华摇摇行复止，西出都门百余里。六军不发无奈何，宛转蛾眉马前死。花钿委地无人收，翠翘金雀玉搔头。君王掩面救不得，回看血泪相和流。黄埃散漫风萧索，云栈萦纡登剑阁。峨嵋山下少人行，旌旗无光日色薄。蜀江水碧蜀山青，圣主朝朝暮暮情。 </p> <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> </div> <div class="example"> <em>18px/28px</em> <p class="mi-text-big" style="font-size:18px;"> 行宫见月伤心色，夜雨闻铃肠断声。天旋地转回龙驭，到此踌躇不能去。马嵬坡下泥土中，不见玉颜空死处。君臣相顾尽沾衣，东望都门信马归。归来池苑皆依旧，太液芙蓉未央柳。芙蓉如面柳如眉，对此如何不泪垂。春风桃李花开日，秋雨梧桐叶落时。西宫南内多秋草，落叶满阶红不扫。 </p> <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-text-big"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> </div> <div class="example"> <em>20px/32px</em> <p class="mi-text-large" style="font-size:20px;"> 梨园弟子白发新，椒房阿监青娥老。夕殿萤飞思悄然，孤灯挑尽未成眠。迟迟钟鼓初长夜，耿耿星河欲曙天。鸳鸯瓦冷霜华重，翡翠衾寒谁与共。悠悠生死别经年，魂魄不曾来入梦。临邛道士鸿都客，能以精诚致魂魄。为感君王辗转思，遂教方士殷勤觅。排空驭气奔如电，升天入地求之遍。 </p> <pre class="code"><span class="hljs-tag"><<span class="hljs-name">p</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-text-large"</span>></span>...<span class="hljs-tag"></<span class="hljs-name">p</span>></span></pre> </div> <h3 id="h-quotes" class="section-head"> 引用 Quotes </h3> <p>文本中的引号突出了对比度，增加了文本的多样性。在引号中，可以将文本标记为段落标记，而不使用段落标记。</p> <div class="example"> <blockquote> 上穷碧落下黄泉，两处茫茫皆不见。忽闻海上有仙山，山在虚无缥渺间。楼阁玲珑五云起，其中绰约多仙子。中有一人字太真，雪肤花貌参差是。金阙西厢叩玉扃，转教小玉报双成。闻道汉家天子使，九华帐里梦魂惊。揽衣推枕起徘徊，珠箔银屏迤逦开。云鬓半偏新睡觉，花冠不整下堂来。 </blockquote> <pre class="code"><span class="hljs-tag"><<span class="hljs-name">blockquote</span>></span>...<span class="hljs-tag"></<span class="hljs-name">blockquote</span>></span></pre> </div> <h3 id="h-pre-formatted" class="section-head"> 预格式化 Pre-formatted </h3> <p> 预格式化文本最常用于显示代码片段或其他文本元素，您希望保留它们所具有的确切格式。 </p> <div class="example"> <pre>Function.prototype.inherits = function(parent) { for (var key in parent.prototype) { this.prototype[key] = parent.prototype[key]; } }; </pre> <pre class="code"><span class="hljs-tag"><<span class="hljs-name">pre</span>></span>...<span class="hljs-tag"></<span class="hljs-name">pre</span>></span> 或者 <span class="hljs-tag"><<span class="hljs-name">pre</span>></span><span class="hljs-tag"><<span class="hljs-name">code</span>></span>...<span class="hljs-tag"></<span class="hljs-name">code</span>></span><span class="hljs-tag"></<span class="hljs-name">pre</span>></span></pre> </div> <h3 id="h-inline-elements" class="section-head"> 内联元素 Inline Elements </h3> <p>Mikit具有各种内联格式化元素。它们都有自己的语义，但你可以随意使用它们，只是为了它们的风格。</p> <div class="example"> <table> <thead> <tr> <th>示例</th> <th>标签</th> <th>示例</th> <th>标签</th> </tr> </thead> <tbody> <tr> <td><abbr title="Cascading Style Sheets">CSS</abbr></td> <td class="mi-col-6"><code><abbr></code></td> <td><cite>Cite</cite></td> <td class="mi-col-6"><code><cite></code></td> </tr> <tr> <td><code>Code</code></td> <td><code><code></code></td> <td><samp>Sample</samp></td> <td><code><samp></code></td> </tr> <tr> <td><var>Variable</var></td> <td><code><var></code></td> <td><mark>Mark</mark></td> <td><code><mark></code></td> </tr> <tr> <td><kbd>Shortcut</kbd></td> <td><code><kbd></code></td> <td><del>Deleted</del></td> <td><code><del></code></td> </tr> <tr> <td><i>Italic</i></td> <td><code><i></code></td> <td><em>Emphasis</em></td> <td><code><em></code></td> </tr> <tr> <td><strong>Highlighted</strong></td> <td><code><strong></code></td> <td><b>Bold</b></td> <td><code><b></code></td> </tr> <tr> <td>x<sup>superscript</sup></td> <td><code><sup></code></td> <td>x<sub>subscript</sub></td> <td><code><sub></code></td> </tr> <tr> <td><small>Small</small></td> <td><code><small></code></td> <td><ins>Inserted</ins></td> <td><code><ins></code></td> </tr> </tbody> </table> </div> <h3 id="h-modifiers" class="section-head"> 修饰 Modifiers </h3> <p>修饰语——一组用于创建文本中的重音的辅助类，用于在不编写CSS代码的情况下解决有用的任务，例如，中心文本的对齐方式。修饰符可以应用到任何标记中，如内联元素、链接或块标记。</p> <div class="example"> <table> <thead> <tr> <th>Example</th> <th>Modifier</th> </tr> </thead> <tbody> <tr> <td><span class="mi-font-muted">Muted</span></td> <td class="col-12"><code>.mi-font-muted</code></td> </tr> <tr> <td><a href="#" class="muted">Muted link</a></td> <td><code>.mi-font-muted</code></td> </tr> <tr> <td><a href="#" class="mi-color-black">Black link</a></td> <td><code>.mi-color-black</code></td> </tr> <tr> <td><span class="mi-bg-highlight">Highlight</span></td> <td><code>.mi-bg-highlight</code></td> </tr> <tr> <td><span class="mi-font-upper">upper</span></td> <td><code>.mi-font-upper</code></td> </tr> <tr> <td><span class="mi-font-lower">LOWER</span></td> <td><code>.mi-font-lower</code></td> </tr> <tr> <td><span class="mi-font-italic">Italic</span></td> <td><code>.mi-font-italic</code></td> </tr> <tr> <td><span class="mi-font-strong">Strong</span></td> <td><code>.mi-font-strong</code></td> </tr> <tr> <td><span class="mi-text-small">Small</span></td> <td><code>.mi-text-small</code></td> </tr> <tr> <td><span class="mi-text-smaller">Smaller</span></td> <td><code>.mi-text-smaller</code></td> </tr> <tr> <td><span class="mi-text-big">Big</span></td> <td><code>.mi-text-big</code></td> </tr> <tr> <td><span class="mi-text-large">Large</span></td> <td><code>.mi-text-large</code></td> </tr> <tr> <td class="mi-align-left">Text left</td> <td><code>.mi-align-left</code></td> </tr> <tr> <td class="mi-align-center">Text center</td> <td><code>.mi-align-center</code></td> </tr> <tr> <td class="mi-align-right">Text right</td> <td><code>.mi-align-right</code></td> </tr> </tbody> </table> </div> <h3 id="h-figure" class="section-head"> Figure </h3> <p>一个figure标签包括image、video或code加上caption。把视频元素添加.video-container类有助于服务响应视频到各种设备。</p> <h5> 图像 Images </h5> <div class="example"> <figure> <img src="<?php echo wp_upload_dir()['baseurl']; ?>/2017/06/typography03.jpg" alt="Image"> <figcaption>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</figcaption> </figure> <p>Html</p> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> <span class="hljs-tag"><<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"image.jpg"</span>></span> <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> </pre> </div> <h5>视频 Video</h5> <div class="example"> <div class="video-container"> <iframe src="http://player.youku.com/embed/XMjY4NTk5NTMyMA==" width="658" height="411" frameborder="0"></iframe> <figcaption>天行九歌</figcaption> </div> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> <span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-video-container"</span>></span> <span class="hljs-tag"><<span class="hljs-name">iframe</span>></span>...<span class="hljs-tag"></<span class="hljs-name">iframe</span>></span> <span class="hljs-tag"></<span class="hljs-name">div</span>></span> <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> </pre> </div> <h5>代码 Code</h5> <div class="example"> <pre class="prettyprint lang-js">Function.prototype.inherits = function(parent) { for (var key in parent.prototype) { this.prototype[key] = parent.prototype[key]; } };</pre> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">figure</span>></span> <span class="hljs-tag"><<span class="hljs-name">pre</span>></span>...<span class="hljs-tag"></<span class="hljs-name">pre</span>></span> <span class="hljs-tag"><<span class="hljs-name">figcaption</span>></span>...<span class="hljs-tag"></<span class="hljs-name">figcaption</span>></span> <span class="hljs-tag"></<span class="hljs-name">figure</span>></span> </pre> </div> <h3 id="h-lists" class="section-head">列表 Lists</h3> <div class="mi-row mi-gutters"> <div class="mi-col mi-col-6"> <div class="example"> <ul> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2.1</li> <li>list item 2.2 <ul> <li>list item 2.2.1</li> <li>list item 2.2.2</li> </ul> </li> <li>list item 2.3</li> <li>list item 2.4</li> </ul> </li> <li>list item 3</li> <li>list item 4</li> </ul> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> </pre> </div> </div> <div class="mi-col mi-col-6"> <div class="example"> <ol> <li>list item 1</li> <li>list item 2 <ol> <li>list item 2.1</li> <li>list item 2.2 <ol> <li>list item 2.2.1</li> <li>list item 2.2.2</li> </ol> </li> <li>list item 2.3</li> <li>list item 2.4</li> </ol> </li> <li>list item 3</li> <li>list item 4</li> </ol> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ol</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ol</span>></span> </pre> </div> </div> </div> <h5>无样式列表 Unstyled List</h5> <div class="example"> <ul class="mi-list-unstyled"> <li>list item 1</li> <li>list item 2 <ul> <li>list item 2.1</li> <li>list item 2.2</li> </ul> </li> <li>list item 3</li> <li>list item 4</li> </ul> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">ul</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"mi-list-unstyled"</span>></span> <span class="hljs-tag"><<span class="hljs-name">li</span>></span>...<span class="hljs-tag"></<span class="hljs-name">li</span>></span> <span class="hljs-tag"></<span class="hljs-name">ul</span>></span> </pre> </div> <h5>描述列表 Definition List</h5> <div class="example"> <dl> <dt>文本1</dt> <dd>描述说明 1</dd> <dt>文本2</dt> <dd>描述说明 2</dd> <dt>文本3</dt> <dd>描述说明 3</dd> </dl> <pre class="code skip"><span class="hljs-tag"><<span class="hljs-name">dl</span>></span> <span class="hljs-tag"><<span class="hljs-name">dt</span>></span>Item<span class="hljs-tag"></<span class="hljs-name">dt</span>></span> <span class="hljs-tag"><<span class="hljs-name">dd</span>></span>Description<span class="hljs-tag"></<span class="hljs-name">dd</span>></span> <span class="hljs-tag"></<span class="hljs-name">dl</span>></span> </pre> </div> </div> </body> </html>