From 135ea0010024826b090789f4dcab8af8e85ecfc6 Mon Sep 17 00:00:00 2001 From: Yan Zhu Date: Tue, 24 Jan 2017 19:01:19 +0800 Subject: CHG: Improve media, docs, Asian typography and examples --- index.html | 125 +++++++++++++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 109 insertions(+), 16 deletions(-) (limited to 'index.html') diff --git a/index.html b/index.html index e3962de..0190538 100644 --- a/index.html +++ b/index.html @@ -111,12 +111,12 @@
Install with NPM
-$ npm install spectre.css
+$ npm install spectre.css --save
Install with Bower
-$ bower install spectre.css
+$ bower install spectre.css --save

And include it in your website or Web app <head>

@@ -182,7 +182,7 @@

typography

-

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

+

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

headings
@@ -200,22 +200,113 @@
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.

-

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

+

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, <span class="highlight">consectetur</span> adipiscing elit. Praesent risus leo, <a href="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
-<p class="lead">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, <a href="#">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
-
optimized for asian fonts
-

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

+ +
semantic text elements
+
+
+ I18N + <abbr> +
+
+ Bold + <strong> <b> +
+
+ Citation + <cite> +
+
+ Hello World! + <code> +
+
+ Deleted + <del> +
+
+ Emphasis + <em> +
+
+ Italic + <i> +
+
+ Inserted + <ins> +
+
+ Ctrl + S + <kbd> +
+
+ Highlighted + <mark> +
+
+ + 漢 kan + 字 ji + + <ruby> +
+
+ Strikethrough + <s> +
+
+ Sample + <samp> +
+
+ Text Subscripted + <sub> +
+
+ Text Superscripted + <sup> +
+
+ + <time> +
+
+ Underline + <u> +
+
+ x = y + 2 + <var> +
+
+ +
optimized for east asian fonts
+

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

Chinese (Simplified)
-

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

+

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

+
Chinese (Tranditional)
+

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

Japanese
-

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

+

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

Korean
-

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

+

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

+ +
+

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

+
+ + +
+<p class="cjk">祇園精舎の鐘の声、諸行無常の響きあり。……</p>
+<p lang="ja">祇園精舎の鐘の声、諸行無常の響きあり。……</p>
+
blockquote
@@ -1046,12 +1137,12 @@
-

For responsive video, add a container with the class video-responsive. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add .video-responsive-4-3 for 4:3 ratio video container.

+

For responsive video, add a container with the class video-responsive. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add video-responsive-4-3 for 4:3 ratio video container or video-responsive-1-1 for 1:1 ratio.

- +
@@ -1066,7 +1157,7 @@ </figure> <div class="video-responsive"> - <iframe src="https://www.youtube.com/embed/vBfBa-gCMQk" width="560" height="315" frameborder="0" allowfullscreen></iframe> + <iframe src="https://www.youtube.com/embed/BzMLA8YIgG0; width="560" height="315" frameborder="0" allowfullscreen></iframe> </div> @@ -1918,12 +2009,12 @@ +
  • My profile
    • -
  • Settings @@ -2831,6 +2922,8 @@ <div class="text-bold"></div> <!-- Italicized text --> <div class="text-italic"></div> +<!-- Larger text (120%) --> +<div class="text-large"></div> <!-- Overflow behavior: display an ellipsis to represent clipped text --> <div class="text-ellipsis"></div> -- cgit v1.3.1-26-gb76a