From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 6 Nov 2018 18:52:37 +0800 Subject: Update the Docs completely --- docs/elements/typography.html | 416 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 416 insertions(+) create mode 100644 docs/elements/typography.html (limited to 'docs/elements/typography.html') diff --git a/docs/elements/typography.html b/docs/elements/typography.html new file mode 100644 index 0000000..7c02996 --- /dev/null +++ b/docs/elements/typography.html @@ -0,0 +1,416 @@ + + + + Typography - Elements - Spectre.css CSS Framework + + + + + + + + + + + + + + + +
+
+
GitHubSponsor
+
+ +
+
+
+

Typography

+
+
+ + + +
+
+ + +
+
+

Typography sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.

+

Headings

+
+
+

H1 Heading 40px

+
+
+

H2 Heading 32px

+
+
+

H3 Heading 28px

+
+
+

H4 Heading 24px

+
+
+
H5 Heading 20px
+
+
+
H6 Heading 16px
+
+
+ 
<h1>H1 Heading</h1>
+<h1>H1 Heading <small class="label">40px</small></h1>
+<span class="h1">H1 Heading</span>
+
+

Paragraphs

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Praesent risus leo, dictum in vehicula sit amet, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat. +

+

Climb leg rub face on everything give attitude nap all day for under the bed. Chase mice attack feet but rub face on everything hopped up on goofballs.

+ 
<p>Lorem ipsum dolor sit amet, ...</p>
+<p>...</p>
+
+

Semantic text elements

+
+
I18Nabbr
+
Boldstrongb
+
+ Citationcite +
+
Hello World!code
+
+ Deleteddel +
+
Emphasisem
+
Italici
+
Insertedins
+
Ctrl + Skbd
+
+ Highlightedmark +
+
+ 漢 + kan字 + ji + ruby +
+
+ Strikethroughs +
+
Samplesamp
+
Text Subscriptedsub
+
Text Superscriptedsup
+
+ time +
+
+ Underlineu +
+
+ x = + y + 2var +
+
+

Optimized for East Asian fonts

+
+
+

你好, こんにちは, 안녕하세요

+

Chinese (Simplified)

+

革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。

+

Chinese (Tranditional)

+

山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」

+

Japanese

+

祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。

+

Korean

+

나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.

+
+
+

Use the lang attribute to the container element to have better Asian CJK (Chinese, Japanese and Korean) font support.

+ 
<p lang="zh-Hans">革命不是请客吃饭，不是做文章……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり……</p>
+<p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로……</p>
+
+

And you can use the cjk class or the lang attribute to add spacing between underlines and strike-through text for better Chinese and Japanese readability.

+
+
+

祇園精舎の鐘の声、諸行無常の響きあり。

+

+ 祇園精舎の鐘の声、諸行無常の響きあり。 + +

+
+
+ 
<p class="cjk"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。……</p>
+<p lang="ja"><del>祇園</del><del>精舎</del>の鐘の声、諸行無常の響きあり。……</p>
+
+

Fonts

+

Spectre sets the most common and best font-family for each OS with fallback support in old systems. + There are also fonts targeted East Asian typography. +

+ 
/* Western typography targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+/* Monospace typography targeted */
+font-family: "SF Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Courier, monospace;
+
+/* Chinese (lang="zh" and lang="zh-Hans") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", sans-serif;
+/* Chinese (lang="zh-Hant") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang TC", "Hiragino Sans CNS", "Microsoft JhengHei", "Helvetica Neue", sans-serif;
+/* Japanese (lang="ja") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Hiragino Sans", "Hiragino Kaku Gothic Pro", "Yu Gothic", YuGothic, Meiryo, "Helvetica Neue", sans-serif;
+/* Korean (lang="ko") targeted */
+font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Malgun Gothic", "Helvetica Neue", sans-serif;
+
+

Blockquote

+
+

The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life.

+ - Bill Gates +
+ 
<blockquote>
+  <p>The advance of technology is based on making it fit in so that you don't really even notice it, so it's part of everyday life. </p>
+  <cite>- Bill Gates</cite>
+</blockquote>
+
+

Lists

+
+
+
    +
  • list item 1
    • +
  • list item 2 +
      +
    • list item 2.1
      • +
    • list item 2.2
      • +
    • list item 2.3
      • +
    +
    • +
  • list item 3
    • +
+
+
+
    +
  1. list item 1
    2. +
  2. list item 2 +
      +
    1. list item 2.1
      2. +
    2. list item 2.2
      3. +
    3. list item 2.3
      4. +
    +
    3. +
  3. list item 3
    4. +
+
+
+
+
description list term 1
+
description list description 1
+
description list term 2
+
description list description 2
+
description list term 3
+
description list description 3
+
+
+
+ 
<!-- unordered list -->
+<ul>
+  <li>list item 1</li>
+  <li>list item 2
+    <ul>
+      <li>list item 2.1</li>
+      <li>list item 2.2</li>
+      <li>list item 2.3</li>
+    </ul>
+  </li>
+  <li>list item 3</li>
+</ul>
+
+<!-- description list -->
+<dl>
+  <dt>description list term</dt>
+  <dd>description list description</dd>
+</dl>
+
+
+ +
+
+ +
+
+
+ + + \ No newline at end of file -- cgit v1.3.1-23-gd82d