1. 开始 Get Started
  2. 标题 Headings
  3. 段落 Paragraphs
  4. 引用 Quotes
  5. 预格式化 Pre-formatted
  6. 内联元素 Inline Elements
  7. 修饰 Modifiers
  8. 数字图像 Figure
  9. 列表 Lists

排版可能是网页上最重要和最显而易见的东西之一。即使稍有瑕疵也会毁掉完美的网站。Mikit,你会有理想的间距完美的字体,字体大小和比例,不管确切的风格或字体选择你的网站。

开始 Get Started

基于4px水平网格mikit排版,它意味着对标题、段落、报价和其他选择的文本是一种线的高度,融入4px网格帮助默认设置设计水平的节奏。

4px网格排版有了这个功能,你可以快速,轻松地建立一个坚实和和谐的网站和用户界面设计。你不需要做复杂的计算来找到文本基线的大小和比例,不需要寻找神奇的公式来建立一个水平的节奏。 您可以使用所有的默认设置的排版,它总是看起来平衡。但你也可以很容易地更改字体大小,请设置行高倍为4px,文本的价值依然很好看。额外的平衡与和谐,用Mikit创造了一个经典的字体表。

排版有助于在标题和文本元素的大小之间建立平衡。

标题Headings

使用.mi-h1 ~ .mi-h6类名定义标题,同时需要添加类class="mi-title"

标题

一级标题

二级标题

三级标题

四级标题

五级标题
六级标题
<h1 class="mi-title">...</h1>
<h1>...</h1>
...
<h6>...</h6>

段落 Paragraphs

示例:

14px/20px

汉皇重色思倾国,御宇多年求不得。杨家有女初长成,养在深闺人未识。天生丽质难自弃,一朝选在君王侧。回眸一笑百媚生,六宫粉黛无颜色。春寒赐浴华清池,温泉水滑洗凝脂。侍儿扶起娇无力,始是新承恩泽时。云鬓花颜金步摇,芙蓉帐暖度春宵。春宵苦短日高起,从此君王不早朝。

<p class="mi-text-small">...</p>
12px/20px

承欢侍宴无闲暇,春从春游夜专夜。后宫佳丽三千人,三千宠爱在一身。金屋妆成娇侍夜,玉楼宴罢醉和春。姊妹弟兄皆列土,可怜光彩生门户。遂令天下父母心,不重生男重生女。骊宫高处入青云,仙乐风飘处处闻。缓歌慢舞凝丝竹,尽日君王看不足。渔阳鼙鼓动地来,惊破霓裳羽衣曲。

<p class="mi-text-smaller">...</p>
16px/24px

九重城阙烟尘生,千乘万骑西南行。翠华摇摇行复止,西出都门百余里。六军不发无奈何,宛转蛾眉马前死。花钿委地无人收,翠翘金雀玉搔头。君王掩面救不得,回看血泪相和流。黄埃散漫风萧索,云栈萦纡登剑阁。峨嵋山下少人行,旌旗无光日色薄。蜀江水碧蜀山青,圣主朝朝暮暮情。

<p>...</p>
18px/28px

行宫见月伤心色,夜雨闻铃肠断声。天旋地转回龙驭,到此踌躇不能去。马嵬坡下泥土中,不见玉颜空死处。君臣相顾尽沾衣,东望都门信马归。归来池苑皆依旧,太液芙蓉未央柳。芙蓉如面柳如眉,对此如何不泪垂。春风桃李花开日,秋雨梧桐叶落时。西宫南内多秋草,落叶满阶红不扫。

<p class="mi-text-big">...</p>
20px/32px

梨园弟子白发新,椒房阿监青娥老。夕殿萤飞思悄然,孤灯挑尽未成眠。迟迟钟鼓初长夜,耿耿星河欲曙天。鸳鸯瓦冷霜华重,翡翠衾寒谁与共。悠悠生死别经年,魂魄不曾来入梦。临邛道士鸿都客,能以精诚致魂魄。为感君王辗转思,遂教方士殷勤觅。排空驭气奔如电,升天入地求之遍。

<p class="mi-text-large">...</p>

引用 Quotes

文本中的引号突出了对比度,增加了文本的多样性。在引号中,可以将文本标记为段落标记,而不使用段落标记。

上穷碧落下黄泉,两处茫茫皆不见。忽闻海上有仙山,山在虚无缥渺间。楼阁玲珑五云起,其中绰约多仙子。中有一人字太真,雪肤花貌参差是。金阙西厢叩玉扃,转教小玉报双成。闻道汉家天子使,九华帐里梦魂惊。揽衣推枕起徘徊,珠箔银屏迤逦开。云鬓半偏新睡觉,花冠不整下堂来。
<blockquote>...</blockquote>

预格式化 Pre-formatted

预格式化文本最常用于显示代码片段或其他文本元素,您希望保留它们所具有的确切格式。

Function.prototype.inherits = function(parent) {
    for (var key in parent.prototype) {
        this.prototype[key] = parent.prototype[key];
    }
};
<pre>...</pre> 或者
<pre><code>...</code></pre>

内联元素 Inline Elements

Mikit具有各种内联格式化元素。它们都有自己的语义,但你可以随意使用它们,只是为了它们的风格。

示例 标签 示例 标签
CSS <abbr> Cite <cite>
Code <code> Sample <samp>
Variable <var> Mark <mark>
Shortcut <kbd> Deleted <del>
Italic <i> Emphasis <em>
Highlighted <strong> Bold <b>
xsuperscript <sup> xsubscript <sub>
Small <small> Inserted <ins>

修饰 Modifiers

修饰语——一组用于创建文本中的重音的辅助类,用于在不编写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

一个figure标签包括image、video或code加上caption。把视频元素添加.video-container类有助于服务响应视频到各种设备。

图像 Images
Image
Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Html

<figure>
    <img src="image.jpg">
    <figcaption>...</figcaption>
</figure>
视频 Video
天行九歌
<figure>
    <div class="mi-video-container">
        <iframe>...</iframe>
    </div>
    <figcaption>...</figcaption>
</figure>
代码 Code
Function.prototype.inherits = function(parent) {
    for (var key in parent.prototype) {
        this.prototype[key] = parent.prototype[key];
    }
};
<figure>
    <pre>...</pre>
    <figcaption>...</figcaption>
</figure>

列表 Lists

  • list item 1
  • list item 2
    • list item 2.1
    • list item 2.2
      • list item 2.2.1
      • list item 2.2.2
    • list item 2.3
    • list item 2.4
  • list item 3
  • list item 4
<ul>
    <li>...</li>
</ul>
  1. list item 1
  2. list item 2
    1. list item 2.1
    2. list item 2.2
      1. list item 2.2.1
      2. list item 2.2.2
    3. list item 2.3
    4. list item 2.4
  3. list item 3
  4. list item 4
<ol>
    <li>...</li>
</ol>
无样式列表 Unstyled List
<ul class="mi-list-unstyled">
    <li>...</li>
</ul>
描述列表 Definition List
文本1
描述说明 1
文本2
描述说明 2
文本3
描述说明 3
<dl>
    <dt>Item</dt>
    <dd>Description</dd>
</dl>