From 6aa86099a457d2725315863725f79172888f1788 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 12 Apr 2017 16:29:34 +0800
Subject: Cleanup code and make form-select 100% width

---
 docs/layout.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'docs/layout.html')

diff --git a/docs/layout.html b/docs/layout.html
index 96a47d1..565fd9c 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -37,8 +37,8 @@
           <li class="nav-item">
             <a href="elements.html">Elements</a>
           </li>
-          <li class="nav-item">
-            <a href="layout.html"><strong>Layout</strong></a>
+          <li class="nav-item active">
+            <a href="layout.html">Layout</a>
             <ul class="nav">
               <li class="nav-item">
                 <a href="layout.html#grid">Flexbox grid</a>
-- 
cgit v1.3.1-23-gd82d


From 029e72bac88621d5b438135ab43761ec4bd929c8 Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Wed, 12 Apr 2017 17:14:25 +0800
Subject: Add anchor links to Docs

---
 docs/components.html    | 48 +++++++++++++++++++++++++++++-------------------
 docs/css/docs.css       | 17 +++++++++++++++++
 docs/elements.html      | 16 ++++++++--------
 docs/experimentals.html | 20 ++++++++++----------
 docs/index.html         | 14 +++++++-------
 docs/layout.html        | 10 +++++-----
 docs/src/docs.less      | 21 +++++++++++++++++++++
 docs/utilities.html     | 12 ++++++------
 8 files changed, 103 insertions(+), 55 deletions(-)

(limited to 'docs/layout.html')

diff --git a/docs/components.html b/docs/components.html
index bff66af..74b7ccb 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -99,7 +99,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="autocomplete" class="container">
-          <header class="text-center"><h3>Autocomplete</h3></header>
+          <header class="text-center"><h3><a href="#autocomplete" class="anchor" aria-hidden="true">#</a>Autocomplete</h3></header>
           <section class="notes">
             <p><strong>Autocomplete</strong> form component provides suggestions while you type. It is often used for tags and contacts input. </p>
           </section>
@@ -223,7 +223,7 @@
         </section>
 
         <section id="avatars" class="container">
-          <header class="text-center"><h3>Avatars</h3></header>
+          <header class="text-center"><h3><a href="#avatars" class="anchor" aria-hidden="true">#</a>Avatars</h3></header>
           <section class="notes">
             <p><strong>Avatars</strong> are user profile pictures. </p>
           </section>
@@ -304,7 +304,7 @@
         </section>
 
         <section id="badges" class="container">
-          <header class="text-center"><h3>Badges</h3></header>
+          <header class="text-center"><h3><a href="#badges" class="anchor" aria-hidden="true">#</a>Badges</h3></header>
           <section class="notes">
             <p><strong>Badges</strong> are often used as unread number indicators.</p>
           </section>
@@ -380,7 +380,7 @@
         </section>
 
         <section id="bars" class="container">
-          <header class="text-center"><h3>Bars</h3></header>
+          <header class="text-center"><h3><a href="#bars" class="anchor" aria-hidden="true">#</a>Bars</h3></header>
           <section class="notes">
             <p><strong>Bars</strong> 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>
           </section>
@@ -475,7 +475,7 @@
         </section>
 
         <section id="cards" class="container">
-          <header class="text-center"><h3>Cards</h3></header>
+          <header class="text-center"><h3><a href="#cards" class="anchor" aria-hidden="true">#</a>Cards</h3></header>
           <section class="notes">
             <p><strong>Cards</strong> are flexible content containers.</p>
           </section>
@@ -605,7 +605,7 @@
         </section>
 
         <section id="chips" class="container">
-          <header class="text-center"><h3>Chips</h3></header>
+          <header class="text-center"><h3><a href="#chips" class="anchor" aria-hidden="true">#</a>Chips</h3></header>
           <section class="notes">
             <p><strong>Chips</strong> are complex entities in small blocks. </p>
           </section>
@@ -663,7 +663,7 @@
         </section>
 
         <section id="menus" class="container">
-          <header class="text-center"><h3>Menus</h3></header>
+          <header class="text-center"><h3><a href="#menus" class="anchor" aria-hidden="true">#</a>Menus</h3></header>
           <section class="notes">
             <p><strong>Menus</strong> are vertical list of links or buttons for actions and navigation.</p>
           </section>
@@ -751,7 +751,9 @@
 &lt;<span class="tag">/ul</span>&gt;
 </code></pre>
 
-          <header id="dropdowns" class="text-center"><h4>Dropdown menus</h4></header>
+          <header id="dropdowns" class="text-center">
+            <h4><a href="#dropdowns" class="anchor" aria-hidden="true">#</a>Dropdown menus</h4>
+          </header>
           <section class="notes">
             <p>The <strong>dropdown</strong> is a combination of buttons and menus.</p>
           </section>
@@ -867,7 +869,7 @@
         </section>
 
         <section id="modals" class="container">
-          <header class="text-center"><h3>Modals</h3></header>
+          <header class="text-center"><h3><a href="#modals" class="anchor" aria-hidden="true">#</a>Modals</h3></header>
           <section class="notes">
             <p><strong>Modals</strong> are flexible dialog prompts.</p>
           </section>
@@ -1003,11 +1005,13 @@
         </section>
 
         <section id="navigation" class="container">
-          <header class="text-center"><h3>Navigation</h3></header>
+          <header class="text-center"><h3><a href="#navigation" class="anchor" aria-hidden="true">#</a>Navigation</h3></header>
           <section class="notes">
             <p><strong>Navigation</strong> includes several components, including breadcrumbs, tabs, pagination and navs.</p>
           </section>
-          <header id="breadcrumbs" class="text-center"><h4>Breadcrumbs</h4></header>
+          <header id="breadcrumbs" class="text-center">
+            <h4><a href="#breadcrumbs" class="anchor" aria-hidden="true">#</a>Breadcrumbs</h4>
+          </header>
           <div class="columns">
             <div class="column col-6 col-md-12">
               <ul class="breadcrumb">
@@ -1064,7 +1068,9 @@
 &lt;<span class="tag">/ul</span>&gt;
 </code></pre>
 
-          <header id="tabs" class="text-center"><h4>Tabs</h4></header>
+          <header id="tabs" class="text-center">
+            <h4><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h4>
+          </header>
           <div class="columns">
             <div class="column col-6 col-sm-12">
               <ul class="tab">
@@ -1238,7 +1244,9 @@
 &lt;<span class="tag">/ul</span>&gt;
 </code></pre>
 
-          <header id="pagination" class="text-center"><h4>Pagination</h4></header>
+          <header id="pagination" class="text-center">
+            <h4><a href="#pagination" class="anchor" aria-hidden="true">#</a>Pagination</h4>
+          </header>
           <div class="columns">
             <div class="column col-xs-12">
               <ul class="pagination">
@@ -1366,7 +1374,9 @@
 &lt;<span class="tag">/ul</span>&gt;
 </code></pre>
 
-          <header id="navs" class="text-center"><h4>Navs</h4></header>
+          <header id="navs" class="text-center">
+            <h4><a href="#navs" class="anchor" aria-hidden="true">#</a>Navs</h4>
+          </header>
           <div class="columns">
             <div class="column col-6 col-xs-12">
               <ul class="nav">
@@ -1437,7 +1447,7 @@
         </section>
 
         <section id="popovers" class="container">
-          <header class="text-center"><h3>Popovers</h3></header>
+          <header class="text-center"><h3><a href="#popovers" class="anchor" aria-hidden="true">#</a>Popovers</h3></header>
           <section class="notes">
             <p><strong>Popovers</strong> are small overlay content containers. Popovers component is built entirely in CSS.</p>
           </section>
@@ -1554,7 +1564,7 @@
         </section>
 
         <section id="steps" class="container">
-          <header class="text-center"><h3>Steps</h3></header>
+          <header class="text-center"><h3><a href="#steps" class="anchor" aria-hidden="true">#</a>Steps</h3></header>
           <section class="notes">
             <p><strong>Steps</strong> are progress indicators of a sequence of task steps.</p>
           </section>
@@ -1616,7 +1626,7 @@
         </section>
 
         <section id="tiles" class="container">
-          <header class="text-center"><h3>Tiles</h3></header>
+          <header class="text-center"><h3><a href="#tiles" class="anchor" aria-hidden="true">#</a>Tiles</h3></header>
           <section class="notes">
             <p><strong>Tiles</strong> are repeatable or embeddable information blocks.</p>
           </section>
@@ -1723,7 +1733,7 @@
         </section>
 
         <section id="toasts" class="container">
-          <header class="text-center"><h3>Toasts</h3></header>
+          <header class="text-center"><h3><a href="#toasts" class="anchor" aria-hidden="true">#</a>Toasts</h3></header>
           <section class="notes">
             <p><strong>Toasts</strong> are used to show alert or information to users.</p>
           </section>
@@ -1782,7 +1792,7 @@
         </section>
 
         <section id="tooltips" class="container">
-          <header class="text-center"><h3>Tooltips</h3></header>
+          <header class="text-center"><h3><a href="#tooltips" class="anchor" aria-hidden="true">#</a>Tooltips</h3></header>
           <section class="notes">
             <p><strong>Tooltips</strong> provide context information labels that appear on hover and focus.</p>
           </section>
diff --git a/docs/css/docs.css b/docs/css/docs.css
index 0cf55d1..b1162e8 100644
--- a/docs/css/docs.css
+++ b/docs/css/docs.css
@@ -99,6 +99,23 @@
 .docs-content header {
   padding-top: 6rem;
 }
+.docs-content header:hover .anchor {
+  height: auto;
+  width: auto;
+}
+.docs-content .anchor {
+  height: 0;
+  margin-left: -1em;
+  overflow: hidden;
+  position: absolute;
+  width: 0;
+}
+.docs-content .anchor:focus,
+.docs-content .anchor:hover {
+  height: auto;
+  text-decoration: none;
+  width: auto;
+}
 .docs-content .notes {
   margin: 4rem 0;
 }
diff --git a/docs/elements.html b/docs/elements.html
index 0f9ee4e..488a120 100644
--- a/docs/elements.html
+++ b/docs/elements.html
@@ -81,7 +81,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="typography" class="container">
-          <header class="text-center"><h3>Typography</h3></header>
+          <header class="text-center"><h3><a href="#typography" class="anchor" aria-hidden="true">#</a>Typography</h3></header>
           <section class="notes">
             <p><strong>Typography</strong> sets default styles for headings, paragraphs, semantic text, blockquote and lists elements.</p>
           </section>
@@ -287,7 +287,7 @@
         </section>
 
         <section id="tables" class="container">
-          <header class="text-center"><h3>Tables</h3></header>
+          <header class="text-center"><h3><a href="#tables" class="anchor" aria-hidden="true">#</a>Tables</h3></header>
           <section class="notes">
             <p><strong>Tables</strong> include default styles for tables and data sets.</p>
           </section>
@@ -349,7 +349,7 @@
         </section>
 
         <section id="buttons" class="container">
-          <header class="text-center"><h3>Buttons</h3></header>
+          <header class="text-center"><h3><a href="#buttons" class="anchor" aria-hidden="true">#</a>Buttons</h3></header>
           <section class="notes">
             <p><strong>Buttons</strong> include simple button styles for actions in different types and sizes. </p>
           </section>
@@ -501,7 +501,7 @@
         </section>
 
         <section id="forms" class="container">
-          <header class="text-center"><h3>Forms</h3></header>
+          <header class="text-center"><h3><a href="#forms" class="anchor" aria-hidden="true">#</a>Forms</h3></header>
           <section class="notes">
             <p><strong>Forms</strong> provide the most common control styles used in forms, including input, textarea, select, checkbox, radio and switch.  </p>
           </section>
@@ -1009,7 +1009,7 @@
         </section>
 
         <section id="icons" class="container">
-          <header class="text-center"><h3>Icons <small class="label">experimental</small></h3></header>
+          <header class="text-center"><h3><a href="#icons" class="anchor" aria-hidden="true">#</a>Icons <small class="label">experimental</small></h3></header>
           <section class="notes">
             <p><strong>Icons</strong> are single-element, responsive and pure CSS icons. You can include <code>spectre-icons.css</code> located in the <code>dist</code> folder to your web &lt;head&gt; to have these CSS icons.</p>
           </section>
@@ -1258,7 +1258,7 @@
         </section>
 
         <section id="labels" class="container">
-          <header class="text-center"><h3>Labels</h3></header>
+          <header class="text-center"><h3><a href="#labels" class="anchor" aria-hidden="true">#</a>Labels</h3></header>
           <section class="notes">
             <p><strong>Labels</strong> are formatted text tags for highlighted, informative information.</p>
           </section>
@@ -1283,7 +1283,7 @@
         </section>
 
         <section id="codes" class="container">
-          <header class="text-center"><h3>Codes</h3></header>
+          <header class="text-center"><h3><a href="#codes" class="anchor" aria-hidden="true">#</a>Codes</h3></header>
           <section class="notes">
             <p><strong>Codes</strong> are inline and multiline code snippets.</p>
             <p>For inline code, you can use the element <code>&lt;code&gt;</code>. For multiline code snippet blocks, you can use &lt;pre&gt; with the <code>code</code> class as a container, and add &lt;code&gt; inside it. The <code>data-lang</code> attribute is rendered as the language name in the top right.</p>
@@ -1306,7 +1306,7 @@
         </section>
 
         <section id="media" class="container">
-          <header class="text-center"><h3>Media</h3></header>
+          <header class="text-center"><h3><a href="#media" class="anchor" aria-hidden="true">#</a>Media</h3></header>
           <section class="notes">
             <p><strong>Media</strong> includes responsive images, figures and video classes. </p>
             <p>Add the <code>img-responsive</code> class to &lt;img&gt; elements. The images will scale with the parent sizes.</p>
diff --git a/docs/experimentals.html b/docs/experimentals.html
index fa1ced1..d88d8da 100644
--- a/docs/experimentals.html
+++ b/docs/experimentals.html
@@ -85,14 +85,14 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="experimentals" class="container">
-          <header class="text-center"><h3>Experimentals</h3></header>
+          <header class="text-center"><h3><a href="#experimentals" class="anchor" aria-hidden="true">#</a>Experimentals</h3></header>
           <section class="notes">
             <p>The Experimentals include experimental elements and features, mostly are not yet ready for wide use. These elements and components are limited inside <code>spectre-exp.less</code> before browsers fully support them. Sometimes, there are some specific browsers targeted components.</p>
           </section>
         </section>
 
         <section id="calendars" class="container">
-          <header class="text-center"><h3>Calendars</h3></header>
+          <header class="text-center"><h3><a href="#calendars" class="anchor" aria-hidden="true">#</a>Calendars</h3></header>
           <section class="notes">
             <p><strong>Calendars</strong> are designed for date or date range picker and events display. It is made with flex layout.</p>
           </section>
@@ -255,7 +255,7 @@
         </section>
 
         <section id="carousels" class="container">
-          <header class="text-center"><h3>Carousels</h3></header>
+          <header class="text-center"><h3><a href="#carousels" class="anchor" aria-hidden="true">#</a>Carousels</h3></header>
           <section class="notes">
             <p><strong>Carousels</strong> are slideshows for cycling images. It is built in pure CSS.</p>
           </section>
@@ -320,7 +320,7 @@
         </section>
 
         <section id="comparison" class="container">
-          <header class="text-center"><h3>Comparison Sliders</h3></header>
+          <header class="text-center"><h3><a href="#comparison" class="anchor" aria-hidden="true">#</a>Comparison Sliders</h3></header>
           <section class="notes">
             <p><strong>Comparison Sliders</strong> are sliders for comparing two images. It is built in pure CSS.</p>
           </section>
@@ -358,7 +358,7 @@
         </section>
 
         <section id="filters" class="container">
-          <header class="text-center"><h3>Filters</h3></header>
+          <header class="text-center"><h3><a href="#filters" class="anchor" aria-hidden="true">#</a>Filters</h3></header>
           <section class="notes">
             <p><strong>Filters</strong> are CSS only content filters.</p>
           </section>
@@ -483,7 +483,7 @@
         </section>
 
         <section id="meters" class="container">
-          <header class="text-center"><h3>Meters</h3></header>
+          <header class="text-center"><h3><a href="#meters" class="anchor" aria-hidden="true">#</a>Meters</h3></header>
           <section class="notes">
             <p><strong>Meters</strong> represent the value within the known range.</p>
           </section>
@@ -518,7 +518,7 @@
         </section>
 
         <section id="parallax" class="container">
-          <header class="text-center"><h3>Parallax</h3></header>
+          <header class="text-center"><h3><a href="#parallax" class="anchor" aria-hidden="true">#</a>Parallax</h3></header>
           <section class="notes">
             <p>The <strong>Parallax</strong> acts like Apple TV/tvOS hover parallax effect. It is built in pure CSS.</p>
           </section>
@@ -561,7 +561,7 @@
         </section>
 
         <section id="progress" class="container">
-          <header class="text-center"><h3>Progress</h3></header>
+          <header class="text-center"><h3><a href="#progress" class="anchor" aria-hidden="true">#</a>Progress</h3></header>
           <section class="notes">
             <p>The <strong>Progress</strong> indicates the progress completion of a task.</p>
           </section>
@@ -588,7 +588,7 @@
         </section>
 
         <section id="sliders" class="container">
-          <header class="text-center"><h3>Sliders</h3></header>
+          <header class="text-center"><h3><a href="#sliders" class="anchor" aria-hidden="true">#</a>Sliders</h3></header>
           <section class="notes">
             <p><strong>Sliders</strong> are for selecting values from ranges.</p>
           </section>
@@ -608,7 +608,7 @@
         </section>
 
         <section id="timelines" class="container">
-          <header class="text-center"><h3>Timelines</h3></header>
+          <header class="text-center"><h3><a href="#timelines" class="anchor" aria-hidden="true">#</a>Timelines</h3></header>
           <section class="notes">
             <p><strong>Timelines</strong> are ordered sequences of activities.</p>
           </section>
diff --git a/docs/index.html b/docs/index.html
index e4dbf45..cc8d444 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -117,7 +117,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="introduction" class="container">
-          <header class="text-center"><h3>Introduction</h3></header>
+          <header class="text-center"><h3><a href="#introduction" class="anchor" aria-hidden="true">#</a>Introduction</h3></header>
           <section class="notes">
             <p><strong>Spectre.css</strong> is a lightweight and responsive and modern CSS framework for faster and extensible development.</p>
             <p>Spectre provides basic styles for typography and elements, flexbox based responsive layout system, CSS components and utilities with best practice coding and consistent design language.</p>
@@ -125,7 +125,7 @@
         </section>
 
         <section id="installation" class="container">
-          <header class="text-center"><h3>Installation</h3></header>
+          <header class="text-center"><h3><a href="#installation" class="anchor" aria-hidden="true">#</a>Installation</h3></header>
           <section class="notes">
             <p>There are 4 ways to get started with Spectre CSS framework in your projects. You can either manually install or use NPM, Yarn and Bower.</p>
           </section>
@@ -171,7 +171,7 @@
         </section>
 
         <section id="compiling" class="container">
-          <header class="text-center"><h3>Custom version</h3></header>
+          <header class="text-center"><h3><a href="#comiling" class="anchor" aria-hidden="true">#</a>Custom version</h3></header>
           <section class="notes">
             <p>Spectre uses <a href="http://gulpjs.com/" target="_blank">Gulp</a> for compiling CSS. You can customize your version of Spectre.css by editing LESS files in <code>/src</code> directory or removing unneeded components from <code>spectre.less</code>, <code>spectre-exp.less</code> and <code>spectre-icons.less</code>.</p>
             <p>Then, you can build the CSS file from the command line:</p>
@@ -220,7 +220,7 @@
 └── spectre.less
 </code></pre>
 
-          <header id="variables" class="text-center"><h4>Variables</h4></header>
+          <header id="variables" class="text-center"><h4><a href="#variables" class="anchor" aria-hidden="true">#</a>Variables</h4></header>
           <section class="notes">
             <p>Spectre.css is designed with consistent design language. You can modify <code>variables.less</code> to create your new or match existing design.
             <h5>Colors</h5>
@@ -306,11 +306,11 @@
         </section>
 
         <section id="accessibility" class="container">
-          <header class="text-center"><h3>Accessibility <small class="label">coming soon</small></h3></header>
+          <header class="text-center"><h3><a href="#accessibility" class="anchor" aria-hidden="true">#</a>Accessibility <small class="label">coming soon</small></h3></header>
         </section>
 
         <section id="browsers" class="container">
-          <header class="text-center"><h3>Browser support</h3></header>
+          <header class="text-center"><h3><a href="#browsers" class="anchor" aria-hidden="true">#</a>Browser support</h3></header>
           <section class="notes">
             <p>Spectre uses <a href="https://github.com/postcss/autoprefixer" target="_blank">Autoprefixer</a> to make most styles compatible with earlier browsers and <a href="https://necolas.github.io/normalize.css/" target="_blank">Normalize.css</a> for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:</p>
             <ul>
@@ -325,7 +325,7 @@
         </section>
 
         <section id="whatsnew" class="container">
-          <header class="text-center"><h3>What's new</h3></header>
+          <header class="text-center"><h3><a href="#whatsnew" class="anchor" aria-hidden="true">#</a>What's new</h3></header>
           <section class="notes">
             <p><strong>April 2017</strong></p>
             <ul>
diff --git a/docs/layout.html b/docs/layout.html
index 565fd9c..9c5c3e0 100644
--- a/docs/layout.html
+++ b/docs/layout.html
@@ -72,7 +72,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="grid" class="container">
-          <header class="text-center"><h3>Flexbox grid</h3></header>
+          <header class="text-center"><h3><a href="#grid" class="anchor" aria-hidden="true">#</a>Flexbox grid</h3></header>
           <section class="notes">
             <p><strong>Layout</strong> includes flexbox based responsive grid system with 12 columns. </p>
           </section>
@@ -182,7 +182,7 @@
         </section>
 
         <section id="responsive" class="container">
-          <header class="text-center"><h3>Responsive grid</h3></header>
+          <header class="text-center"><h3><a href="#responsive" class="anchor" aria-hidden="true">#</a>Responsive grid</h3></header>
           <div class="notes">
             <p>Spectre provides a neat responsive layout grid system and responsive visibility utilities. </p>
           </div>
@@ -368,7 +368,7 @@
         </section>
 
         <section id="navbar" class="container">
-          <header class="text-center"><h3>Navbar</h3></header>
+          <header class="text-center"><h3><a href="#navbar" class="anchor" aria-hidden="true">#</a>Navbar</h3></header>
           <section class="notes">
             <p><strong>Navbar</strong> is a layout container that appears in the header of apps and websites. </p>
           </section>
@@ -449,7 +449,7 @@
         </section>
 
         <section id="panels" class="container">
-          <header class="text-center"><h3>Panels</h3></header>
+          <header class="text-center"><h3><a href="#panels" class="anchor" aria-hidden="true">#</a>Panels</h3></header>
           <section class="notes">
             <p><strong>Panels</strong> are flexible view container layout with auto-expand content section.</p>
           </section>
@@ -610,7 +610,7 @@
         </section>
 
         <section id="empty" class="container">
-          <header class="text-center"><h3>Empty states / blank slates</h3></header>
+          <header class="text-center"><h3><a href="#empty" class="anchor" aria-hidden="true">#</a>Empty states / blank slates</h3></header>
           <section class="notes">
             <p><strong>Empty states/blank slates</strong> are commonly used as placeholders for first time use, empty data and error screens.</p>
           </section>
diff --git a/docs/src/docs.less b/docs/src/docs.less
index ff6f1a7..06910f2 100644
--- a/docs/src/docs.less
+++ b/docs/src/docs.less
@@ -123,6 +123,27 @@
 
   header {
     padding-top: 6rem;
+
+    &:hover {
+      .anchor {
+        height: auto;
+        width: auto;
+      }
+    }
+  }
+
+  .anchor {
+    height: 0;
+    margin-left: -1em;
+    position: absolute;
+    overflow: hidden;
+    width: 0;
+    &:focus,
+    &:hover {
+      height: auto;
+      text-decoration: none;
+      width: auto;
+    }
   }
 
   .notes {
diff --git a/docs/utilities.html b/docs/utilities.html
index 9e11ab2..e70372a 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -75,7 +75,7 @@
 
       <div class="docs-content column col-9 col-sm-12">
         <section id="position" class="container">
-          <header class="text-center"><h3>Position utilities</h3></header>
+          <header class="text-center"><h3><a href="#position" class="anchor" aria-hidden="true">#</a>Position utilities</h3></header>
           <section class="notes">
             <p><strong>Position utilities</strong> are used for useful layout and position things, including clearfix, float, position and margin/padding utilities.</p>
           </section>
@@ -103,7 +103,7 @@
         </section>
 
         <section id="display" class="container">
-          <header class="text-center"><h3>Display utilities</h3></header>
+          <header class="text-center"><h3><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3></header>
           <section class="notes">
             <p><strong>Display utilities</strong> are used for display and hidden things.</p>
           </section>
@@ -134,7 +134,7 @@
         </section>
 
         <section id="text" class="container">
-          <header class="text-center"><h3>Text utilities</h3></header>
+          <header class="text-center"><h3><a href="#text" class="anchor" aria-hidden="true">#</a>Text utilities</h3></header>
           <section class="notes">
             <p><strong>Text utilities</strong> are used for text alignment, styles and overflow things.</p>
           </section>
@@ -176,7 +176,7 @@
         </section>
 
         <section id="shapes" class="container">
-          <header class="text-center"><h3>Shape utilities</h3></header>
+          <header class="text-center"><h3><a href="#shapes" class="anchor" aria-hidden="true">#</a>Shape utilities</h3></header>
           <section class="notes">
             <p><strong>Shape utilities</strong> are used for change element shapes.</p>
           </section>
@@ -191,7 +191,7 @@
         </section>
 
         <section id="divider" class="container">
-          <header class="text-center"><h3>Divider</h3></header>
+          <header class="text-center"><h3><a href="#divider" class="anchor" aria-hidden="true">#</a>Divider</h3></header>
           <section class="notes">
             <p>A <strong>Divider</strong> is used for separating elements.</p>
           </section>
@@ -216,7 +216,7 @@
         </section>
 
         <section id="loading" class="container">
-          <header class="text-center"><h3>Loading</h3></header>
+          <header class="text-center"><h3><a href="#loading" class="anchor" aria-hidden="true">#</a>Loading</h3></header>
           <section class="notes">
             <p><strong>Loading indicator</strong> is used for loading or updating. Also, you can add the <code>loading</code> class to buttons for loading status.</p>
           </section>
-- 
cgit v1.3.1-23-gd82d