Add documentation tabs

kdrdgn · Jul 12, 2018 · 5a47885 · 5a47885
1 parent fcaea07
commit 5a47885
Show file tree

Hide file tree

Showing 13 changed files with 77 additions and 12 deletions.
diff --git a/docs/_data/links.json b/docs/_data/links.json
@@ -17,7 +17,7 @@
       "path": "/documentation/overview"
     },
     "overview-start": {
-      "name": "Getting started",
+      "name": "Start",
       "subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
       "color": "danger",
       "icon": "rocket",
@@ -31,7 +31,7 @@
       "path": "/documentation/overview/customize"
     },
     "overview-classes": {
-      "name": "CSS Classes",
+      "name": "Classes",
       "subtitle": "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.",
       "color": "link",
       "icon_brand": "true",

diff --git a/docs/_layouts/documentation.html b/docs/_layouts/documentation.html
@@ -61,6 +61,25 @@ <h1 class="title">
           </div>
         </header>
 
+        {% if page.hide_tabs %}
+          <hr style="margin: 0 0 3rem;">
+        {% else %}
+          <nav class="bd-tabs">
+            <div class="tabs">
+              <ul>
+                {% for link_id in category_links %}
+                  {% assign link = site.data.links.by_id[link_id] %}
+                  <li {% if link_id == current_link_id %}class="is-active"{% endif %}>
+                    <a href="{{ site.url }}{{ link.path }}">
+                      {{ link.name }}
+                    </a>
+                  </li>
+                {% endfor %}
+              </ul>
+            </div>
+          </nav>
+        {% endif %}
+
         <div class="bd-content">
           {{ content }}
         </div>

diff --git a/docs/_sass/main.sass b/docs/_sass/main.sass
@@ -45,16 +45,30 @@
   margin-left: auto
 
 .bd-header
-  border-bottom: 2px solid $background
   margin-bottom: $main-spacing
-  padding-bottom: $main-spacing
   .subtitle
     color: $text-light
     strong
       color: currentColor
   #meta
     margin-top: -0.5rem
 
+.bd-tabs
+  margin-bottom: $main-spacing
+  .tabs
+    overflow: visible
+    ul,
+    a
+      border-bottom-color: $white-ter
+      border-bottom-width: 2px
+    ul
+      flex-wrap: wrap
+      max-width: 100%
+    a
+      margin-bottom: -2px
+    li:not(.is-active) a:hover
+        border-bottom-color: $border
+
 .bd-content
   hr:first-child
     display: none
@@ -195,7 +209,7 @@
   .bd-header
     align-items: center
     display: flex
-    min-height: 130px
+    min-height: 140px
   .bd-header-titles
     flex-grow: 1
     flex-shrink: 1

diff --git a/docs/bulma-docs.sass b/docs/bulma-docs.sass
@@ -22,7 +22,7 @@ $carbon-width: 300px
 $carbon-height: 100px
 $main-spacing: 3rem
 $intro-width: 1080px
-$sidebar-width: 14rem
+$sidebar-width: 10.5rem
 
 @import "../bulma"
 

diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css
diff --git a/docs/css/bulma-docs.min.css b/docs/css/bulma-docs.min.css
diff --git a/docs/documentation/columns.html b/docs/documentation/columns.html
@@ -2,6 +2,7 @@
 title: Columns
 layout: documentation
 doc-tab: columns
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

diff --git a/docs/documentation/components.html b/docs/documentation/components.html
@@ -2,6 +2,7 @@
 title: Components
 layout: documentation
 doc-tab: components
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

diff --git a/docs/documentation/elements.html b/docs/documentation/elements.html
@@ -2,6 +2,7 @@
 title: Elements
 layout: documentation
 doc-tab: elements
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

diff --git a/docs/documentation/form.html b/docs/documentation/form.html
@@ -2,6 +2,7 @@
 title: Form
 layout: documentation
 doc-tab: form
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

diff --git a/docs/documentation/layout.html b/docs/documentation/layout.html
@@ -2,6 +2,7 @@
 title: Layout
 layout: documentation
 doc-tab: layout
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

diff --git a/docs/documentation/modifiers.html b/docs/documentation/modifiers.html
@@ -2,6 +2,7 @@
 title: Modifiers
 layout: documentation
 doc-tab: modifiers
+hide_tabs: true
 breadcrumb:
 - home
 - documentation

diff --git a/docs/documentation/overview.html b/docs/documentation/overview.html
@@ -2,6 +2,7 @@
 title: Overview
 layout: documentation
 doc-tab: overview
+hide_tabs: true
 breadcrumb:
 - home
 - documentation