Update Docs experience

trilbymedia · Aug 2, 2017 · ba51cc1 · ba51cc1
1 parent ad7ee1b
commit ba51cc1
Show file tree

Hide file tree

Showing 13 changed files with 86 additions and 88 deletions.
diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Media](https://picturepan2.github.io/spectre/elements.html#media) - responsive images, figures and video classes
 
 #### Layout
-- [Flexbox-grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system
+- [Flexbox grid](https://picturepan2.github.io/spectre/layout.html#grid) - flexbox based responsive grid system
 - [Responsive](https://picturepan2.github.io/spectre/layout.html#responsive) - responsive grid and utilities
 - [Navbar](https://picturepan2.github.io/spectre/layout.html#navbar) - layout container that appears in the header of apps and websites
 - [Panels](https://picturepan2.github.io/spectre/layout.html#panels) - flexible view container layout with auto-expand content section
@@ -63,14 +63,17 @@ You can compile your custom version of Spectre.css. Read [the documentation](htt
 - [Autocomplete](https://picturepan2.github.io/spectre/components.html#autocomplete) - form component provides suggestions while you type
 - [Avatars](https://picturepan2.github.io/spectre/components.html#avatars) - user profile pictures or name initials rendered avatar
 - [Badges](https://picturepan2.github.io/spectre/components.html#badges) - unread number indicators
+- [Breadcrumbs](https://picturepan2.github.io/spectre/components.html#breadcrumbs) - navigational hierarchy
 - [Bars](https://picturepan2.github.io/spectre/components.html#bars) - progress of a task or the value within the known range
 - [Cards](https://picturepan2.github.io/spectre/components.html#cards) - flexible content containers
 - [Chips](https://picturepan2.github.io/spectre/components.html#chips) - complex entities in small blocks
 - [Menus](https://picturepan2.github.io/spectre/components.html#menus) - list of links or buttons for actions and navigation
+- [Navs](https://picturepan2.github.io/spectre/components.html#navs) - navigational list of links
 - [Modals](https://picturepan2.github.io/spectre/components.html#modals) - flexible dialog prompts
-- [Navigation](https://picturepan2.github.io/spectre/components.html#navigation) - breadcrumb, tabs, pagination and navs
+- [Pagination](https://picturepan2.github.io/spectre/components.html#pagination) - navigational links for multiple pages
 - [Popovers](https://picturepan2.github.io/spectre/components.html#popovers) - small overlay content containers
 - [Steps](https://picturepan2.github.io/spectre/components.html#steps) - progress indicators of a sequence of task steps
+- [Tabs](https://picturepan2.github.io/spectre/components.html#tabs) - toggle for different views
 - [Tiles](https://picturepan2.github.io/spectre/components.html#tiles) - repeatable or embeddable information blocks
 - [Toasts](https://picturepan2.github.io/spectre/components.html#toasts) - showing alerts or notifications
 - [Tooltips](https://picturepan2.github.io/spectre/components.html#tooltips) - simple tooltip built entirely in CSS

diff --git a/docs/components.html b/docs/components.html
@@ -17,8 +17,7 @@
       <nav class="navbar">
         <section class="navbar-section">
           <a href="#sidebar" class="btn btn-lg btn-link btn-action show-sm"><i class="icon icon-menu"></i></a>
-          <a href="index.html" class="navbar-brand mr-10">Spectre.css</a>
-          <a href="index.html" class="btn btn-link">Docs</a>
+          <a href="index.html" class="navbar-brand">Spectre.css Docs</a>
         </section>
         <section class="navbar-section">
           <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
@@ -1755,6 +1754,9 @@ <h4 class="page-item-title">Layout</h4>
 
         <section id="tabs" class="container">
           <header class="text-center"><h3><a href="#tabs" class="anchor" aria-hidden="true">#</a>Tabs</h3></header>
+          <section class="notes">
+            <p><strong>Tabs</strong> enable quick switch between different views.</p>
+          </section>
           <div class="columns">
             <div class="column col-6 col-sm-12">
               <ul class="tab">

diff --git a/docs/dist/spectre-exp.css b/docs/dist/spectre-exp.css
@@ -78,7 +78,7 @@
   color: #5764c6;
 }
 .calendar .calendar-date .date-item:focus {
-  box-shadow: 0 0 0 2px rgba(69, 77, 93, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
 }
 .calendar .calendar-date .date-item:focus,
 .calendar .calendar-date .date-item:hover {
@@ -723,7 +723,7 @@
   width: 100%;
 }
 .slider:focus {
-  box-shadow: 0 0 0 2px rgba(69, 77, 93, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
   outline: none;
 }
 .slider::-webkit-slider-thumb {

diff --git a/docs/dist/spectre-exp.min.css b/docs/dist/spectre-exp.min.css
diff --git a/docs/dist/spectre.css b/docs/dist/spectre.css
@@ -403,7 +403,7 @@ a {
   text-decoration: none;
 }
 a:focus {
-  box-shadow: 0 0 0 2px rgba(69, 77, 93, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
 }
 a:focus,
 a:hover,
@@ -614,7 +614,7 @@ dl dd {
 }
 .btn:focus {
   background: #eff1fa;
-  box-shadow: 0 0 0 2px rgba(69, 77, 93, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
   text-decoration: none;
 }
 .btn:hover {
@@ -794,7 +794,7 @@ dl dd {
 }
 .form-input:focus {
   border-color: #5764c6;
-  box-shadow: 0 0 0 2px rgba(69, 77, 93, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
 }
 .form-input::-webkit-input-placeholder {
   color: #acb3c2;
@@ -865,7 +865,7 @@ textarea.form-input {
 }
 .form-select:focus {
   border-color: #5764c6;
-  box-shadow: 0 0 0 2px rgba(69, 77, 93, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
 }
 .form-select::-ms-expand {
   display: none;
@@ -962,7 +962,7 @@ textarea.form-input {
 .form-radio input:focus + .form-icon,
 .form-switch input:focus + .form-icon {
   border-color: #5764c6;
-  box-shadow: 0 0 0 2px rgba(69, 77, 93, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
 }
 .form-checkbox input:checked + .form-icon,
 .form-radio input:checked + .form-icon,
@@ -1835,7 +1835,7 @@ code {
 }
 .form-autocomplete .form-autocomplete-input.is-focused {
   border-color: #5764c6;
-  box-shadow: 0 0 0 2px rgba(69, 77, 93, .1);
+  box-shadow: 0 0 0 2px rgba(87, 100, 198, .1);
 }
 .form-autocomplete .form-autocomplete-input .form-input {
   border-color: transparent;
@@ -2166,11 +2166,10 @@ code {
 }
 .menu .menu-item > a {
   border-radius: 2px;
-  box-shadow: none;
   color: inherit;
   display: block;
-  margin: 0 -8px;
-  padding: 6px 8px;
+  margin: 4px -8px;
+  padding: 4px 8px;
   text-decoration: none;
 }
 .menu .menu-item > a:focus,
@@ -2185,7 +2184,7 @@ code {
 }
 .menu .menu-badge {
   float: right;
-  padding: 6px 0;
+  padding: 4px 0;
 }
 .menu .menu-badge .btn {
   margin-top: -2px;

diff --git a/docs/dist/spectre.min.css b/docs/dist/spectre.min.css
diff --git a/docs/elements.html b/docs/elements.html
@@ -17,8 +17,7 @@
       <nav class="navbar">
         <section class="navbar-section">
           <a href="#sidebar" class="btn btn-lg btn-link btn-action show-sm"><i class="icon icon-menu"></i></a>
-          <a href="index.html" class="navbar-brand mr-10">Spectre.css</a>
-          <a href="index.html" class="btn btn-link">Docs</a>
+          <a href="index.html" class="navbar-brand">Spectre.css Docs</a>
         </section>
         <section class="navbar-section">
           <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
@@ -954,19 +953,19 @@ <h5>Korean</h5>
             <div class="column col-4">
               <div class="has-icon-left">
                 <input class="form-input input-sm" type="text" placeholder="Name" />
-                <i class="form-icon icon icon-cross"></i>
+                <i class="form-icon icon icon-arrow-right"></i>
               </div>
             </div>
             <div class="column col-4">
               <div class="has-icon-left">
                 <input class="form-input" type="text" placeholder="Name" />
-                <i class="form-icon icon icon-cross"></i>
+                <i class="form-icon icon icon-arrow-right"></i>
               </div>
             </div>
             <div class="column col-4">
               <div class="has-icon-left">
                 <input class="form-input input-lg" type="text" placeholder="Name" />
-                <i class="form-icon icon icon-cross"></i>
+                <i class="form-icon icon icon-arrow-right"></i>
               </div>
             </div>
           </div>

diff --git a/docs/experimentals.html b/docs/experimentals.html
@@ -18,8 +18,7 @@
       <nav class="navbar">
         <section class="navbar-section">
           <a href="#sidebar" class="btn btn-lg btn-link btn-action show-sm"><i class="icon icon-menu"></i></a>
-          <a href="index.html" class="navbar-brand mr-10">Spectre.css</a>
-          <a href="index.html" class="btn btn-link">Docs</a>
+          <a href="index.html" class="navbar-brand">Spectre.css Docs</a>
         </section>
         <section class="navbar-section">
           <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>

diff --git a/docs/index.html b/docs/index.html
@@ -17,8 +17,7 @@
       <nav class="navbar">
         <section class="navbar-section">
           <a href="#sidebar" class="btn btn-lg btn-link btn-action show-sm"><i class="icon icon-menu"></i></a>
-          <a href="index.html" class="navbar-brand mr-10">Spectre.css</a>
-          <a href="index.html" class="btn btn-link">Docs</a>
+          <a href="index.html" class="navbar-brand">Spectre.css Docs</a>
         </section>
         <section class="navbar-section">
           <a href="https://github.com/picturepan2/spectre" target="_blank" class="btn btn-primary">GitHub</a>
@@ -521,7 +520,7 @@ <h5>Colors</h5>
             <p><strong>April 2017</strong></p>
             <ul>
               <li>
-                <a href="experimentals.html#accordions">Accordions</a>: used to toggle sections of content <small class="label label-primary">NEW</small>
+                <a href="components.html#accordions">Accordions</a>: used to toggle sections of content <small class="label label-primary">NEW</small>
               </li>
               <li>
                 <a href="experimentals.html#filters">Filters</a>: CSS only content filters <small class="label label-primary">NEW</small>