diff options
Add anchor links to Docs
8 files changed, 103 insertions, 55 deletions
| -rw-r--r-- | docs/components.html | 48 | ||||
| -rw-r--r-- | docs/css/docs.css | 17 | ||||
| -rw-r--r-- | docs/elements.html | 16 | ||||
| -rw-r--r-- | docs/experimentals.html | 20 | ||||
| -rw-r--r-- | docs/index.html | 14 | ||||
| -rw-r--r-- | docs/layout.html | 10 | ||||
| -rw-r--r-- | docs/src/docs.less | 21 | ||||
| -rw-r--r-- | docs/utilities.html | 12 |
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 @@ <<span class="tag">/ul</span>> </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 @@ <<span class="tag">/ul</span>> </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 @@ <<span class="tag">/ul</span>> </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 @@ <<span class="tag">/ul</span>> </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 <head> 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><code></code>. For multiline code snippet blocks, you can use <pre> with the <code>code</code> class as a container, and add <code> 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 <img> 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> |