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