CHG: Improve media, docs, Asian typography and examples

1 files changed, 109 insertions, 16 deletions

diff --git a/index.html b/index.html
index e3962de..0190538 100644
--- a/index.html
+++ b/index.html
@@ -111,12 +111,12 @@
                 <h5>Install with NPM</h5>
                 <!-- install with npm example -->
 <pre class="code lang-html">
-<span class="tag">$</span> npm install <span class="atv">spectre.css</span>
+<span class="tag">$</span> npm install <span class="atv">spectre.css</span> --save
 </pre>
                 <h5>Install with Bower</h5>
                 <!-- install with bower example -->
 <pre class="code lang-html">
-<span class="tag">$</span> bower install <span class="atv">spectre.css</span>
+<span class="tag">$</span> bower install <span class="atv">spectre.css</span> --save
 </pre>
                 <p>And include it in your website or Web app <code>&lt;head&gt;</code></p>
                 <!-- install manually example -->
@@ -182,7 +182,7 @@
         <section id="typography" class="container grid-960">
             <header class="text-center"><h4>typography</h4></header>
             <section class="notes">
-                <p><strong>Typography</strong> sets default styles for headings, paragraphs, blockquote, lists and code elements. </p>
+                <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote, lists and code elements. </p>
             </section>
 
             <header class="text-center"><h5>headings</h5></header>
@@ -200,22 +200,113 @@
 </pre>
 
             <header class="text-center"><h5>paragraphs</h5></header>
-            <p>Lorem ipsum dolor sit amet, <span class="highlight">consectetur</span> adipiscing elit. Praesent risus leo, <a href="#typography">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="#typography">dictum in vehicula sit amet</a>, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.</p>
+            <p>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>
 
             <!-- headings example -->
 <pre class="code lang-html">
-&lt;<span class="tag">p</span>&gt;Lorem ipsum dolor sit amet, &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;highlight&quot;</span>&gt;consectetur&lt;<span class="tag">/span</span>&gt; adipiscing elit. Praesent risus leo, &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;dictum in vehicula sit amet&lt;<span class="tag">/a</span>&gt;, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.&lt;<span class="tag">/p</span>&gt;
-&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;lead&quot;</span>&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.&lt;<span class="tag">/p</span>&gt;
+&lt;<span class="tag">p</span>&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent risus leo, &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;dictum in vehicula sit amet&lt;<span class="tag">/a</span>&gt;, feugiat tempus tellus. Duis quis sodales risus. Etiam euismod ornare consequat.&lt;<span class="tag">/p</span>&gt;
 </pre>
-            <header class="text-center"><h5>optimized for asian fonts</h5></header>
-            <p class="lead">你好, こんにちは, 안녕하세요</p>
+
+            <header class="text-center"><h5>semantic text elements</h5></header>
+            <div class="columns">
+                <div class="column col-3 col-xs-12">
+                    <abbr title="Internationalization">I18N</abbr>
+                    <code class="ml-10">&lt;abbr&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <strong>Bold</strong>
+                    <code class="ml-10">&lt;strong&gt;</code> <code>&lt;b&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <cite>Citation</cite>
+                    <code class="ml-10">&lt;cite&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <code>Hello World!</code>
+                    <code class="ml-10">&lt;code&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <del>Deleted</del>
+                    <code class="ml-10">&lt;del&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <em>Emphasis</em>
+                    <code class="ml-10">&lt;em&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <i>Italic</i>
+                    <code class="ml-10">&lt;i&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <ins>Inserted</ins>
+                    <code class="ml-10">&lt;ins&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <kbd>Ctrl + S</kbd>
+                    <code class="ml-10">&lt;kbd&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <mark>Highlighted</mark>
+                    <code class="ml-10">&lt;mark&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <ruby>
+                        漢 <rt>kan</rt>
+                        字 <rt>ji</rt>
+                    </ruby>
+                    <code class="ml-10">&lt;ruby&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <s>Strikethrough</s>
+                    <code class="ml-10">&lt;s&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <samp>Sample</samp>
+                    <code class="ml-10">&lt;samp&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    Text <sub>Subscripted</sub>
+                    <code class="ml-10">&lt;sub&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    Text <sup>Superscripted</sup>
+                    <code class="ml-10">&lt;sup&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <time>20:00</time>
+                    <code class="ml-10">&lt;time&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <u>Underline</u>
+                    <code class="ml-10">&lt;u&gt;</code>
+                </div>
+                <div class="column col-3 col-xs-12">
+                    <var>x</var> = <var>y</var> + 2
+                    <code class="ml-10">&lt;var&gt;</code>
+                </div>
+            </div>
+
+            <header class="text-center"><h5>optimized for east asian fonts</h5></header>
+            <p class="text-large text-center"><span lang="zh-Hans">你好</span>, <span lang="ja">こんにちは</span>, <span lang="ko">안녕하세요</span></p>
             <h6>Chinese (Simplified)</h6>
-            <p>革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p>
+            <p lang="zh-Hans">革命不是请客吃饭，不是做文章，不是绘画绣花，不能那样雅致，那样从容不迫，“文质彬彬”，那样“温良恭俭让”。革命就是暴动，是一个阶级推翻一个阶级的暴烈的行动。</p>
+            <h6>Chinese (Tranditional)</h6>
+            <p lang="zh-Hant">山不在高，有仙則名；水不在深，有龍則靈。斯是陋室，惟吾德馨。苔痕上階綠，草色入簾青；談笑有鴻儒，往來無白丁。可以調素琴，閱金經。無絲竹之亂耳，無案牘之勞形。南陽諸葛廬，西蜀子雲亭。孔子云：「何陋之有？」</p>
             <h6>Japanese</h6>
-            <p>祇園精舎の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。</p>
+            <p lang="ja"><u>祇園</u><u>精舎</u>の鐘の声、諸行無常の響きあり。沙羅双樹の花の色、盛者必衰の理をあらはす。おごれる人も久しからず。ただ春の夜の夢のごとし。たけき者も遂にはほろびぬ、ひとへ‌​に風の前の塵に同じ。</p>
             <h6>Korean</h6>
-            <p>나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p>
+            <p lang="ko">나라말이 중국과 달라, 한문・한자와 서로 통하지 아니하므로, 어리석은 백성들이 말하고자 하는 바가 있어도, 끝내 제 뜻을 펴지 못하는 사람이 많다. 내가 이를 불쌍히 여겨, 새로 스물 여덟 글자를 만드니, 사람마다 하여금 쉽게 익혀, 날마다 씀에 편하게 하고자 할 따름이다.</p>
+
+            <section class="notes">
+                <p>Use the attribute <code>lang</code> or add the class <code>cjk</code> to the container element to have better Asian CJK (Chinese, Japanese and Korean) support.</p>
+            </section>
+
+            <!-- asian example -->
+<pre class="code lang-html">
+&lt;<span class="tag">p</span> <span class="atn">class</span>=<span class="atv">&quot;cjk&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
+&lt;<span class="tag">p</span> <span class="atn">lang</span>=<span class="atv">&quot;ja&quot;</span>&gt;祇園精舎の鐘の声、諸行無常の響きあり。……&lt;<span class="tag">/p</span>&gt;
+</pre>
 
             <header class="text-center"><h5>blockquote</h5></header>
             <blockquote>
@@ -1046,12 +1137,12 @@
             </div>
 
             <section class="notes">
-                <p>For responsive video, add a container with the class <code>video-responsive</code>. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>.video-responsive-4-3</code> for 4:3 ratio video container.</p>
+                <p>For responsive video, add a container with the class <code>video-responsive</code>. Insert any YouTube, Youku or other iframe/embed video inside the container. The ratio is 16:9 by default. You may add <code>video-responsive-4-3</code> for 4:3 ratio video container or <code>video-responsive-1-1</code> for 1:1 ratio.</p>
             </section>
             <div class="columns">
                 <div class="column col-6 col-xs-12">
                     <div class="video-responsive">
-                        <iframe src="https://www.youtube.com/embed/vBfBa-gCMQk" width="560" height="315" frameborder="0" allowfullscreen></iframe>
+                        <iframe width="560" height="315" src="https://www.youtube.com/embed/BzMLA8YIgG0" frameborder="0" allowfullscreen></iframe>
                     </div>
                 </div>
             </div>
@@ -1066,7 +1157,7 @@
 &lt;<span class="tag">/figure</span>&gt;
 
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;video-responsive&quot;</span>&gt;
-    &lt;<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">&quot;https://www.youtube.com/embed/vBfBa-gCMQk&quot;</span> <span class="atn">width</span>=<span class="atv">&quot;560&quot;</span> <span class="atn">height</span>=<span class="atv">&quot;315&quot;</span> <span class="atn">frameborder</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">allowfullscreen</span>&gt;&lt;<span class="tag">/iframe</span>&gt;
+    &lt;<span class="tag">iframe</span> <span class="atn">src</span>=<span class="atv">&quot;https://www.youtube.com/embed/BzMLA8YIgG0;</span> <span class="atn">width</span>=<span class="atv">&quot;560&quot;</span> <span class="atn">height</span>=<span class="atv">&quot;315&quot;</span> <span class="atn">frameborder</span>=<span class="atv">&quot;0&quot;</span> <span class="atn">allowfullscreen</span>&gt;&lt;<span class="tag">/iframe</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
 </pre>
 
@@ -1918,12 +2009,12 @@
                                 </div>
                             </div>
                         </li>
+                        <li class="divider"></li>
                         <li class="menu-item">
                             <a href="#menus" class="active">
                                 My profile
                             </a>
                         </li>
-                        <li class="divider"></li>
                         <li class="menu-item">
                             <a href="#menus">
                                 Settings
@@ -2831,6 +2922,8 @@
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-bold&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- Italicized text --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-italic&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- Larger text (120%) --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-large&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 
 <span class="com">&lt;!-- Overflow behavior: display an ellipsis to represent clipped text --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;text-ellipsis&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;