From f224b45928ebe0241bf6a37a0ee332f74b853b19 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Sun, 25 Nov 2018 13:07:56 +0800
Subject: Update Docs SEO

---
 docs/experimentals/autocomplete.html |  8 ++++-
 docs/experimentals/calendars.html    |  8 ++++-
 docs/experimentals/carousels.html    |  9 +++++-
 docs/experimentals/comparison.html   |  9 +++++-
 docs/experimentals/filters.html      | 57 ++++++++++++++++++++----------------
 docs/experimentals/meters.html       |  8 ++++-
 docs/experimentals/off-canvas.html   |  9 +++++-
 docs/experimentals/parallax.html     |  9 +++++-
 docs/experimentals/progress.html     |  8 ++++-
 docs/experimentals/sliders.html      | 10 +++++--
 docs/experimentals/timelines.html    | 10 +++++--
 11 files changed, 108 insertions(+), 37 deletions(-)

(limited to 'docs/experimentals')

diff --git a/docs/experimentals/autocomplete.html b/docs/experimentals/autocomplete.html
index 676af7f..18e2f7a 100644
--- a/docs/experimentals/autocomplete.html
+++ b/docs/experimentals/autocomplete.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="Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. 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/experimentals/autocomplete.html">
+    <meta property="og:title" content="Autocomplete - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. 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/experimentals/calendars.html b/docs/experimentals/calendars.html
index 81ac824..91c4500 100644
--- a/docs/experimentals/calendars.html
+++ b/docs/experimentals/calendars.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="Calendars are designed for date or date range picker and events display. It is made with flex layout. 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/experimentals/calendars.html">
+    <meta property="og:title" content="Calendars - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="Calendars are designed for date or date range picker and events display. It is made with flex layout. 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/experimentals/carousels.html b/docs/experimentals/carousels.html
index 1272ebf..7ec0e21 100644
--- a/docs/experimentals/carousels.html
+++ b/docs/experimentals/carousels.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/experimentals/carousels.html">
+    <meta property="og:title" content="Carousels - Experimentals - 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">
@@ -192,6 +198,7 @@
         <div class="docs-content" id="content">
           <div class="container" id="carousels">
             <h3 class="s-title">Carousels<a class="anchor" href="#carousels" aria-hidden="true">#</a></h3>
+            <p><small class="label label-primary mr-2">CSS ONLY</small></p>
             <div class="docs-ad">
               <div class="hide-md text-center">
                 <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
diff --git a/docs/experimentals/comparison.html b/docs/experimentals/comparison.html
index 2dd8b8b..db3ca79 100644
--- a/docs/experimentals/comparison.html
+++ b/docs/experimentals/comparison.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/experimentals/comparison.html">
+    <meta property="og:title" content="Comparison sliders - Experimentals - 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">
@@ -192,6 +198,7 @@
         <div class="docs-content" id="content">
           <div class="container" id="comparison">
             <h3 class="s-title">Comparison sliders<a class="anchor" href="#comparison" aria-hidden="true">#</a></h3>
+            <p><small class="label label-primary mr-2">CSS ONLY</small></p>
             <div class="docs-ad">
               <div class="hide-md text-center">
                 <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
diff --git a/docs/experimentals/filters.html b/docs/experimentals/filters.html
index 2ca6ccd..72b2399 100644
--- a/docs/experimentals/filters.html
+++ b/docs/experimentals/filters.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/experimentals/filters.html">
+    <meta property="og:title" content="Filters - Experimentals - 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">
@@ -192,6 +198,7 @@
         <div class="docs-content" id="content">
           <div class="container" id="filters">
             <h3 class="s-title">Filters<a class="anchor" href="#filters" aria-hidden="true">#</a></h3>
+            <p><small class="label label-primary mr-2">CSS ONLY</small></p>
             <div class="docs-ad">
               <div class="hide-md text-center">
                 <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
@@ -223,96 +230,96 @@
                     <div class="column col-4 filter-item" data-tag="tag-2">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">Fallout 4</div>
-                          <div class="card-subtitle">Roleplaying</div>
+                          <div class="card-title text-bold">Fallout 4</div>
+                          <div class="card-subtitle text-gray">Roleplaying</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-3">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">Halo 5</div>
-                          <div class="card-subtitle">Shooter</div>
+                          <div class="card-title text-bold">Halo 5</div>
+                          <div class="card-subtitle text-gray">Shooter</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-1">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">Quantum Break</div>
-                          <div class="card-subtitle">Action</div>
+                          <div class="card-title text-bold">Quantum Break</div>
+                          <div class="card-subtitle text-gray">Action</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-4">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">Forza Horizon 3</div>
-                          <div class="card-subtitle">Sports</div>
+                          <div class="card-title text-bold">Forza Horizon 3</div>
+                          <div class="card-subtitle text-gray">Sports</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-2">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">Final Fantasy XV</div>
-                          <div class="card-subtitle">Roleplaying</div>
+                          <div class="card-title text-bold">Final Fantasy XV</div>
+                          <div class="card-subtitle text-gray">Roleplaying</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-4">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">NBA 2K17</div>
-                          <div class="card-subtitle">Sports</div>
+                          <div class="card-title text-bold">NBA 2K17</div>
+                          <div class="card-subtitle text-gray">Sports</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-3">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">Battlefield 1</div>
-                          <div class="card-subtitle">Shooter</div>
+                          <div class="card-title text-bold">Battlefield 1</div>
+                          <div class="card-subtitle text-gray">Shooter</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-1">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">GTA V</div>
-                          <div class="card-subtitle">Action</div>
+                          <div class="card-title text-bold">GTA V</div>
+                          <div class="card-subtitle text-gray">Action</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-4">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">FIFA 17</div>
-                          <div class="card-subtitle">Sports</div>
+                          <div class="card-title text-bold">FIFA 17</div>
+                          <div class="card-subtitle text-gray">Sports</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-3">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">Overwatch</div>
-                          <div class="card-subtitle">Shooter</div>
+                          <div class="card-title text-bold">Overwatch</div>
+                          <div class="card-subtitle text-gray">Shooter</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-3">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">Titanfall 2</div>
-                          <div class="card-subtitle">Shooter</div>
+                          <div class="card-title text-bold">Titanfall 2</div>
+                          <div class="card-subtitle text-gray">Shooter</div>
                         </div>
                       </div>
                     </div>
                     <div class="column col-4 filter-item" data-tag="tag-3">
                       <div class="card">
                         <div class="card-header">
-                          <div class="card-title">Gears of Wars 4</div>
-                          <div class="card-subtitle">Shooter</div>
+                          <div class="card-title text-bold">Gears of Wars 4</div>
+                          <div class="card-subtitle text-gray">Shooter</div>
                         </div>
                       </div>
                     </div>
diff --git a/docs/experimentals/meters.html b/docs/experimentals/meters.html
index b7f2c60..24118dc 100644
--- a/docs/experimentals/meters.html
+++ b/docs/experimentals/meters.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="Meters represent 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/experimentals/meters.html">
+    <meta property="og:title" content="Meters - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="Meters represent 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/experimentals/off-canvas.html b/docs/experimentals/off-canvas.html
index bc896cf..703fca0 100644
--- a/docs/experimentals/off-canvas.html
+++ b/docs/experimentals/off-canvas.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="The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure 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/experimentals/off-canvas.html">
+    <meta property="og:title" content="Off-canvas - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Off-canvas is a navigation layout that the sidebar can slide in and out of the viewport. It is built in pure 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">
@@ -192,6 +198,7 @@
         <div class="docs-content" id="content">
           <div class="container" id="off-canvas">
             <h3 class="s-title">Off-canvas<a class="anchor" href="#off-canvas" aria-hidden="true">#</a></h3>
+            <p><small class="label label-primary mr-2">CSS ONLY</small></p>
             <div class="docs-ad">
               <div class="hide-md text-center">
                 <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
diff --git a/docs/experimentals/parallax.html b/docs/experimentals/parallax.html
index b72dd7c..1ffa6e3 100644
--- a/docs/experimentals/parallax.html
+++ b/docs/experimentals/parallax.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="The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure 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/experimentals/parallax.html">
+    <meta property="og:title" content="Parallax - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Parallax component acts like Apple TV/tvOS hover parallax effect. It is built in pure 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">
@@ -192,6 +198,7 @@
         <div class="docs-content" id="content">
           <div class="container" id="parallax">
             <h3 class="s-title">Parallax<a class="anchor" href="#parallax" aria-hidden="true">#</a></h3>
+            <p><small class="label label-primary mr-2">CSS ONLY</small></p>
             <div class="docs-ad">
               <div class="hide-md text-center">
                 <script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
diff --git a/docs/experimentals/progress.html b/docs/experimentals/progress.html
index 4f148b4..686dcf2 100644
--- a/docs/experimentals/progress.html
+++ b/docs/experimentals/progress.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="The Progress indicates the progress completion of a task. 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/experimentals/progress.html">
+    <meta property="og:title" content="Progress - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Progress indicates the progress completion of a task. 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/experimentals/sliders.html b/docs/experimentals/sliders.html
index 411f57a..cd979a6 100644
--- a/docs/experimentals/sliders.html
+++ b/docs/experimentals/sliders.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="The Sliders are for selecting values from ranges. 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/experimentals/sliders.html">
+    <meta property="og:title" content="Sliders - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Sliders are for selecting values from ranges. 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>Sliders are for selecting values from ranges.</p>
+            <p>The Sliders are for selecting values from ranges.</p>
             <p>You can add the class <code>tooltip</code> to have tooltip labels.
               If no <code>data-tooltip</code> is set, the <code>value</code> will be used instead.
             </p>
diff --git a/docs/experimentals/timelines.html b/docs/experimentals/timelines.html
index 36b67b4..b69413f 100644
--- a/docs/experimentals/timelines.html
+++ b/docs/experimentals/timelines.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="The Timelines are ordered sequences of activities. 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/experimentals/timelines.html">
+    <meta property="og:title" content="Timelines - Experimentals - Spectre.css CSS Framework">
+    <meta property="og:description" content="The Timelines are ordered sequences of activities. 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>Timelines are ordered sequences of activities.</p>
+            <p>The Timelines are ordered sequences of activities.</p>
             <div class="docs-demo columns">
               <div class="column col-9 col-sm-12">
                 <div class="timeline">
-- 
cgit v1.3.1-26-gb76a