Add more layout

docs/_data/links.json

@@ -323,10 +323,6 @@
       "name": "Blog",
       "path": "/blog"
     },
-    "more": {
-      "name": "More",
-      "path": "/more"
-    },
     "expo": {
       "name": "Expo",
       "subtitle": "Official Bulma showcase",
@@ -341,6 +337,10 @@
       "icon": "heart",
       "path": "/love"
     },
+    "more": {
+      "name": "More",
+      "path": "/more"
+    },
     "bulma-start": {
       "name": "Bulma start",
       "subtitle": "A tiny npm package to get started",
@@ -379,8 +379,6 @@
     }
   },
   "more": [
-    "expo",
-    "love",
     "bulma-start",
     "made-with-bulma",
     "bootstrap",

docs/_includes/components/more.html

@@ -0,0 +1,13 @@
+<nav class="bd-categories">
+  {% for link_id in site.data.links.more %}
+    {% assign link = site.data.links.by_id[link_id] %}
+
+    <div class="bd-category">
+      <header class="bd-category-header">
+        <a class="bd-category-name" href="{{ site.url }}{{ link.path }}">
+          <strong>{{ link.name }}</strong>
+        </a>
+      </header>
+    </div>
+  {% endfor %}
+</nav>

docs/_includes/content/pro.html

@@ -10,6 +10,11 @@
     </p>
     <div class="bd-pro-content">
       {{ include.content | markdownify }}
+
+      {% if include.title == 'No JavaScript' %}
+        {% assign tweet = site.data.love.tweetsById.860885116909998080 %}
+        {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
+      {% endif %}
     </div>
   </div>
 </article>

docs/_includes/footer/boxes.html

@@ -1,12 +1,12 @@
-{% assign boostrap_link = site.data.links.by_id['boostrap'] %}
+{% assign bootstrap_link = site.data.links.by_id['bootstrap'] %}
 {% assign expo_link = site.data.links.by_id['expo'] %}
 {% assign love_link = site.data.links.by_id['love'] %}
 
 <div class="bd-footer-stars">
-  <a class="bd-footer-star bd-is-bootstrap" href="{{ site.url }}{{ boostrap_link.path }}">
+  <a class="bd-footer-star bd-is-bootstrap" href="{{ site.url }}{{ bootstrap_link.path }}">
     <header class="bd-footer-star-header">
       <h4 class="bd-footer-title">
-        <strong>Coming from Bootstrap</strong>
+        <strong>{{ bootstrap_link.name }}</strong>
       </h4>
       <p class="bd-footer-subtitle">
         An alternative to Bootstrap
@@ -21,10 +21,10 @@
   <a class="bd-footer-star bd-is-expo" href="{{ site.url }}{{ expo_link.path }}">
     <header class="bd-footer-star-header">
       <h4 class="bd-footer-title">
-        <span class="icon has-text-star">
+        <span class="icon has-text-{{ expo_link.color }}">
-          <i class="fas fa-star"></i>
+          <i class="fas fa-{{ expo_link.icon }}"></i>
         </span>
-        <strong>Expo</strong>
+        <strong>{{ expo_link.name }}</strong>
       </h4>
       <p class="bd-footer-subtitle">
         See what you can build with Bulma
@@ -35,10 +35,10 @@
   <a class="bd-footer-star bd-is-love" href="{{ site.url }}{{ love_link.path }}">
     <header class="bd-footer-star-header">
       <h4 class="bd-footer-title">
-        <span class="icon has-text-danger">
+        <span class="icon has-text-{{ love_link.color }}">
-          <i class="fas fa-heart"></i>
+          <i class="fas fa-{{ love_link.icon }}"></i>
         </span>
-        <strong>Love</strong>
+        <strong>{{ love_link.name }}</strong>
       </h4>
       <p class="bd-footer-subtitle">
         Fans of Bulma

docs/_includes/footer/link.html

@@ -0,0 +1,13 @@
+<p class="bd-footer-link bd-has-subtitle">
+  <a href="{{ site.url }}{{ link.path }}">
+    <span class="bd-footer-link-icon has-text-{{ link.color }}">
+      <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
+    </span>
+    <strong>
+      {{ link.name }}
+    </strong>
+    <em>
+      {{ link.subtitle }}
+    </em>
+  </a>
+</p>

docs/_includes/footer/links.html

@@ -50,22 +50,15 @@
         <a href="{{ site.url }}{{ more_link.path }}">More</a>
       </p>
 
+      {% assign link = site.data.links.by_id['expo'] %}
+      {% include footer/link.html %}
+
+      {% assign link = site.data.links.by_id['love'] %}
+      {% include footer/link.html %}
+
       {% for link_id in site.data.links.more %}
         {% assign link = site.data.links.by_id[link_id] %}
-
+        {% include footer/link.html %}
-        <p class="bd-footer-link bd-has-subtitle">
-          <a href="{{ site.url }}{{ link.path }}">
-            <span class="bd-footer-link-icon has-text-{{ link.color }}">
-              <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
-            </span>
-            <strong>
-              {{ link.name }}
-            </strong>
-            <em>
-              {{ link.subtitle }}
-            </em>
-          </a>
-        </p>
       {% endfor %}
     </div>
   </div>

docs/_includes/layout/main-close.html

@@ -7,7 +7,7 @@
 
       <aside class="bd-side">
         {% if include.show_categories %}
-          {% include elements/categories-nav.html %}
+          {% include components/categories.html %}
         {% endif %}
       </aside>
     </div>

docs/_layouts/documentation.html

@@ -84,7 +84,7 @@ route: documentation
 
       <aside class="bd-side">
         {% unless page.hide_categories %}
-          {% include elements/categories-nav.html %}
+          {% include components/categories.html %}
         {% endunless %}
       </aside>
     </div>

docs/_layouts/more.html

@@ -0,0 +1,85 @@
+---
+layout: default
+route: more
+---
+
+{% include global/navbar.html id="More" %}
+
+{% assign current_link_id = page.breadcrumb | last %}
+{% assign current_link = site.data.links.by_id[current_link_id] %}
+
+{% assign category_links = site.data.links.more %}
+
+{% for link_id in category_links %}
+  {% if link_id == current_link_id %}
+    {% unless forloop.first %}
+      {% assign previous_index = forloop.index0 | minus: 1 %}
+      {% assign previous_link_id = category_links[previous_index] %}
+      {% assign previous_link = site.data.links.by_id[previous_link_id] %}
+    {% endunless %}
+
+    {% unless forloop.last %}
+      {% assign next_index = forloop.index0 | plus: 1 %}
+      {% assign next_link_id = category_links[next_index] %}
+      {% assign next_link = site.data.links.by_id[next_link_id] %}
+    {% endunless %}
+  {% endif %}
+{% endfor %}
+
+<main class="bd-main">
+  <div class="bd-side-background"></div>
+  <div class="bd-main-container container">
+    <div class="bd-duo">
+      <div class="bd-lead">
+        {% include components/breadcrumb.html %}
+
+        <header class="bd-header">
+          <div class="bd-header-titles">
+            <h1 class="title">
+              {% if page.title %}
+                {{ page.title }}
+              {% else %}
+                {{ current_link.name }}
+              {% endif %}
+            </h1>
+            <p class="subtitle is-4">
+              {% if page.subtitle %}
+                {{ page.subtitle }}
+              {% else %}
+                {{ current_link.subtitle }}
+              {% endif %}
+            </p>
+          </div>
+
+          <div class="bd-header-carbon">
+            {% include elements/carbon.html %}
+          </div>
+        </header>
+
+        <div class="bd-content">
+          {{ content }}
+        </div>
+
+        <nav class="bd-prev-next-bis">
+          {% if previous_link %}
+            <a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
+              ← {{ previous_link.name }}
+            </a>
+          {% endif %}
+
+          {% if next_link %}
+            <a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
+              {{ next_link.name }} →
+            </a>
+          {% endif %}
+        </nav>
+
+        {% include elements/improve-page.html %}
+      </div>
+
+      <aside class="bd-side">
+        {% include components/more.html %}
+      </aside>
+    </div>
+  </div>
+</main>

docs/_sass/bootstrap.sass

@@ -1,20 +1,8 @@
 $bootstrap: #6f5499
 $bootstrap-invert: #fff
 
-.bd-bootstrap
+.bd-bootstrap-table
-  .hero
+  margin: 3rem 0
-    background-color: $bootstrap
-    color: $bootstrap-invert
-    .title,
-    .subtitle
-      color: currentColor
-    .subtitle
-      color: rgba($bootstrap-invert, 0.5)
-    .subtitle a
-      border-bottom: 1px solid currentColor
-      color: currentColor
-      &:hover
-        color: $bootstrap-invert
 
 .bd-pros-heading
   padding: 0 2rem
@@ -54,11 +42,7 @@ $bootstrap-invert: #fff
   .icon
     color: $bootstrap
 
-.bd-separator
+.bd-bootstrap-comparison
-  color: $border
-  margin: 0 0.25em
-
-.bd-comparison
   margin: 0 auto
   max-width: 42rem
   .table
@@ -93,5 +77,5 @@ $bootstrap-invert: #fff
       color: $text-strong
       font-weight: $weight-bold
 
-.bd-comparison-header
+.bd-bootstrap-comparison-header
   margin-bottom: 3rem

docs/alternative-to-bootstrap.html

@@ -1,4 +1,10 @@
 ---
+fulltitle: "Bulma: an alternative to Bootstrap"
+layout: more
+breadcrumb:
+- home
+- more
+- bootstrap
 bulma:
 - type: "bulma"
   icon: "css3"
@@ -25,7 +31,7 @@ bulma:
 - type: "bulma"
   icon: "code"
   title: "No JavaScript"
-  content: '<p>By focusing only on <strong>CSS</strong>, Bulma provides a lightweight solution that can easily be implemented in <strong>any development context</strong>.</p><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/vY1ZsRScYM">https://t.co/vY1ZsRScYM</a> -- a CSS framework by <a href="https://twitter.com/jgthms">@jgthms</a> -- is lovely! No JS included, which means no JS opinions included!</p>&mdash; Robert Stuttaford (@RobStuttaford) <a href="https://twitter.com/RobStuttaford/status/860885116909998080">May 6, 2017</a></blockquote>'
+  content: '<p>By focusing only on <strong>CSS</strong>, Bulma provides a lightweight solution that can easily be implemented in <strong>any development context</strong>.</p>'
 bootstrap:
 - type: "bootstrap"
   icon: "plug"
@@ -46,84 +52,13 @@ bootstrap:
   content: "Bootstrap has some **elements** like [list group](https://getbootstrap.com/components/#list-group), [wells](https://getbootstrap.com/components/#wells), or [page header](https://getbootstrap.com/components/#page-header) that Bulma doesn't have."
 ---
 
-<!DOCTYPE html>
+<div class="bd-bootstrap-message notification is-radiusless">
-<html lang="en" class="has-navbar-fixed-top">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.data.meta.description }}{% endif %}">
-
-    <title>Bulma: an alternative to Bootstrap</title>
-
-    <link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
-
-    <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
-    <link rel="alternate" type="application/rss+xml" title="{{ site.data.meta.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
-
-    <meta property="og:url" content="{{site.url}}">
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="{{site.data.meta.title}}">
-    <meta property="og:image" content="{{site.url}}/images/bulma-banner.png">
-    <meta property="og:image:type" content="image/png">
-    <meta property="og:image:width" content="1200">
-    <meta property="og:image:height" content="630">
-    <meta property="og:description" content="{{site.data.meta.description}}">
-
-    <meta name="twitter:card" content="summary_large_image">
-    <meta name="twitter:site" content="@jgthms">
-    <meta name="twitter:creator" content="@jgthms">
-    <meta name="twitter:title" content="{{site.data.meta.title}}">
-    <meta name="twitter:image" content="{{site.url}}/images/bulma-banner.png">
-    <meta name="twitter:description" content="{{site.data.meta.description}}">
-
-    <link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201701041855">
-    <link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
-    <link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
-    <link rel="manifest" href="{{site.url}}/favicons/manifest.json?v=201701041855">
-    <link rel="mask-icon" href="{{site.url}}/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
-    <link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201701041855">
-    <meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201701041855">
-    <meta name="theme-color" content="#00d1b2">
-
-    <script defer src="{{ site.data.icons.fontawesome5 }}"></script>
-  </head>
-  <body>
-    {% include global/navbar.html id="Documentation" %}
-
-    <main class="bd-bootstrap">
-      <section class="hero is-medium">
-        <div class="hero-body">
-          <div class="container">
-            <div class="columns is-vcentered">
-              <div class="column">
-                <h1 class="title">
-                  Bulma: an alternative to Bootstrap
-                </h1>
-                <p class="subtitle">
-                  Learn how Bulma can become a replacement for <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>
-                </p>
-              </div>
-              <div class="column is-narrow">
-                {% include elements/carbon.html %}
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    </main>
-
-    <div class="section notification is-radiusless">
   <h2 class="subtitle">
-        <div class="container">
     Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
-        </div>
   </h2>
 </div>
 
-    <section class="section">
+<div class="bd-bootstrap-table">
-      <div class="container">
-
   <div class="columns is-desktop">
     <div class="column is-half-desktop">
       <h3 class="subtitle is-3 has-text-centered pros-heading">
@@ -167,16 +102,10 @@ bootstrap:
       </div>
     </div>
   </div>
-
 </div>
-    </section>
 
-    <hr>
+<div class="bd-bootstrap-comparison">
-
+  <header class="bd-bootstrap-comparison-header has-text-centered">
-    <section class="section">
-      <div class="container">
-        <div class="bd-comparison">
-          <header class="bd-comparison-header has-text-centered">
     <h2 class="title">
       Comparison table
     </h2>
@@ -202,9 +131,3 @@ bootstrap:
     </tbody>
   </table>
 </div>
-      </div>
-    </section>
-
-    {% include global/footer.html %}
-  </body>
-</html>

docs/backers.html

@@ -1,33 +1,13 @@
 ---
 title: Backers via Patreon
-layout: default
+layout: more
 route: backers
+breadcrumb:
+- home
+- more
+- patreon-backers
 ---
 
-{% include global/navbar.html id="BackersNavbar" %}
-
-<section class="hero is-primary bd-is-patreon">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column">
-          <h1 class="title">
-            Backers via Patreon
-          </h1>
-          <p class="subtitle">
-            Everyone who is supporting Bulma
-          </p>
-        </div>
-        <div class="column is-narrow">
-          {% include elements/carbon.html %}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<section class="section">
-  <div class="container">
 <h2 class="title is-5">
   Website sponsors via Patreon ($300+)
 </h2>
@@ -71,5 +51,3 @@ route: backers
     {% endfor %}
   </ul>
 </div>
-  </div>
-</section>

docs/bulma-start.html

@@ -1,36 +1,17 @@
 ---
+title: "Bulma start"
 fulltitle: "Bulma start: a tiny npm package to get started with Bulma"
-layout: default
+layout: more
 route: bulma-start
 download_url: https://github.com/jgthms/bulma-start/archive/master.zip
 github_url: https://github.com/jgthms/bulma-start
 npm_url: https://www.npmjs.com/package/bulma-start
+breadcrumb:
+- home
+- more
+- bulma-start
 ---
 
-{% include global/navbar.html id="BulmaStartHero" %}
-
-<section class="hero is-success">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column">
-          <h1 class="title">
-            Bulma Start
-          </h1>
-          <p class="subtitle">
-            Tiny npm package to get started with Bulma
-          </p>
-        </div>
-        <div class="column is-narrow">
-          {% include elements/carbon.html %}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<section class="section">
-  <div class="container">
 <div class="columns">
   <div class="column is-5-widescreen">
     <p class="title is-4"><code><a target="_blank" href="{{ page.npm_url }}">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> <strong>dependencies</strong> you need to <strong>build your own website</strong> with Bulma.</p>
@@ -77,5 +58,3 @@ npm_url: https://www.npmjs.com/package/bulma-start
     <li><code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code></li>
   </ul>
 </div>
-  </div>
-</section>

docs/css/bulma-docs.css

@@ -12212,27 +12212,8 @@ svg {
   }
 }
 
-.bd-bootstrap .hero {
+.bd-bootstrap-table {
-  background-color: #6f5499;
+  margin: 3rem 0;
-  color: #fff;
-}
-
-.bd-bootstrap .hero .title,
-.bd-bootstrap .hero .subtitle {
-  color: currentColor;
-}
-
-.bd-bootstrap .hero .subtitle {
-  color: rgba(255, 255, 255, 0.5);
-}
-
-.bd-bootstrap .hero .subtitle a {
-  border-bottom: 1px solid currentColor;
-  color: currentColor;
-}
-
-.bd-bootstrap .hero .subtitle a:hover {
-  color: #fff;
 }
 
 .bd-pros-heading {
@@ -12281,28 +12262,23 @@ svg {
   color: #6f5499;
 }
 
-.bd-separator {
+.bd-bootstrap-comparison {
-  color: #dbdbdb;
-  margin: 0 0.25em;
-}
-
-.bd-comparison {
   margin: 0 auto;
   max-width: 42rem;
 }
 
-.bd-comparison .table {
+.bd-bootstrap-comparison .table {
   color: #ff3860;
 }
 
-.bd-comparison .table thead th,
+.bd-bootstrap-comparison .table thead th,
-.bd-comparison .table tfoot th {
+.bd-bootstrap-comparison .table tfoot th {
   font-size: 1.5rem;
   text-align: center;
 }
 
-.bd-comparison .table thead svg,
+.bd-bootstrap-comparison .table thead svg,
-.bd-comparison .table tfoot svg {
+.bd-bootstrap-comparison .table tfoot svg {
   height: 1.5rem;
   margin-right: 1rem;
   position: relative;
@@ -12310,36 +12286,36 @@ svg {
   width: auto;
 }
 
-.bd-comparison .table tbody th {
+.bd-bootstrap-comparison .table tbody th {
   font-size: 1.25rem;
   text-align: center;
 }
 
-.bd-comparison .table tbody td {
+.bd-bootstrap-comparison .table tbody td {
   font-family: monospace;
   width: 50%;
 }
 
-.bd-comparison .table tbody a {
+.bd-bootstrap-comparison .table tbody a {
   color: currentColor;
 }
 
-.bd-comparison .table tbody a:hover {
+.bd-bootstrap-comparison .table tbody a:hover {
   text-decoration: underline;
 }
 
-.bd-comparison .table .bd-is-empty {
+.bd-bootstrap-comparison .table .bd-is-empty {
   background-color: whitesmoke;
   color: #7a7a7a;
 }
 
-.bd-comparison .table .bd-is-unique {
+.bd-bootstrap-comparison .table .bd-is-unique {
   background-color: rgba(35, 209, 96, 0.25);
   color: #363636;
   font-weight: 700;
 }
 
-.bd-comparison-header {
+.bd-bootstrap-comparison-header {
   margin-bottom: 3rem;
 }
 

docs/extensions.html

@@ -1,7 +1,12 @@
 ---
 title: Extensions
-layout: default
+layout: more
 route: extensions
+route: backers
+breadcrumb:
+- home
+- more
+- extensions
 extensions:
 - name: bulma-accordion
   url: https://wikiki.github.io/components/accordion
@@ -110,30 +115,6 @@ extensions:
   height: 469
 ---
 
-{% include global/navbar.html id="Extensions" %}
-
-<section class="hero is-danger">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column">
-          <h1 class="title">
-            <a href="{{ site.url }}/blog">Extensions</a>
-          </h1>
-          <p class="subtitle">
-            Side projects to enhance Bulma
-          </p>
-        </div>
-        <div class="column is-narrow">
-          {% include elements/carbon.html %}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<section class="section">
-  <div class="container">
 {% for extension in page.extensions %}
   <a class="box" href="{{ extension.url }}">
     <div class="columns">
@@ -170,5 +151,3 @@ extensions:
     </div>
   </div>
 </div>
-  </div>
-</section>

docs/made-with-bulma.html

@@ -1,7 +1,11 @@
 ---
 fulltitle: Made with Bulma badges
-layout: default
+layout: more
 route: made-with-bulma
+breadcrumb:
+- home
+- more
+- made-with-bulma
 images:
 - name: "Default"
   description: "White boxed"
@@ -41,30 +45,6 @@ images:
 </a>
 {% endcapture %}
 
-{% include global/navbar.html id="MadeWithBulmaHero" %}
-
-<section class="hero is-primary">
-  <div class="hero-body">
-    <div class="container">
-      <div class="columns is-vcentered">
-        <div class="column">
-          <h1 class="title">
-            Made with Bulma
-          </h1>
-          <p class="subtitle">
-            Join the Bulma community by displaying a badge on your website
-          </p>
-        </div>
-        <div class="column is-narrow">
-          {% include elements/carbon.html %}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
-
-<section class="section">
-  <div class="container">
 <h2 class="title">6 badges available</h2>
 <div class="content">
   <p>
@@ -158,6 +138,3 @@ images:
   </div>
 </div>
 {% endfor %}
-  </div>
-</section>
-