Update Docs SEO

19 files changed, 155 insertions, 41 deletions

diff --git a/docs/components/accordions.html b/docs/components/accordions.html
index 19d5ba6..09fba40 100644
--- a/docs/components/accordions.html
+++ b/docs/components/accordions.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/accordions.html">
+    <meta property="og:title" content="Accordions - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Accordions are used to toggle sections of content. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/avatars.html b/docs/components/avatars.html
index 34f3ee7..5e7d9b5 100644
--- a/docs/components/avatars.html
+++ b/docs/components/avatars.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/avatars.html">
+    <meta property="og:title" content="Avatars - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
@@ -206,18 +212,18 @@
             <p>Avatars are user profile pictures. </p>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
-                <figure class="avatar avatar-xl"><img src="../img/avatar-1.png" alt="Avatar XL"></figure>
-                <figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar LG"></figure>
-                <figure class="avatar"><img src="../img/avatar-3.png" alt="Avatar"></figure>
-                <figure class="avatar avatar-sm"><img src="../img/avatar-4.png" alt="Avatar SM"></figure>
-                <figure class="avatar avatar-xs"><img src="../img/avatar-5.png" alt="Avatar XS"></figure>
+                <figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar XL"></figure>
+                <figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar LG"></figure>
+                <figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar SM"></figure>
+                <figure class="avatar avatar-xs mr-2"><img src="../img/avatar-5.png" alt="Avatar XS"></figure>
               </div>
               <div class="column col-6 col-xs-12">
-                <figure class="avatar avatar-xl" data-initial="YZ"></figure>
-                <figure class="avatar avatar-lg" data-initial="YZ"></figure>
-                <figure class="avatar" data-initial="YZ"></figure>
-                <figure class="avatar avatar-sm" data-initial="YZ"></figure>
-                <figure class="avatar avatar-xs" data-initial="YZ"></figure>
+                <figure class="avatar avatar-xl mr-2" data-initial="YZ"></figure>
+                <figure class="avatar avatar-lg mr-2" data-initial="YZ"></figure>
+                <figure class="avatar mr-2" data-initial="YZ"></figure>
+                <figure class="avatar avatar-sm mr-2" data-initial="YZ"></figure>
+                <figure class="avatar avatar-xs mr-2" data-initial="YZ"></figure>
               </div>
             </div>
             <p>Add the <code>avatar</code> class to &lt;img&gt; element.
@@ -241,12 +247,13 @@
   <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"img/avatar-1.png"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">"..."</span>&gt;</span>
 <span class="hljs-tag">&lt;/<span class="hljs-name">figure</span>&gt;</span>
 </code></pre>
+            <h4 class="s-subtitle" id="avatars-icons">Avatar icons<a class="anchor" href="#avatars-icons" aria-hidden="true">#</a></h4>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
-                <figure class="avatar avatar-xl"><img src="../img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-2.png" alt="Avatar"></figure>
-                <figure class="avatar avatar-lg"><img src="../img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-3.png" alt="Avatar"></figure>
-                <figure class="avatar"><img src="../img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-4.png" alt="Avatar"></figure>
-                <figure class="avatar avatar-sm"><img src="../img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-5.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-xl mr-2"><img src="../img/avatar-1.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-2.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-lg mr-2"><img src="../img/avatar-2.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-3.png" alt="Avatar"></figure>
+                <figure class="avatar mr-2"><img src="../img/avatar-3.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-4.png" alt="Avatar"></figure>
+                <figure class="avatar avatar-sm mr-2"><img src="../img/avatar-4.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-5.png" alt="Avatar"></figure>
                 <figure class="avatar avatar-xs"><img src="../img/avatar-5.png" alt="Avatar"><img class="avatar-icon" src="../img/avatar-1.png" alt="Avatar"></figure>
               </div>
             </div>
@@ -258,11 +265,11 @@
             <h4 class="s-subtitle" id="avatars-presence">Avatar presence<a class="anchor" href="#avatars-presence" aria-hidden="true">#</a></h4>
             <div class="docs-demo columns">
               <div class="column col-6 col-xs-12">
-                <figure class="avatar avatar-xl" data-initial="YZ"><i class="avatar-presence online"></i></figure>
-                <figure class="avatar avatar-lg" data-initial="YZ"><i class="avatar-presence busy"></i></figure>
-                <figure class="avatar" data-initial="YZ"><i class="avatar-presence away"></i></figure>
-                <figure class="avatar avatar-sm" data-initial="YZ"><i class="avatar-presence offline"></i></figure>
-                <figure class="avatar avatar-xs" data-initial="YZ"><i class="avatar-presence online"></i></figure>
+                <figure class="avatar avatar-xl mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure>
+                <figure class="avatar avatar-lg mr-2" data-initial="YZ"><i class="avatar-presence busy"></i></figure>
+                <figure class="avatar mr-2" data-initial="YZ"><i class="avatar-presence away"></i></figure>
+                <figure class="avatar avatar-sm mr-2" data-initial="YZ"><i class="avatar-presence offline"></i></figure>
+                <figure class="avatar avatar-xs mr-2" data-initial="YZ"><i class="avatar-presence online"></i></figure>
               </div>
             </div>
             <p>
diff --git a/docs/components/badges.html b/docs/components/badges.html
index 635d290..efde900 100644
--- a/docs/components/badges.html
+++ b/docs/components/badges.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/badges.html">
+    <meta property="og:title" content="Badges - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Badges are often used as unread number indicators. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/bars.html b/docs/components/bars.html
index cf6eca9..8a54514 100644
--- a/docs/components/bars.html
+++ b/docs/components/bars.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/bars.html">
+    <meta property="og:title" content="Bars - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Bars represent the progress of a task or the value within the known range.Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/breadcrumbs.html b/docs/components/breadcrumbs.html
index a3be7eb..fb9a06a 100644
--- a/docs/components/breadcrumbs.html
+++ b/docs/components/breadcrumbs.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Breadcrumbs are used as navigational hierarchies to indicate current location. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/breadcrumbs.html">
+    <meta property="og:title" content="Breadcrumbs - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Breadcrumbs are used as navigational hierarchies to indicate current location. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/cards.html b/docs/components/cards.html
index cc024d0..44afb6a 100644
--- a/docs/components/cards.html
+++ b/docs/components/cards.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/cards.html">
+    <meta property="og:title" content="Cards - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/chips.html b/docs/components/chips.html
index 9727d94..d289f21 100644
--- a/docs/components/chips.html
+++ b/docs/components/chips.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Chips are complex entities in small blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/chips.html">
+    <meta property="og:title" content="Chips - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Chips are complex entities in small blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
@@ -203,7 +209,7 @@
                 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
               </div>
             </div>
-            <p>Chips are complex entities in small blocks. </p>
+            <p>Chips are complex entities in small blocks.</p>
             <div class="docs-demo columns">
               <div class="column col-12"><span class="chip">Crime</span><span class="chip">Drama</span><span class="chip">Biography<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span><span class="chip">Mystery<a class="btn btn-clear" href="#" aria-label="Close" role="button"></a></span></div>
               <div class="column col-12">
diff --git a/docs/components/empty.html b/docs/components/empty.html
index 3e66616..3211c9b 100644
--- a/docs/components/empty.html
+++ b/docs/components/empty.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/empty.html">
+    <meta property="og:title" content="Empty states - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Empty states/blank slates are commonly used as placeholders for first time use, empty data and error screens. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/menu.html b/docs/components/menu.html
index 175f1b4..fdca85d 100644
--- a/docs/components/menu.html
+++ b/docs/components/menu.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Menus are vertical list of links or buttons for actions and navigation. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/menu.html">
+    <meta property="og:title" content="Menu - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Menus are vertical list of links or buttons for actions and navigation. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/modals.html b/docs/components/modals.html
index db9dded..62250a2 100644
--- a/docs/components/modals.html
+++ b/docs/components/modals.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Modals are flexible dialog prompts. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/modals.html">
+    <meta property="og:title" content="Modals - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Modals are flexible dialog prompts. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/nav.html b/docs/components/nav.html
index 9b0c6e2..d46320e 100644
--- a/docs/components/nav.html
+++ b/docs/components/nav.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/nav.html">
+    <meta property="og:title" content="Nav - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/pagination.html b/docs/components/pagination.html
index 8d15dfe..3769784 100644
--- a/docs/components/pagination.html
+++ b/docs/components/pagination.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/pagination.html">
+    <meta property="og:title" content="Pagination - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/panels.html b/docs/components/panels.html
index 3283664..fe42ae3 100644
--- a/docs/components/panels.html
+++ b/docs/components/panels.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Panels are flexible view container with auto-expand content section. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/panels.html">
+    <meta property="og:title" content="Panels - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Panels are flexible view container with auto-expand content section. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/popovers.html b/docs/components/popovers.html
index d4d2ad9..3bd6b5e 100644
--- a/docs/components/popovers.html
+++ b/docs/components/popovers.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Popovers are small overlay content containers. Popovers component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/popovers.html">
+    <meta property="og:title" content="Popovers - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Popovers are small overlay content containers. Popovers component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/steps.html b/docs/components/steps.html
index f8c08e9..21aecc8 100644
--- a/docs/components/steps.html
+++ b/docs/components/steps.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Steps are progress indicators of a sequence of task steps. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/steps.html">
+    <meta property="og:title" content="Steps - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Steps are progress indicators of a sequence of task steps. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/tabs.html b/docs/components/tabs.html
index 1a25685..91fe9bd 100644
--- a/docs/components/tabs.html
+++ b/docs/components/tabs.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/tabs.html">
+    <meta property="og:title" content="Tabs - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/tiles.html b/docs/components/tiles.html
index 9d71d81..9188beb 100644
--- a/docs/components/tiles.html
+++ b/docs/components/tiles.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/tiles.html">
+    <meta property="og:title" content="Tiles - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/toasts.html b/docs/components/toasts.html
index 8e65dc2..180f51a 100644
--- a/docs/components/toasts.html
+++ b/docs/components/toasts.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Toasts are used to show alert or information to users. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/toasts.html">
+    <meta property="og:title" content="Toasts - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Toasts are used to show alert or information to users. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
diff --git a/docs/components/tooltips.html b/docs/components/tooltips.html
index f310d8f..80b32fd 100644
--- a/docs/components/tooltips.html
+++ b/docs/components/tooltips.html
@@ -6,8 +6,14 @@
     <meta name="robots" content="index, follow">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
     <meta http-equiv="x-ua-compatible" content="ie=edge">
-    <meta name="description" content="Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.">
+    <meta name="description" content="Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
     <meta name="author" content="Yan Zhu">
+    <meta property="og:url" content="https://picturepan2.github.io/spectre/components/tooltips.html">
+    <meta property="og:title" content="Tooltips - Components - Spectre.css CSS Framework">
+    <meta property="og:description" content="Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.">
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:site" content="@spectrecss">
+    <meta name="twitter:creator" content="@picturepan2">
     <link rel="shortcut icon" href="../img/favicons/favicon.ico">
     <link rel="icon" href="../img/favicons/favicon.png">
     <link rel="stylesheet" href="../dist/spectre.min.css">
@@ -203,7 +209,7 @@
                 <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
               </div>
             </div>
-            <p>Tooltips provide context information labels that appear on hover and focus.</p>
+            <p>Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.</p>
             <div class="docs-demo columns text-center">
               <div class="column col-xs-12">
                 <button class="btn btn-primary tooltip" data-tooltip="Top Tooltip Text">top tooltip</button>
@@ -219,7 +225,6 @@
 Multiline">left tooltip</button>
               </div>
             </div>
-            <p>Tooltips component is built entirely in CSS.</p>
             <p>Add the <code>tooltip</code> class and the <code>data-tooltip</code> attribute, which contains the tooltip content, to non self closing elements.</p>
             <p>And add the <code>tooltip-right</code>, <code>tooltip-bottom</code> or <code>tooltip-left</code> class to define the position of a tooltip.
               By default, the tooltip appears above the element.