mifa

灰色

#384452  $color-primary
#5e6772  $color-dark-grey
#d1d8df  $color-grey
#eef1f5  $color-code-grey
#fdfdfd  $color-light-grey

Content

#1abc9c  $color-green
#23B7F3  $color-blue
#f53d3d  $color-red
#ffff3a  $color-yellow

标题一 <h1> 4.0rem (40px)

标题二 <h2> 3.2rem (32px)

标题三 <h3> 2.8rem (28px)

标题四 <h4> 2.4rem (24px)

标题五 <h5> 2.0rem (20px)
标题六 <h6> 1.6rem (16px)

永和九年,岁在癸丑。暮春之初,会於会稽山阴之兰亭,修禊事也。群贤毕至,少长咸集。此地有崇山峻岭,茂林修竹。又有清流激湍,映带左右,引以为流觞曲水。, 列坐其次,虽无丝竹管弦之盛,一觞一咏,亦足以畅叙幽情。.

是日也, 天朗气清 惠风和畅。仰观宇宙之大,俯察品类之盛,所以游目骋怀,足以极视听之娱, 所以游目骋怀 ,足以极视听之娱 ,信可乐也!

夫人之相与,俯仰一世。或取诸怀抱,晤言一室之内;或因寄所托,放浪形骸之外。 虽取舍万殊,静躁不同,当其欣於所遇,暂得於己快然自足,曾不知老之将至。 , 情随事迁,感慨系之矣。向之所欣,俯仰之间,已为陈迹,犹不能不以之兴怀,况修短随化,终期於尽?古人云:“死生亦大矣”,岂不痛哉!

每览昔人兴感之由,若合一契,未尝不临文嗟悼,不能喻之於怀。固知一死生为虚诞,齐彭殇为妄作。后之视今,亦犹今之视昔,悲夫!故列叙时人,录其所述。 虽世殊事异,所以兴怀,其致一也。 后之览者,亦将有感於斯文

Blockquotes

Mifa 是一个专为 Phodal 的个人项目为设计的 Design System。

Mifa 是一个专为 Phodal 的个人项目为设计的 Design System。

Buttons

Default Button
Outlined Button
Clear Button
Default Button
Outlined Button
Clear Button
Lists

  • Unordered list item 1
  • Unordered list item 2
  • Unordered list item 3
    • Unordered list item 3.1
    • Unordered list item 3.2
    • Unordered list item 3.3
  • Unordered list item 4
  • Unordered list item 5
  1. Ordered list item 1
  2. Ordered list item 2
  3. Ordered list item 3
    1. Ordered list item 3.1
    2. Ordered list item 3.2
    3. Ordered list item 3.3
  4. Ordered list item 4
  5. Ordered list item 5
Description list item 1
Description list item 2
Description list item 3
Description list item 3.1
Description list item 3.2
Description list item 3.3
Description list item 4
Description list item 5
Forms

Legend
Tables

Name Age Height Location
Kevin Durant 27 2.06 Washington, DC
Stephen Curry 27 1,91 Akron, OH
Klay Thompson 25 2,01 Los Angeles, CA
Draymond Green 26 2,01 Saginaw, MI
Andre Iguodala 32 1,98 Springfield, IL
Anderson Varejão 33 2,08 Colatina, ES
Shaun Livingston 30 2,01 Peoria, CA
Grids

100%
10%
90%
20%
80%
25%
75%
33%
67%
40%
60%
50%
50%
60%
40%
67%
33%
75%
25%
80%
20%
90%
10%
100%
90%
10%
80%
20%
75%
25%
67%
33%
60%
40%
50%
50%
40%
60%
33%
67%
25%
75%
20%
80%
10%
90%
100%
50%
50%
33.3%
33.3%
33.3%
25%
25%
25%
25%
20%
20%
20%
20%
20%
16.6%
16.6%
16.6%
16.6%
16.6%
16.6%
14.28%
14.28%
14.28%
14.28%
14.28%
14.28%
14.28%
12.5%
12.5%
12.5%
12.5%
12.5%
12.5%
12.5%
12.5%
11.11%
11.11%
11.11%
11.11%
11.11%
11.11%
11.11%
11.11%
11.11%
10%
10%
10%
10%
10%
10%
10%
10%
10%
10%
9.09%
9.09%
9.09%
9.09%
9.09%
9.09%
9.09%
9.09%
9.09%
9.09%
9.09%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
8.3%
50%
50%
25%
25%
25%
25%
25%
25%
25%
25%
50%
50%
25%
25%
25%
75%
Codes

.mifa {
	color: #9b4dca;
}
Code Highlight Theme

(function() {
  var input, output;
  var converter = new showdown.Converter();

  function updateOutput() {
    output.innerHTML = converter.makeHtml(input.value);
  }

  document.addEventListener("DOMContentLoaded", function(event) {
    input = document.getElementById('input');
    output = document.getElementById('output');

    input.addEventListener('input', updateOutput, false);
    input.addEventListener('keydown', updateOutput, false);

    updateOutput();
  });
})();
Utilities

float to left float to right
Examples