Merge pull request #136 from picturepan2/hotfix/fixes v0.1.32

Hotfix/fixes

1 files changed, 227 insertions, 134 deletions

diff --git a/index.html b/index.html
index 9ce5b14..a1215b4 100644
--- a/index.html
+++ b/index.html
@@ -18,7 +18,7 @@
         .bg-grey {
             background-color: #efefef;
             padding: 1rem .5rem;
-            border-radius: .3rem;
+            border-radius: .2rem;
         }
         .navbar-brand {
           font-size: 2rem;
@@ -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,16 +182,16 @@
         <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>
             <h1>H1 Title <small class="label">5rem</small></h1>
             <h2>H2 Title <small class="label">4rem</small></h2>
-            <h3>H3 Title <small class="label">3rem</small></h3>
-            <h4>H4 Title <small class="label">2.4rem</small></h4>
-            <h5>H5 Title <small class="label">2rem</small></h5>
-            <h6>H6 Title <small class="label">1.6rem</small></h6>
+            <h3>H3 Title <span class="label">3rem</span></h3>
+            <h4>H4 Title <span class="label">2.4rem</span></h4>
+            <h5>H5 Title <span class="label">2rem</span></h5>
+            <h6>H6 Title <span class="label">1.6rem</span></h6>
 
             <!-- headings example -->
 <pre class="code lang-html">
@@ -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>
@@ -462,9 +553,9 @@
             <div class="columns">
                 <div class="column col-xs-12">
                     <div class="btn-group">
-                        <button class="btn">first button</button>
-                        <button class="btn">second button</button>
-                        <button class="btn">third button</button>
+                        <button class="btn tooltip" data-tooltip="Lorem ipsum">first button</button>
+                        <button class="btn tooltip" data-tooltip="Lorem ipsum">second button</button>
+                        <button class="btn tooltip" data-tooltip="Lorem ipsum">third button</button>
                     </div>
                 </div>
                 <div class="column col-xs-12">
@@ -485,9 +576,9 @@
                 </div>
                 <div class="column col-xs-12">
                     <div class="btn-group btn-group-block">
-                        <button class="btn btn-primary active">first button</button>
-                        <button class="btn btn-primary">second button</button>
-                        <button class="btn btn-primary">third button</button>
+                        <button class="btn btn-primary btn-sm active">first button</button>
+                        <button class="btn btn-primary btn-sm">second button</button>
+                        <button class="btn btn-primary btn-sm">third button</button>
                     </div>
                 </div>
             </div>
@@ -510,7 +601,6 @@
             <header class="text-center"><h4>forms</h4></header>
             <section class="notes">
                 <p><strong>Forms</strong> provide the most common control styles used in forms, including label, input, textarea, select, checkbox, radio and switch.  </p>
-                <p></p>
             </section>
             <div class="columns">
                 <div class="column col-6 col-xs-12">
@@ -534,12 +624,6 @@
                                 <i class="form-icon"></i> Female
                             </label>
                         </div>
-                        <div class="form-group hide">
-                            <label class="form-file">
-                                <input type="file" id="file">
-                                <span class="file-custom"></span>
-                            </label>
-                        </div>
                         <div class="form-group">
                             <select class="form-select">
                                 <option>Choose an option</option>
@@ -665,8 +749,7 @@
                         <div class="form-group">
                             <div class="col-3"></div>
                             <div class="col-9">
-                                <select class="form-select">
-                                    <option>Choose an option</option>
+                                <select class="form-select" multiple>
                                     <option>Slack</option>
                                     <option>Skype</option>
                                     <option>Hipchat</option>
@@ -816,16 +899,6 @@
                                 <progress class="progress" value="50" max="100"></progress>
                             </div>
                         </div>
-                        <div class="form-group">
-                            <div class="col-3"></div>
-                            <div class="col-9">
-                                <select class="form-select" multiple>
-                                    <option>Slack</option>
-                                    <option>Skype</option>
-                                    <option>Hipchat</option>
-                                </select>
-                            </div>
-                        </div>
                     </form>
                 </div>
             </div>
@@ -1064,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>
@@ -1084,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>
 
@@ -1555,62 +1628,71 @@
             <div class="columns">
                 <div class="column col-xs-12">
                     <div class="chip-sm">
-                        <span class="chip-name">Crime</span>
+                        Crime
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip-sm">
-                        <i class="icon icon-favorite_border"></i>
-                        <span class="chip-name">Drama</span>
+                        Drama
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip-sm">
-                        <span class="chip-name">Biography</span>
+                        Biography
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip-sm">
-                        <span class="chip-name">Mystery</span>
+                        Mystery
                         <button class="btn btn-clear"></button>
                     </div>
                 </div>
                 <div class="column col-xs-12">
                     <div class="chip-sm">
-                        <img src="demo/img/avatar-1.png" class="avatar" />
-                        <span class="chip-name">Tony Stark</span>
+                        <figure class="avatar" data-initial="TS" style="background-color: #5764c6;"></figure>
+                        Tony Stark
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip-sm">
-                        <img src="demo/img/avatar-2.png" class="avatar" />
-                        <span class="chip-name">Thor Odinson</span>
+                        <img src="demo/img/avatar-1.png" class="avatar" />
+                        Thor Odinson
                         <button class="btn btn-clear"></button>
                     </div>
                     <div class="chip-sm">
                         <img src="demo/img/avatar-4.png" class="avatar" />
-                        <span class="chip-name">Steve Rogers</span>
-                        <button class="btn btn-clear"></button>
+                        Steve Rogers
                     </div>
                 </div>
             </div>
 
             <section class="notes">
-                <p>Add a container element with the class <code>chip</code>. And add child text elements with <code>chip-name</code> or icons with  <code>icon</code>.</p>
+                <p>Add a container element with the class <code>chip-sm</code>. And add child text element, buttons or avatars with the class <code>avatar</code>.</p>
             </section>
 
+            <div class="columns hide">
+                <div class="column col-4 col-xs-12">
+                    <div class="chip">
+                        <div class="chip-icon">
+                            <img src="demo/img/avatar-1.png" class="avatar" />
+                        </div>
+                        <div class="chip-content">
+                            <div class="chip-title">Tony Stark</div>
+                            <div class="chip-meta">Iron man</div>
+                        </div>
+                        <div class="chip-action">
+                            <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- chips example -->
 <pre class="code lang-html">
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm&quot;</span>&gt;
-    &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip-name&quot;</span>&gt;Crime&lt;<span class="tag">/span</span>&gt;
-    &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
-&lt;<span class="tag">/div</span>&gt;
-
-&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm&quot;</span>&gt;
-    &lt;<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">&quot;icon icon-favorite_border&quot;</span>&gt;&lt;<span class="tag">/i</span>&gt;
-    &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip-name&quot;</span>&gt;Drama&lt;<span class="tag">/span</span>&gt;
+    Crime
     &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
 
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm&quot;</span>&gt;
     &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
-    &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip-name&quot;</span>&gt;Yan Zhu&lt;<span class="tag">/span</span>&gt;
+    Yan Zhu
     &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
 </pre>
@@ -1628,28 +1710,26 @@
                         <div class="form-autocomplete">
                             <div class="form-autocomplete-input">
                                 <div class="chip-sm">
-                                    <img src="demo/img/avatar-1.png" class="avatar" />
-                                    <span class="chip-name">Tony Stark</span>
+                                    <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure>
+                                    Tony Stark
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
-                                    <img src="demo/img/avatar-2.png" class="avatar" />
-                                    <span class="chip-name">Thor Odinson</span>
+                                    <img src="demo/img/avatar-1.png" class="avatar" />
+                                    Thor Odinson
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
                                     <img src="demo/img/avatar-4.png" class="avatar" />
-                                    <span class="chip-name">Steve Rogers</span>
+                                    Steve Rogers
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
-                                    <img src="demo/img/avatar-1.png" class="avatar" />
-                                    <span class="chip-name">Bruce Banner</span>
+                                    Bruce Banner
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm selected">
-                                    <img src="demo/img/avatar-2.png" class="avatar" />
-                                    <span class="chip-name">Natasha Romanoff</span>
+                                    Natasha Romanoff
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <input class="form-input" type="text" placeholder="" />
@@ -1660,23 +1740,23 @@
                         <div class="form-autocomplete">
                             <div class="form-autocomplete-input">
                                 <div class="chip-sm">
-                                    <span class="chip-name">Tony Stark</span>
+                                    Tony Stark
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
-                                    <span class="chip-name">Thor Odinson</span>
+                                    Thor Odinson
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
-                                    <span class="chip-name">Steve Rogers</span>
+                                    Steve Rogers
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
-                                    <span class="chip-name">Bruce Banner</span>
+                                    Bruce Banner
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm selected">
-                                    <span class="chip-name">Natasha Romanoff</span>
+                                    Natasha Romanoff
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <input class="form-input" type="text" placeholder="" />
@@ -1689,37 +1769,38 @@
                         <div class="form-autocomplete">
                             <div class="form-autocomplete-input">
                                 <div class="chip-sm">
-                                    <img src="demo/img/avatar-1.png" class="avatar" />
-                                    <span class="chip-name">Tony Stark</span>
+                                    Bruce Banner
                                     <button class="btn btn-clear"></button>
                                 </div>
                                 <div class="chip-sm">
-                                    <img src="demo/img/avatar-2.png" class="avatar" />
-                                    <span class="chip-name">Thor Odinson</span>
+                                    <img src="demo/img/avatar-1.png" class="avatar" />
+                                    Thor Odinson
                                     <button class="btn btn-clear"></button>
                                 </div>
-                                <input class="form-input" type="text" placeholder="typing here" />
+                                <input class="form-input" type="text" placeholder="typing here" value="S" />
                             </div>
-                            <ul class="form-autocomplete-list">
-                                <li class="form-autocomplete-item">
-                                    <div class="chip hand">
-                                        <div class="chip-icon">
-                                            <img src="demo/img/avatar-4.png" class="avatar" />
-                                        </div>
-                                        <div class="chip-content">
-                                            Steve Rogers
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="form-autocomplete-item">
-                                    <div class="chip hand">
-                                        <div class="chip-icon">
-                                            <img src="demo/img/avatar-2.png" class="avatar" />
+                            <ul class="menu">
+                                <li class="menu-item">
+                                    <a href="#autocomplete">
+                                        <div class="chip">
+                                            <div class="chip-icon">
+                                                <img src="demo/img/avatar-4.png" class="avatar" />
+                                            </div>
+                                            <div class="chip-content">
+                                                Steve Rogers
+                                            </div>
                                         </div>
-                                        <div class="chip-content">
-                                            Yan Zhu
+                                    </a>
+                                    <a href="#autocomplete">
+                                        <div class="chip">
+                                            <div class="chip-icon">
+                                                <figure class="avatar" data-initial="TS" style="background-color: #A2A8E1;"></figure>
+                                            </div>
+                                            <div class="chip-content">
+                                                Tony Stark
+                                            </div>
                                         </div>
-                                    </div>
+                                    </a>
                                 </li>
                             </ul>
                         </div>
@@ -1727,7 +1808,8 @@
                 </div>
             </div>
             <section class="notes">
-                <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is  <code>form-autocomplete-input</code>, another is <code>form-autocomplete-list</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below. </p>
+                <p>Add a container element with the class <code>form-autocomplete</code>. There are 2 parts of it, one is  <code>form-autocomplete-input</code>, another is <code>menu</code> component. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the autocomplete. </p>
+                <p>The autocomplete HTML structure is exampled below.</p>
             </section>
 
             <!-- autocomplete example -->
@@ -1738,39 +1820,43 @@
         <span class="com">&lt;!-- autocomplete chips --&gt;</span>
         &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm&quot;</span>&gt;
             &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-1.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
-            &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip-name&quot;</span>&gt;Yan Zhu&lt;<span class="tag">/span</span>&gt;
+            Yan Zhu
             &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
         &lt;<span class="tag">/div</span>&gt;
         &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-sm selected&quot;</span>&gt;
             &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-2.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
-            &lt;<span class="tag">span</span> <span class="atn">class</span>=<span class="atv">&quot;chip-name&quot;</span>&gt;Yan Zhu&lt;<span class="tag">/span</span>&gt;
+            Yan Zhu
             &lt;<span class="tag">button</span> <span class="atn">class</span>=<span class="atv">&quot;btn btn-clear&quot;</span>&gt;&lt;<span class="tag">/button</span>&gt;
         &lt;<span class="tag">/div</span>&gt;
         <span class="com">&lt;!-- autocomplete real input box --&gt;</span>
         &lt;<span class="tag">input</span> <span class="atn">class</span>=<span class="atv">&quot;form-input&quot;</span> <span class="atn">type</span>=<span class="atv">&quot;text&quot;</span> <span class="atn">placeholder</span>=<span class="atv">&quot;typing here&quot;</span> /&gt;
     &lt;<span class="tag">/div</span>&gt;
     <span class="com">&lt;!-- autocomplete suggestion list --&gt;</span>
-    &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-list&quot;</span>&gt;
-        <span class="com">&lt;!-- autocomplete list chips --&gt;</span>
-        &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-item&quot;</span>&gt;
-            &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip hand&quot;</span>&gt;
-                &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-icon&quot;</span>&gt;
-                    &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
+    &lt;<span class="tag">ul</span> <span class="atn">class</span>=<span class="atv">&quot;menu&quot;</span>&gt;
+        <span class="com">&lt;!-- menu list chips --&gt;</span>
+        &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
+            &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+                &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
+                    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-icon&quot;</span>&gt;
+                        &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-4.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
+                    &lt;<span class="tag">/div</span>&gt;
+                    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-content&quot;</span>&gt;
+                        Steve Rogers
+                    &lt;<span class="tag">/div</span>&gt;
                 &lt;<span class="tag">/div</span>&gt;
-                &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-content&quot;</span>&gt;
-                    Steve Rogers
-                &lt;<span class="tag">/div</span>&gt;
-            &lt;<span class="tag">/div</span>&gt;
+            &lt;<span class="tag">/a</span>&gt;
         &lt;<span class="tag">/li</span>&gt;
-        &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;form-autocomplete-item&quot;</span>&gt;
-            &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip hand&quot;</span>&gt;
-                &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-icon&quot;</span>&gt;
-                    &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
-                &lt;<span class="tag">/div</span>&gt;
-                &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-content&quot;</span>&gt;
-                    Yan Zhu
+        &lt;<span class="tag">li</span> <span class="atn">class</span>=<span class="atv">&quot;menu-item&quot;</span>&gt;
+            &lt;<span class="tag">a</span> <span class="atn">href</span>=<span class="atv">&quot;#&quot;</span>&gt;
+                &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip&quot;</span>&gt;
+                    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-icon&quot;</span>&gt;
+                        &lt;<span class="tag">img</span> <span class="atn">src</span>=<span class="atv">&quot;img/avatar-3.png&quot;</span> <span class="atn">class</span>=<span class="atv">&quot;avatar&quot;</span> /&gt;
+                    &lt;<span class="tag">/div</span>&gt;
+                    &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;chip-content&quot;</span>&gt;
+                        Yan Zhu
+                    &lt;<span class="tag">/div</span>&gt;
                 &lt;<span class="tag">/div</span>&gt;
-            &lt;<span class="tag">/div</span>&gt;
+            &lt;<span class="tag">/a</span>&gt;
         &lt;<span class="tag">/li</span>&gt;
     &lt;<span class="tag">/ul</span>&gt;
 &lt;<span class="tag">/div</span>&gt;
@@ -1832,7 +1918,7 @@
                     </span>
                 </div>
                 <div class="column col-xs-6">
-                    <span class="badge" data-badge="♀">
+                    <span class="badge" data-badge="…">
                         Notifications
                     </span>
                 </div>
@@ -1858,7 +1944,6 @@
             <div class="columns">
                 <div class="column col-sm-12 col-6">
                     <div class="toast">
-                        <a class="btn btn-clear float-right"></a>
                         <i class="icon icon-error_outline"></i> Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                     </div>
                 </div>
@@ -1922,17 +2007,14 @@
                                 <div class="chip-content">
                                     Steve Rogers
                                 </div>
-                                <div class="chip-action">
-
-                                </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
@@ -2064,7 +2146,7 @@
                 </div>
                 <div class="column col-xs-6">
                     <div class="dropdown">
-                        <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button</a>
+                        <a class="btn btn-primary dropdown-toggle" tabindex="0">dropdown button <i class="icon-caret"></i></a>
                         <ul class="menu">
                             <li class="menu-item">
                                 <a href="#dropdowns">
@@ -2330,6 +2412,7 @@
                     </ul>
                 </div>
             </div>
+
             <section class="notes">
                 <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p>
             </section>
@@ -2405,7 +2488,7 @@
                 </div>
             </div>
             <section class="notes">
-                <p>Add a container element with the class <code>pagination</code>. And add child elements with the classname <code>page-item</code>.</p>
+                <p>Add a container element with the class <code>pagination</code>. And add child elements with the classname <code>page-item</code>. The <code>page-item</code> with the class <code>active</code> will be highlighted.</p>
             </section>
 
             <!-- pagination example -->
@@ -2679,7 +2762,15 @@
                             An immersive, three-day experience focused on exploring the next generation of technology, mobile and beyond.
                         </div>
                         <div class="card-footer">
-                            <a href="#" class="btn btn-primary">Add to calendar</a>
+                            <div class="chip">
+                                <div class="chip-content">
+                                    <div class="chip-title">Google</div>
+                                    <div class="chip-meta">Software and hardware</div>
+                                </div>
+                                <div class="chip-action">
+                                    <button class="btn btn-primary"><i class="icon icon-playlist_add"></i></button>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -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;
@@ -2895,9 +2988,9 @@
     <footer class="bg-grey">
         <section id="copyright" class="grid-footer container grid-960">
             <p>
-                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.31
+                <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.32
             </p>
-            <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
+            <p>Designed and built with ♥ by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p>
         </section>
     </footer>
     <script>