From 38962f94d497a40435862d187f30b04f2b68205d Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 15 Aug 2017 12:16:53 +0800
Subject: Improve Docs homepage

---
 docs/components.html | 94 ++++++++++++++++++++++++++--------------------------
 1 file changed, 47 insertions(+), 47 deletions(-)

(limited to 'docs/components.html')

diff --git a/docs/components.html b/docs/components.html
index ea1bbdf..a61a3bd 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -6,7 +6,7 @@
   <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="author" content="https://github.com/picturepan2/" />
-  <title>Components - Spectre.css</title>
+  <title>Components - Spectre.css CSS Framework</title>
   <link rel="stylesheet" href="dist/spectre.css" />
   <link rel="stylesheet" href="dist/spectre-icons.css" />
   <link rel="stylesheet" href="css/docs.css" />
@@ -15,8 +15,8 @@
   <div class="s-container container">
     <div class="columns">
       <div class="s-brand">
-        <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css" >
-          <img src="img/spectre-logo.svg" alt="Spectre.css"/>
+        <a href="index.html" class="s-logo tooltip tooltip-bottom" data-tooltip="Spectre.css CSS Framework">
+          <img src="img/spectre-logo.svg" alt="Spectre.css CSS Framework" />
           <h2>Spectre.css</h2>
         </a>
         <div class="menu-btn">
@@ -253,7 +253,7 @@
       <div id="content" class="s-content">
         <div id="accordions" class="container">
           <h3 class="s-title"><a href="#accordions" class="anchor" aria-hidden="true">#</a>Accordions</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Accordions are used to toggle sections of content.</p>
           </div>
           <div class="columns">
@@ -404,7 +404,7 @@
 
         <div id="autocomplete" class="container">
           <h3 class="s-title"><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Autocomplete form component provides suggestions while you type. It is often used for tags and contacts input. </p>
           </div>
           <div class="columns">
@@ -487,7 +487,7 @@
               </div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>form-autocomplete</code> class. There are 2 parts of it, one is <code>form-autocomplete-input</code>, another is <code>menu</code> component. You may add the <code>is-focused</code> class to <code>form-autocomplete-input</code> to make it appear as focus state.</p>
             <p>Spectre.css does NOT include JavaScript code, you will need to implement your JS to interact with the autocomplete. The autocomplete HTML structure is exampled below.</p>
           </div>
@@ -531,7 +531,7 @@
 
         <div id="avatars" class="container">
           <h3 class="s-title"><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Avatars are user profile pictures. </p>
           </div>
           <div class="columns">
@@ -560,7 +560,7 @@
               <figure class="avatar avatar-xs" data-initial="YZ"></figure>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add the <code>avatar</code> class to &lt;img&gt; element. There are 4 additional sizes available, including <code>avatar-xl</code> (64px), <code>avatar-lg</code> (48px), <code>avatar-sm</code> (24px), and <code>avatar-xs</code> (16px). By default, the avatar size is 32px.</p>
             <p>For users who don't have profile pictures, you may use their initials for avatars. Add the <code>avatar</code> class and avatar size class to &lt;div&gt; element. The <code>data-initial</code> attribute is the name appear inside the avatar.</p>
           </div>
@@ -612,7 +612,7 @@
 
         <div id="badges" class="container">
           <h3 class="s-title"><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Badges are often used as unread number indicators.</p>
           </div>
           <div class="columns">
@@ -637,7 +637,7 @@
               </span>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add the <code>badge</code> class to non self closing elements. And add the <code>data-badge</code> attribute to define the content of a badge. The badge will appear in the top-right direction of the element. </p>
             <p>If there is no <code>data-badge</code> or the attribute is not specified, the badge will appear as a dot.</p>
           </div>
@@ -662,7 +662,7 @@
               </figure>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Badges support <code>button</code> and <code>avatars</code> elements as well. </p>
           </div>
 
@@ -688,7 +688,7 @@
 
         <div id="bars" class="container">
           <h3 class="s-title"><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Bars represent the progress of a task or the value within the known range. Bars are custom components for displaying HTML5 <code>progress</code>, <code>meter</code> and <code>input range</code> elements.</p>
           </div>
           <div class="columns">
@@ -715,7 +715,7 @@
               </div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>bar</code> class. And add child elements with the <code>bar-item</code> class. The width percentage value is needed for every <code>bar-item</code>.</p>
             <p>There is the <code>bar-sm</code> class for thinner Bars. Also, you could use <a href="#tooltips">Tooltips</a> for any <code>bar-item</code>.</p>
           </div>
@@ -755,7 +755,7 @@
             </div>
           </div>
 
-          <div class="notes">
+          <div class="docs-note">
             <p>You can add the <code>bar-slider</code> class to the Bars container. And add child elements with the <code>bar-item</code> class and <code>bar-slider-btn</code> inside bar-item. You need to set the <code>bar-item</code> width manually to have the slider point.</p>
             <p>If there are two <code>bar-item</code> divs in one bar-slider, you will have a range slider.</p>
           </div>
@@ -783,7 +783,7 @@
 
         <div id="breadcrumbs" class="container">
           <h3 class="s-title"><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Breadcrumbs are used as navigational hierarchies to indicate current location.</p>
           </div>
           <div class="columns">
@@ -841,7 +841,7 @@
               </ul>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>breadcrumb</code> class. And add child elements with the <code>breadcrumb-item</code> class.</p>
           </div>
 
@@ -863,7 +863,7 @@
 
         <div id="cards" class="container">
           <h3 class="s-title"><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Cards are flexible content containers.</p>
           </div>
           <div class="columns">
@@ -967,7 +967,7 @@
               </div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>card</code> class. And add child elements with the <code>card-image</code>, <code>card-header</code>, <code>card-body</code> and/or <code>card-footer</code> classes. The <code>card-image</code> can be placed in any position. </p>
           </div>
 
@@ -993,7 +993,7 @@
 
         <div id="chips" class="container">
           <h3 class="s-title"><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Chips are complex entities in small blocks. </p>
           </div>
           <div class="columns">
@@ -1030,7 +1030,7 @@
               </label>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>chip</code> class. And add child text element, buttons or avatars with the <code>avatar</code> class.</p>
           </div>
 
@@ -1051,7 +1051,7 @@
 
         <div id="menus" class="container">
           <h3 class="s-title"><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Menus are vertical list of links or buttons for actions and navigation.</p>
           </div>
           <div class="columns">
@@ -1116,7 +1116,7 @@
               </ul>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>menu</code> class. And add child elements with the <code>menu-item</code> class. You can separate menu items with a <code>divider</code>. Spectre.css does not include JavaScript code, you will need to implement your JS to interact with the menus.</p>
           </div>
 
@@ -1146,7 +1146,7 @@
 </code></pre>
 
           <h4 id="dropdowns" class="s-subtitle"><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4>
-          <div class="notes">
+          <div class="docs-note">
             <p>The dropdown is a combination of buttons and menus.</p>
           </div>
           <div class="columns">
@@ -1220,11 +1220,11 @@
               </div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Dropdown menus component is built entirely in CSS. It is triggered by <code>:focus</code> event.</p>
             <p>Add a container element with the <code>dropdown</code> class. And add a focusable element with the <code>dropdown-toggle</code> class for the button and a <code>menu</code> component right next to it. You also need to add <code>tabindex</code> to make the buttons focusable. If the dropdown is close to the right edge of the browser, you can add the <code>dropdown-right</code> class to the container to prevent it appearing off screen.</p>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Also, you can implement your JS to interact with the dropdown menus by adding the <code>active</code> class to the <code>dropdown</code> container.</p>
           </div>
 
@@ -1262,7 +1262,7 @@
 
         <div id="modals" class="container">
           <h3 class="s-title"><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Modals are flexible dialog prompts.</p>
           </div>
           <div class="columns">
@@ -1297,7 +1297,7 @@
               </div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>modal</code> class. And add a real container <code>modal-container</code> and overlay <code>modal-overlay</code> inside it. You can add child elements with the <code>modal-header</code>, <code>modal-content</code> and <code>modal-footer</code> - any or all of them. </p>
             <p>Spectre.css does not include JavaScript code, you will need to implement your JS to interact with modals. To make a modal appear, add the <code>active</code> class to the <code>modal</code> container.</p>
           </div>
@@ -1381,7 +1381,7 @@
               </div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add the <code>modal-sm</code> class for a smaller modal dialog. </p>
           </div>
 
@@ -1456,7 +1456,7 @@
               </ul>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>pagination</code> class. And add child elements with the <code>page-item</code> class. The <code>page-item</code> with the <code>active</code> class will be highlighted. You can add the <code>disabled</code> to the <code>page-item</code> to have unclickable page links. </p>
           </div>
 
@@ -1504,7 +1504,7 @@
               </ul>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>You could use previous and next pagination to navigate. </p>
           </div>
 
@@ -1561,7 +1561,7 @@
               </ul>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>nav</code> class. And add child elements with the <code>nav-item</code> class. The <code>nav-item</code> with the <code>active</code> class will be highlighted.</p>
           </div>
 
@@ -1600,7 +1600,7 @@
 
         <div id="popovers" class="container">
           <h3 class="s-title"><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Popovers are small overlay content containers. Popovers component is built entirely in CSS.</p>
           </div>
           <div class="columns">
@@ -1689,7 +1689,7 @@
               </div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Wrap an element by a container with the <code>popover</code> class. And add a container with the <code>popover-container</code> next to the element. You can use <a href="#cards">Cards</a> component inside the <code>popover-container</code>. </p>
             <p>Also, you can add the <code>popover-right</code>, <code>popover-bottom</code> or <code>popover-left</code> class to define the position. By default, the popovers appear above the element.</p>
           </div>
@@ -1717,7 +1717,7 @@
 
         <div id="steps" class="container">
           <h3 class="s-title"><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Steps are progress indicators of a sequence of task steps.</p>
           </div>
           <div class="columns">
@@ -1754,7 +1754,7 @@
               </ul>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>step</code> class. And add child elements with the <code>step-item</code> class. The <code>step-item</code> with the <code>active</code> class will be highlighted and indicate the current state of progress.</p>
           </div>
 
@@ -1779,7 +1779,7 @@
 
         <div id="tabs" class="container">
           <h3 class="s-title"><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Tabs enable quick switch between different views.</p>
           </div>
           <div class="columns">
@@ -1827,7 +1827,7 @@
               </ul>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>tab</code> class. And add child elements with the <code>tab-item</code> class. You can add the <code>tab-block</code> class for a full-width tab. The <code>tab-item</code> or its child &lt;a&gt; with the <code>active</code> class will be highlighted.</p>
           </div>
 
@@ -1888,7 +1888,7 @@
               </ul>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>If you need <code>badges</code> on tabs, you can add badge class to the element within <code>tab-item</code>. </p>
           </div>
 
@@ -1935,7 +1935,7 @@
               </ul>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>You could add a search box or buttons inside a tab. Add the <code>tab-action</code> class to the <code>tab-item</code>. </p>
           </div>
 
@@ -1959,7 +1959,7 @@
 
         <div id="tiles" class="container">
           <h3 class="s-title"><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Tiles are repeatable or embeddable information blocks.</p>
           </div>
           <div class="columns">
@@ -1998,7 +1998,7 @@
               </div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container with the <code>tile</code> class. And add child elements with the <code>tile-icon</code>, <code>tile-content</code> or/and <code>tile-action</code> classes. The <code>tile-icon</code> and <code>tile-action</code> are optional.</p>
             <p>There are <code>tile-title</code> and <code>tile-subtitle</code> classes for title and subtitle text styles.</p>
           </div>
@@ -2021,7 +2021,7 @@
 </code></pre>
 
           <h4 class="s-subtitle">Compact tiles</h4>
-          <div class="notes">
+          <div class="docs-note">
             <p>There is compact version of Tiles component, which is often used as contact and file info blocks.</p>
             <p>Add the <code>tile-centered</code> class to the container <code>tile</code>. The <code>tile-icon</code>, <code>tile-content</code> and <code>tile-action</code> will be vertically centered.</p>
           </div>
@@ -2067,7 +2067,7 @@
 
         <div id="toasts" class="container">
           <h3 class="s-title"><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Toasts are used to show alert or information to users.</p>
           </div>
           <div class="columns">
@@ -2085,7 +2085,7 @@
               </div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>Add a container element with the <code>toast</code> class. You can add any text within the container, and even icons. You may also add a close button with the <code>btn-clear</code> class if you need. </p>
           </div>
           <div class="columns">
@@ -2108,7 +2108,7 @@
               </div>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <p>And you can add the <code>toast-primary</code>, <code>toast-success</code>, <code>toast-warning</code> or <code>toast-error</code> class for additional toast colors.</p>
           </div>
 
@@ -2127,7 +2127,7 @@
 
         <div id="tooltips" class="container">
           <h3 class="s-title"><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3>
-          <div class="notes">
+          <div class="docs-note">
             <p>Tooltips provide context information labels that appear on hover and focus.</p>
           </div>
           <div class="columns text-center">
@@ -2144,7 +2144,7 @@
               <button class="btn btn-primary tooltip tooltip-left" data-tooltip="Left Tooltip Text">left tooltip</button>
             </div>
           </div>
-          <div class="notes">
+          <div class="docs-note">
             <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. 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.</p>
           </div>
-- 
cgit v1.3.1-23-gd82d