Merge pull request #208 from picturepan2/0.2.14

0.2.14
picturepan2 · Apr 27, 2017 · 846353c · 846353c
2 parents 7fdb8b4 + 42cf02f
commit 846353c
Show file tree

Hide file tree

Showing 25 changed files with 723 additions and 168 deletions.
diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Read [the documentation](https://picturepan2.github.io/spectre/) to learn more.
 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.
 
 ##### Install manually
-Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/dist).
+Download the compiled and minified [Spectre CSS file](https://github.com/picturepan2/spectre/tree/master/docs/dist).
 
 ##### Install with NPM
 `$ npm install spectre.css --save`
@@ -25,15 +25,15 @@ Download the compiled and minified [Spectre CSS file](https://github.com/picture
 ##### Install with Bower
 `$ bower install spectre.css --save`
 
-And include it in your website or Web app &lt;head&gt; part.
+And include `spectre.css` located in `/docs/dist` in your website or Web app &lt;head&gt; part.
 
-`<link rel="stylesheet" href="dist/spectre.min.css" />`
+`<link rel="stylesheet" href="spectre.min.css" />`
 
 ### Compiling custom version
 
 You can compile your custom version of Spectre.css. Read [the documentation](https://picturepan2.github.io/spectre/index.html#compiling).
 
-### Documentation and demos
+### Documentation and examples
 
 #### Elements
 
@@ -45,7 +45,6 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Labels](https://picturepan2.github.io/spectre/elements.html#labels) - formatted text tags for highlighted, informative information
 - [Codes](https://picturepan2.github.io/spectre/elements.html#codes) - inline and multiline code snippets
 - [Media](https://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video classes
-- [Experimentals](https://picturepan2.github.io/spectre/experimentals.html) - experimental elements and features, mostly are not yet ready for wide use
 
 #### Layout
 - [Flexbox-grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system
@@ -75,6 +74,18 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 
 - [Utilities](https://picturepan2.github.io/spectre/utilities.html) - layout, positions, display, text, shapes, loading things
 
+#### Experimentals
+- [Accordions](https://picturepan2.github.io/spectre/experimentals.html#accordions) - used to toggle sections of content
+- [Calendars](https://picturepan2.github.io/spectre/experimentals.html#calendars) - date or date range picker and events display
+- [Carousels](https://picturepan2.github.io/spectre/experimentals.html#carousels) - slideshows for cycling images
+- [Comparison Sliders](https://picturepan2.github.io/spectre/experimentals.html#comparison) - sliders for comparing two images, built entirely in CSS
+- [Filters](https://picturepan2.github.io/spectre/experimentals.html#carousels) - CSS only content filters
+- [Meters](https://picturepan2.github.io/spectre/experimentals.html#meters) - representing the value within the known range
+- [Parallax](https://picturepan2.github.io/spectre/experimentals.html#parallax) - acting like Apple TV/tvOS hover parallax effect, built entirely in CSS
+- [Progress](https://picturepan2.github.io/spectre/experimentals.html#progress) - indicators for the progress completion of a task
+- [Sliders](https://picturepan2.github.io/spectre/experimentals.html#sliders) - selecting values from ranges
+- [Timelines](https://picturepan2.github.io/spectre/experimentals.html#timelines) - ordered sequences of activities
+
 ### Browser support
 Spectre uses [Autoprefixer](https://github.com/postcss/autoprefixer) to make most styles compatible with earlier browsers and [Normalize.css](https://necolas.github.io/normalize.css/) for CSS resets. Spectre is designed for modern browsers. For best compatibility, these browsers are recommended:
 - Chrome (last 4)

diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "spectre.css",
-  "version": "0.2.13",
+  "version": "0.2.14",
   "description": "Spectre.css: a lightweight, responsive and modern CSS framework.",
   "homepage": "http://picturepan2.github.io/spectre",
   "repository": "picturepan2/spectre",

diff --git 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 @@ <h4>Candy ipsum</h4>
         </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 @@ <h4>Candy ipsum</h4>
 &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">
@@ -1135,7 +1141,7 @@ <h4>Candy ipsum</h4>
             <div class="column col-sm-12">
               <ul class="tab">
                 <li class="tab-item active">
-                  <a href="#tabs" class="badge" data-badge="9">
+                  <a href="#tabs" class="badge" data-badge="999">
                     Music
                   </a>
                 </li>
@@ -1238,7 +1244,9 @@ <h4>Candy ipsum</h4>
 &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 @@ <h3 class="page-item-title">Layout</h3>
 &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 @@ <h3 class="page-item-title">Layout</h3>
         </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 @@ <h3 class="page-item-title">Layout</h3>
         </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 @@ <h3 class="page-item-title">Layout</h3>
         </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 @@ <h3 class="page-item-title">Layout</h3>
         </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 @@ <h3 class="page-item-title">Layout</h3>
         </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
@@ -1,7 +1,7 @@
 /*! Spectre.css Docs | MIT License | github.com/picturepan2/spectre */
 /* Spectre version */
 .version::after {
-  content: "0.2.13";
+  content: "0.2.14";
 }
 /* Spectre docs style */
 .bg-gray {
@@ -37,7 +37,7 @@
   padding: 0;
 }
 .grid-header .navbar-brand {
-  color: #5b657a;
+  color: #50596c;
 }
 .grid-header .btn-link {
   color: #667189;
@@ -55,7 +55,7 @@
   margin-top: 10rem;
 }
 .grid-hero h1 {
-  color: #5b657a;
+  color: #50596c;
   font-size: 3.2rem;
   font-weight: 400;
 }
@@ -67,7 +67,7 @@
   margin-bottom: 3rem;
 }
 .grid-hero h2 u {
-  border-bottom: .2rem solid #5b657a;
+  border-bottom: .2rem solid currentColor;
   padding-bottom: .1rem;
   text-decoration: none;
 }
@@ -91,16 +91,27 @@
   color: #727e96;
 }
 .docs-content {
-  color: #667189;
   padding-top: 0;
 }
 .docs-content .container {
   padding: 1rem;
 }
 .docs-content header {
-  color: #50596c;
   padding-top: 6rem;
 }
+.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;
 }
@@ -128,6 +139,15 @@
   margin-bottom: 2rem;
   margin-top: 2rem;
 }
+.docs-content h1:hover .anchor,
+.docs-content h2:hover .anchor,
+.docs-content h3:hover .anchor,
+.docs-content h4:hover .anchor,
+.docs-content h5:hover .anchor,
+.docs-content h6:hover .anchor {
+  height: auto;
+  width: auto;
+}
 .docs-content .docs-color {
   border-radius: .2rem;
   margin: .5rem 0;
@@ -161,9 +181,6 @@
 .docs-content .empty .icon {
   font-size: 4rem;
 }
-.docs-content .navbar-brand .icon {
-  font-size: 3rem;
-}
 .docs-content .form-autocomplete .menu {
   position: static;
 }
@@ -196,7 +213,7 @@
     padding: 0 .5rem;
   }
   .docs-sidebar {
-    padding: 7rem 1rem 3.5rem 1rem;
+    padding: 7rem 1rem 5rem 1rem;
   }
   .docs-sidebar .docs-nav {
     position: relative;