Update Docs SEO

19 files changed, 42 insertions, 41 deletions

diff --git a/docs/src/components/accordions.pug b/docs/src/components/accordions.pug
index a3c8fcf..a03a179 100644
--- a/docs/src/components/accordions.pug
+++ b/docs/src/components/accordions.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'accordions'
   - var parent = 'components'
   - var title = 'Accordions - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('accordions', 'Accordions')
diff --git a/docs/src/components/avatars.pug b/docs/src/components/avatars.pug
index a513648..6714233 100644
--- a/docs/src/components/avatars.pug
+++ b/docs/src/components/avatars.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'avatars'
   - var parent = 'components'
   - var title = 'Avatars - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = 'Avatars are user profile pictures. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 
 block docs-content
   +docs-heading('avatars', 'Avatars')
@@ -14,22 +14,22 @@ block docs-content
 
     .docs-demo.columns
       .column.col-6.col-xs-12
-        figure.avatar.avatar-xl
+        figure.avatar.avatar-xl.mr-2
           img(src="../img/avatar-1.png" alt="Avatar XL")
-        figure.avatar.avatar-lg
+        figure.avatar.avatar-lg.mr-2
           img(src="../img/avatar-2.png" alt="Avatar LG")
-        figure.avatar
+        figure.avatar.mr-2
           img(src="../img/avatar-3.png" alt="Avatar")
-        figure.avatar.avatar-sm
+        figure.avatar.avatar-sm.mr-2
           img(src="../img/avatar-4.png" alt="Avatar SM")
-        figure.avatar.avatar-xs
+        figure.avatar.avatar-xs.mr-2
           img(src="../img/avatar-5.png" alt="Avatar XS")
       .column.col-6.col-xs-12
-        figure.avatar.avatar-xl(data-initial="YZ")
-        figure.avatar.avatar-lg(data-initial="YZ")
-        figure.avatar(data-initial="YZ")
-        figure.avatar.avatar-sm(data-initial="YZ")
-        figure.avatar.avatar-xs(data-initial="YZ")
+        figure.avatar.avatar-xl.mr-2(data-initial="YZ")
+        figure.avatar.avatar-lg.mr-2(data-initial="YZ")
+        figure.avatar.mr-2(data-initial="YZ")
+        figure.avatar.avatar-sm.mr-2(data-initial="YZ")
+        figure.avatar.avatar-xs.mr-2(data-initial="YZ")
 
     p
       | Add the #[code avatar] class to #{'<img>'} element.
@@ -55,18 +55,20 @@ block docs-content
             <img src="img/avatar-1.png" alt="...">
           </figure>
 
+    +docs-subheading('avatars-icons', 'Avatar icons')
+
     .docs-demo.columns
       .column.col-6.col-xs-12
-        figure.avatar.avatar-xl
+        figure.avatar.avatar-xl.mr-2
           img(src="../img/avatar-1.png" alt="Avatar")
           img.avatar-icon(src="../img/avatar-2.png" alt="Avatar")
-        figure.avatar.avatar-lg
+        figure.avatar.avatar-lg.mr-2
           img(src="../img/avatar-2.png" alt="Avatar")
           img.avatar-icon(src="../img/avatar-3.png" alt="Avatar")
-        figure.avatar
+        figure.avatar.mr-2
           img(src="../img/avatar-3.png" alt="Avatar")
           img.avatar-icon(src="../img/avatar-4.png" alt="Avatar")
-        figure.avatar.avatar-sm
+        figure.avatar.avatar-sm.mr-2
           img(src="../img/avatar-4.png" alt="Avatar")
           img.avatar-icon(src="../img/avatar-5.png" alt="Avatar")
         figure.avatar.avatar-xs
@@ -85,15 +87,15 @@ block docs-content
             
     .docs-demo.columns
       .column.col-6.col-xs-12
-        figure.avatar.avatar-xl(data-initial="YZ")
+        figure.avatar.avatar-xl.mr-2(data-initial="YZ")
           i.avatar-presence.online
-        figure.avatar.avatar-lg(data-initial="YZ")
+        figure.avatar.avatar-lg.mr-2(data-initial="YZ")
           i.avatar-presence.busy
-        figure.avatar(data-initial="YZ")
+        figure.avatar.mr-2(data-initial="YZ")
           i.avatar-presence.away
-        figure.avatar.avatar-sm(data-initial="YZ")
+        figure.avatar.avatar-sm.mr-2(data-initial="YZ")
           i.avatar-presence.offline
-        figure.avatar.avatar-xs(data-initial="YZ")
+        figure.avatar.avatar-xs.mr-2(data-initial="YZ")
           i.avatar-presence.online
 
     p
diff --git a/docs/src/components/badges.pug b/docs/src/components/badges.pug
index f6232a2..c87a6a0 100644
--- a/docs/src/components/badges.pug
+++ b/docs/src/components/badges.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'badges'
   - var parent = 'components'
   - var title = 'Badges - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('badges', 'Badges')
diff --git a/docs/src/components/bars.pug b/docs/src/components/bars.pug
index 31d8418..29bc2c8 100644
--- a/docs/src/components/bars.pug
+++ b/docs/src/components/bars.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'bars'
   - var parent = 'components'
   - var title = 'Bars - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('bars', 'Bars')
diff --git a/docs/src/components/breadcrumbs.pug b/docs/src/components/breadcrumbs.pug
index c6f4ffe..d01c445 100644
--- a/docs/src/components/breadcrumbs.pug
+++ b/docs/src/components/breadcrumbs.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'breadcrumbs'
   - var parent = 'components'
   - var title = 'Breadcrumbs - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('breadcrumbs', 'Breadcrumbs')
diff --git a/docs/src/components/cards.pug b/docs/src/components/cards.pug
index 7dbcd83..5917736 100644
--- a/docs/src/components/cards.pug
+++ b/docs/src/components/cards.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'cards'
   - var parent = 'components'
   - var title = 'Cards - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = 'Cards are flexible content containers. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 
 block docs-content
   +docs-heading('cards', 'Cards')
diff --git a/docs/src/components/chips.pug b/docs/src/components/chips.pug
index 18bcf9d..72c3ea7 100644
--- a/docs/src/components/chips.pug
+++ b/docs/src/components/chips.pug
@@ -4,13 +4,13 @@ block variables
   - var slug = 'chips'
   - var parent = 'components'
   - var title = 'Chips - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = 'Chips are complex entities in small blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 
 block docs-content
   +docs-heading('chips', 'Chips')
     include ../_layout/_ad-g.pug
 
-    p Chips are complex entities in small blocks. 
+    p Chips are complex entities in small blocks.
 
     .docs-demo.columns
       .column.col-12
diff --git a/docs/src/components/empty.pug b/docs/src/components/empty.pug
index b23ce8c..51ebadc 100644
--- a/docs/src/components/empty.pug
+++ b/docs/src/components/empty.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'empty'
   - var parent = 'components'
   - var title = 'Empty states - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('empty', 'Empty states')
diff --git a/docs/src/components/menu.pug b/docs/src/components/menu.pug
index e358056..a41a4a5 100644
--- a/docs/src/components/menu.pug
+++ b/docs/src/components/menu.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'menu'
   - var parent = 'components'
   - var title = 'Menu - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('menu', 'Menu')
diff --git a/docs/src/components/modals.pug b/docs/src/components/modals.pug
index f084864..0d92b2b 100644
--- a/docs/src/components/modals.pug
+++ b/docs/src/components/modals.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'modals'
   - var parent = 'components'
   - var title = 'Modals - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = 'Modals are flexible dialog prompts. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 
 block docs-content
   +docs-heading('modals', 'Modals')
diff --git a/docs/src/components/nav.pug b/docs/src/components/nav.pug
index 3ee2097..aa09fed 100644
--- a/docs/src/components/nav.pug
+++ b/docs/src/components/nav.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'nav'
   - var parent = 'components'
   - var title = 'Nav - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('nav', 'Nav')
diff --git a/docs/src/components/pagination.pug b/docs/src/components/pagination.pug
index c20f8b2..dbb4896 100644
--- a/docs/src/components/pagination.pug
+++ b/docs/src/components/pagination.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'pagination'
   - var parent = 'components'
   - var title = 'Pagination - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('pagination', 'Pagination')
diff --git a/docs/src/components/panels.pug b/docs/src/components/panels.pug
index 487b8d4..048f3db 100644
--- a/docs/src/components/panels.pug
+++ b/docs/src/components/panels.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'panels'
   - var parent = 'components'
   - var title = 'Panels - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('panels', 'Panels')
diff --git a/docs/src/components/popovers.pug b/docs/src/components/popovers.pug
index 25bfe20..283b584 100644
--- a/docs/src/components/popovers.pug
+++ b/docs/src/components/popovers.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'popovers'
   - var parent = 'components'
   - var title = 'Popovers - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('popovers', 'Popovers')
diff --git a/docs/src/components/steps.pug b/docs/src/components/steps.pug
index 57f0feb..fcb258d 100644
--- a/docs/src/components/steps.pug
+++ b/docs/src/components/steps.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'steps'
   - var parent = 'components'
   - var title = 'Steps - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('steps', 'Steps')
diff --git a/docs/src/components/tabs.pug b/docs/src/components/tabs.pug
index 27f5644..a9e46a2 100644
--- a/docs/src/components/tabs.pug
+++ b/docs/src/components/tabs.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'tabs'
   - var parent = 'components'
   - var title = 'Tabs - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = 'Tabs enable quick switch between different views. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 
 block docs-content
   +docs-heading('tabs', 'Tabs')
diff --git a/docs/src/components/tiles.pug b/docs/src/components/tiles.pug
index a2e8827..7e86f97 100644
--- a/docs/src/components/tiles.pug
+++ b/docs/src/components/tiles.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'tiles'
   - var parent = 'components'
   - var title = 'Tiles - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = 'Tiles are repeatable or embeddable information blocks. Spectre.css CSS Framework is a lightweight, responsive and modern CSS framework for faster and extensible development.'
 
 block docs-content
   +docs-heading('tiles', 'Tiles')
diff --git a/docs/src/components/toasts.pug b/docs/src/components/toasts.pug
index 718300b..0ed6198 100644
--- a/docs/src/components/toasts.pug
+++ b/docs/src/components/toasts.pug
@@ -4,7 +4,7 @@ block variables
   - var slug = 'toasts'
   - var parent = 'components'
   - var title = 'Toasts - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('toasts', 'Toasts')
diff --git a/docs/src/components/tooltips.pug b/docs/src/components/tooltips.pug
index e9b041e..0ab719e 100644
--- a/docs/src/components/tooltips.pug
+++ b/docs/src/components/tooltips.pug
@@ -4,13 +4,13 @@ block variables
   - var slug = 'tooltips'
   - var parent = 'components'
   - var title = 'Tooltips - Components - Spectre.css CSS Framework'
-  - var description = '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.'
+  - var description = '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.'
 
 block docs-content
   +docs-heading('tooltips', 'Tooltips')
     include ../_layout/_ad-g.pug
 
-    p Tooltips provide context information labels that appear on hover and focus.
+    p Tooltips provide context information labels that appear on hover and focus. Tooltips component is built entirely in CSS.
 
     .docs-demo.columns.text-center
       .column.col-xs-12
@@ -22,7 +22,6 @@ block docs-content
       .column.col-xs-12
         button.btn.btn-primary.tooltip.tooltip-left(data-tooltip="Left Tooltip Text\nMultiline") left tooltip
 
-    p Tooltips component is built entirely in CSS.
     p
       | Add the #[code tooltip] class and the #[code data-tooltip] attribute, which contains the tooltip content, to non self closing elements.
     p