jekyll_patternbot 0.12.0

data/_includes/patternbot_pattern_brand_typeface_weight.html

@@ -0,0 +1,15 @@
+<ul class="patternbot-code-details patternbot-list-group list-group-inline micro push-1-2 pad-t">
+  <li><code>font-weight: {{include.weight.weight}};</code></li>
+  <li><code>font-style: {{include.style}};</code></li>
+</ul>
+<div class="grid grid-middle" style="font-weight:{{include.weight.weight}};">
+  <div class="patternbot-type-sample-large unit [ xs-1 m-1-5 ]">
+    <p class="yotta push-0" style="font-family:var({{include.font_var}});">Aa Gg<br>Ss Zz</p>
+  </div>
+  <div class="unit [ xs-1 m-4-5 ]">
+    <p class="giga push-0" style="font-family:var({{include.font_var}});">a b c d e f g h i j k l m n o p q r s t u v w x y z</p>
+    <p class="giga push-0" style="font-family:var({{include.font_var}});">A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</p>
+    <p class="tera push-0" style="font-family:var({{include.font_var}});">1 2 3 4 5 6 7 8 9 0</p>
+    <p class="exa push-0" style="font-family:var({{include.font_var}});">&amp; % $ # @ ! * ? , . ; — – - ( ) “ ” ‘ ’ « »</p>
+  </div>
+</div>

data/_includes/patternbot_pattern_copy_script.html

@@ -0,0 +1,22 @@
+<script>
+  /*
+    ================================================
+    COPY BUTTONS
+    ================================================
+  */
+  (function () {
+    'use strict';
+
+    var copyBtns = document.querySelectorAll('.pattern-copy-btn');
+
+    if (!copyBtns) return;
+
+    if (ClipboardJS.isSupported()) {
+      [].forEach.call(copyBtns, function (btn) {
+        btn.removeAttribute('hidden');
+      });
+
+      new ClipboardJS('.pattern-copy-btn');
+    }
+  }());
+</script>

data/_includes/patternbot_patternlib_pattern.html

@@ -0,0 +1,241 @@
+{% assign show_sub_headings = false %}
+{% assign total_patterns = include.pattern.config.patterns | size %}
+{% if total_patterns > 1 %}
+  {% assign show_sub_headings = true %}
+{% endif %}
+
+{% assign first_pattern_name = false %}
+{% assign first_pattern = false %}
+{% for pattern in include.pattern.config.patterns %}
+  {% assign first_pattern_name = pattern[0] %}
+  {% assign first_pattern = pattern[1] %}
+  {% break %}
+{% endfor %}
+
+{% assign first_pattern_has_bg = false %}
+{% assign first_pattern_bg = false %}
+{% if first_pattern.background %}
+  {% assign first_pattern_has_bg = true %}
+  {% assign first_pattern_bg = first_pattern.background %}
+{% endif %}
+
+{% assign internal_first_pattern_has_bg = first_pattern_name | has_pattern_background_color:include.pattern.name %}
+{% if internal_first_pattern_has_bg %}
+  {% assign first_pattern_has_bg = true %}
+  {% assign first_pattern_bg = first_pattern_name | get_pattern_background_color:include.pattern.name %}
+{% endif %}
+
+{% if first_pattern_has_bg %}
+  <style>
+    #{{include.pattern.name}},
+    #{{include.pattern.name}} * {
+      --color-patternbot-interface: {{first_pattern_bg | get_interface_color | as_rgb_digit}};
+      --color-patternbot-interface-opposite: {{first_pattern_bg | get_interface_color_opposite | as_rgb_digit}};
+      --color-patternbot-interface-background: {{first_pattern_bg | as_hex}};
+      --color-patternbot-interface-accent: {{first_pattern_bg | get_interface_color | as_hex}};
+    }
+
+    #{{include.pattern.name}}.patternbot-override-color,
+    #{{include.pattern.name}} .patternbot-override-color {
+      color: {{first_pattern_bg | get_interface_color | as_hex}};
+      background-color: var(--color-patternbot-interface-background);
+    }
+  </style>
+{% endif %}
+
+<section class="pattern {% unless show_sub_headings %}patternbot-override-color{% endunless %}" id="{{include.pattern.name}}" role="tabpanel" hidden aria-hidden="true">
+  <div class="pattern-toolbar gutter pad-t-1-4 pad-b-1-8 relative">
+    <h2 class="pattern-name exa push-1-4">{% if include.pattern.config.title %}{{include.pattern.config.title}}{% else %}{{include.pattern.name | as_title}}{% endif %}</h2>
+    {% if show_sub_headings %}
+      <nav class="pattern-nav">
+        <ol class="list-group-inline push-1-4 pad-b-1-4">
+          {% for pattern in include.pattern.config.patterns %}
+            <li><a href="#{{include.pattern.name}}--{{pattern[0]}}">{% if pattern[1].title %}{{pattern[1].title}}{% else %}{{pattern[0] | as_title}}{% endif %}</a></li>
+          {% endfor %}
+        </ol>
+      </nav>
+    {% endif %}
+    {% unless show_sub_headings %}
+      <ul class="list-group-inline gutter absolute pin-cr">
+        {% if first_pattern._code != false %}
+          <li>
+            <button class="center-contents-vertical pattern-tool-btn pattern-code-btn" title="Show code" aria-label="Show code" aria-pressed="false" aria-controls="{{include.pattern.name}}-{{first_pattern_name}}-code-sample">
+              <i class="icon i-18">
+                <svg><use xlink:href="#icon-code"></use></svg>
+              </i>
+            </button>
+          </li>
+        {% endif %}
+        {% if first_pattern._popout_button != false %}
+          <li>
+            <a class="center-contents-vertical pattern-tool-btn pattern-pop-btn" href="/{{page._PatternbotConfig.patternbot.destination}}/patterns/{{include.pattern.name}}/{{first_pattern_name | normalize_filename}}" target="_blank" title="Open pattern in a new tab" aria-label="Open pattern in a new tab">
+              <i class="icon i-18">
+                <svg><use xlink:href="#icon-pop-out"></use></svg>
+              </i>
+            </a>
+          </li>
+        {% endif %}
+      </ul>
+    {% endunless %}
+  </div>
+
+  {% if include.pattern.config.description %}
+    <div class="pattern-desc milli island {% unless show_sub_headings %}patternbot-override-color{% endunless %}">
+      <div class="max-length">{{include.pattern.config.description | markdownify | sub_web_dev_tool_urls}}</div>
+    </div>
+  {% else %}
+    {% if first_pattern.description %}
+      <div class="pattern-desc milli island {% unless show_sub_headings %}patternbot-override-color{% endunless %}">
+        <div class="max-length">{{first_pattern.description | markdownify | sub_web_dev_tool_urls}}</div>
+      </div>
+    {% endif %}
+  {% endif %}
+
+  {% for pattern in include.pattern.config.patterns %}
+    {% assign pattern_name = pattern[0] %}
+    {% assign pattern_data = pattern[1] %}
+    {% assign pattern_has_bg = false %}
+    {% assign pattern_bg = false %}
+    {% if pattern_data.background %}
+      {% assign pattern_has_bg = true %}
+      {% assign pattern_bg = pattern_data.background %}
+    {% endif %}
+    {% assign internal_pattern_has_bg = pattern_name | has_pattern_background_color: include.pattern.name %}
+    {% if internal_pattern_has_bg %}
+      {% assign pattern_has_bg = true %}
+      {% assign pattern_bg = pattern_name | get_pattern_background_color: include.pattern.name %}
+    {% endif %}
+    {% if pattern_has_bg %}
+      <style>
+        #{{include.pattern.name}}--{{pattern_name}},
+        #{{include.pattern.name}}--{{pattern_name}} * {
+          --color-patternbot-interface: {{pattern_bg | get_interface_color | as_rgb_digit}};
+          --color-patternbot-interface-opposite: {{pattern_bg | get_interface_color_opposite | as_rgb_digit}};
+          --color-patternbot-interface-background: {{pattern_bg | as_hex}};
+          --color-patternbot-interface-accent: {{pattern_bg | get_interface_color | as_hex}};
+        }
+
+        #{{include.pattern.name}}--{{pattern_name}}.patternbot-override-color,
+        #{{include.pattern.name}}--{{pattern_name}} .patternbot-override-color {
+          color: {{pattern_bg | get_interface_color | as_hex}};
+          background-color: var(--color-patternbot-interface-background);
+        }
+      </style>
+    {% endif %}
+    <div class="pattern-details {% if pattern_has_bg %}patternbot-override-color{% endif %}" id="{{include.pattern.name}}--{{pattern_name}}">
+      {% if show_sub_headings %}
+        <div class="pattern-toolbar pattern-toolbar-inner relative gutter pad-t-1-4 pad-b-1-4">
+          <h3 class="pattern-name tera push-1-8">{% if pattern_data.title %}{{pattern_data.title}}{% else %}{{pattern_name | as_title}}{% endif %}</h3>
+            <ul class="list-group-inline gutter absolute pin-cr">
+              {% if pattern_data._code != false %}
+                <li>
+                  <button class="center-contents-vertical pattern-tool-btn pattern-code-btn" title="Show code" aria-label="Show code" aria-pressed="false" aria-controls="{{include.pattern.name}}-{{pattern_name}}-code-sample">
+                    <i class="icon i-18">
+                      <svg><use xlink:href="#icon-code"></use></svg>
+                    </i>
+                  </button>
+                </li>
+              {% endif %}
+              {% if pattern_data._popout_button != false %}
+                <li>
+                  <a class="btn center-contents-vertical pattern-tool-btn pattern-pop-btn" href="/{{page._PatternbotConfig.patternbot.destination}}/patterns/{{include.pattern.name}}/{{pattern_name | normalize_filename}}" target="_blank" title="Open pattern in a new tab" aria-label="Open pattern in a new tab">
+                    <i class="icon i-18">
+                      <svg><use xlink:href="#icon-pop-out"></use></svg>
+                    </i>
+                  </a>
+                </li>
+              {% endif %}
+            </ul>
+        </div>
+        {% if pattern_data.description %}
+          <div class="pattern-desc milli island">
+            <div class="max-length">{{pattern_data.description | markdownify | sub_web_dev_tool_urls}}</div>
+          </div>
+        {% endif %}
+      {% endif %}
+
+      <div class="pattern-examples pad-t-1-2 pad-b-1-2">
+        <div class="gutter{% if pattern_data._resizable != false %}-2{% endif %} pad-t-1-2 pad-b-1-2">
+          <div class="resizeable-pattern relative" style="{% if pattern_data.width %}width:{{pattern_data.width}}px{% endif %}">
+            <i class="icon i-32 patternbot-iframe-loading-gears absolute pin-c"><svg><use xlink:href="#patternbot-iframe-loading-gears"></use></svg></i>
+            <iframe data-src="/{{page._PatternbotConfig.patternbot.destination}}/patterns/{{include.pattern.name}}/{{pattern_name | normalize_filename}}" scrolling="no" data-inject-css="{% if pattern_data.padding %}body { padding:{{pattern_data.padding}}; }{% endif %}" {% if pattern_data.height %}data-min-height="{{pattern_data.height}}"{% endif %}></iframe>
+            {% if pattern_data._resizable != false %}
+              <div class="resizeable-pattern-length">
+                <div class="resize-handle resize-handle-left">
+                  <i class="icon i-18">
+                    <svg><use xlink:href="#icon-resize-handle"></use></svg>
+                  </i>
+                </div>
+                <div class="resize-handle resize-handle-right">
+                  <i class="icon i-18">
+                    <svg><use xlink:href="#icon-resize-handle"></use></svg>
+                  </i>
+                </div>
+              </div>
+            {% endif %}
+          </div>
+        </div>
+
+        {% if pattern_data._code != false %}
+          <div class="pattern-code-wrap gutter pad-t-1-2 pad-b-1-2" hidden aria-hidden="true" id="{{include.pattern.name}}-{{pattern_name}}-code-sample" tabindex="-1">
+            <div class="pattern-code relative milli island-1-2">
+              <button class="center-contents-vertical pattern-tool-btn pattern-copy-btn absolute pin-tr" title="Copy code" aria-label="Copy code" data-clipboard-target="#{{include.pattern.name}}-{{pattern_name}}-code-sample-copy-chunk" hidden>
+                <i class="icon i-18">
+                  <svg><use xlink:href="#icon-copy"></use></svg>
+                </i>
+              </button>
+              <code><pre id="{{include.pattern.name}}-{{pattern_name}}-code-sample-copy-chunk">{{pattern_name | pattern_code:include.pattern.name, pattern_data | escape}}</pre></code>
+              {% if pattern_data.fields %}
+                <div class="pad-t-1-2">
+                  <hr class="pattern-code-sep push-1-2">
+                  <table class="pattern-code-fields nano push-0">
+                    <thead>
+                      <tr>
+                        <th class="not-bold pico" scope="col" colspan="7">Field name</th>
+                        <th class="not-bold pico" scope="col" colspan="6">Data type</th>
+                        <th class="not-bold pico" scope="col" colspan="11">Example</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {% for field in pattern_data.fields %}
+                        <tr>
+                          <th scope="row" colspan="7">
+                            <code class="pattern-code-field valign-middle {% if field.required == false %}not-bold{% endif %}">{{field.name | escape}}</code>
+                            {% unless field.required == false %}<span class="ib pico not-bold italic valign-middle">required</span>{% endunless %}
+                          </th>
+                          <td scope="col" colspan="6">
+                            <code class="pattern-code-field">
+                              {% if field.data %}
+                                object
+                              {% else %}
+                                {{field.type | escape}}
+                              {% endif %}
+                            </code>
+                          </td>
+                          <td scope="col" colspan="11">
+                            {% if field.data %}
+                              <code class="pattern-code-field">{{field.data.type | escape}}</code>
+                            {% else %}
+                              {% if field.classes %}
+                                {% for class in field.classes %}
+                                  <code class="pattern-code-field">{{class | escape}}</code>
+                                {% endfor %}
+                              {% else %}
+                                {% if field.example %}<span>"{{field.example | escape}}"</span>{% endif %}
+                              {% endif %}
+                            {% endif %}
+                          </td>
+                        </tr>
+                      {% endfor %}
+                    </tbody>
+                  </table>
+                </div>
+              {% endif %}
+            </div>
+          </div>
+        {% endif %}
+      </div>
+    </div>
+  {% endfor %}
+
+</section>

data/_layouts/patternbot_pattern_internal.html

@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en-ca">
+<head>
+  <meta charset="utf-8">
+  <title>{{page.title}}</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  {% if page._pattern_data.config._user_modulifier %}
+    <link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.modulifier}}?v={{site.time | date:'%s'}}" rel="stylesheet">
+  {% else %}
+    <link href="{{site.baseurl}}/assets/_patternbot/common/modulifier.min.css?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
+  {% endif %}
+  {% if page._pattern_data.config._user_gridifier %}
+    <link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.gridifier}}?v={{site.time | date:'%s'}}" rel="stylesheet">
+  {% else %}
+    <link href="{{site.baseurl}}/assets/_patternbot/common/gridifier.min.css?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
+  {% endif %}
+  {% if page._pattern_data.config._user_typografier %}
+    <link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.typografier}}?v={{site.time | date:'%s'}}" rel="stylesheet">
+  {% else %}
+    <link href="{{site.baseurl}}/assets/_patternbot/common/typografier.min.css?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
+  {% endif %}
+  {% if page._PatternbotData.css.theme %}
+    <link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.theme}}?v={{site.time | date:'%s'}}" rel="stylesheet">
+  {% endif %}
+  <link href="{{site.baseurl}}/assets/_patternbot/common/common.min.css?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
+  {% for css in page._pattern_data.config._extra_css %}
+    <link href="{{site.baseurl}}/assets/_patternbot/patterns/{{css}}?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
+  {% endfor %}
+  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" rel="stylesheet">
+  <style>
+    {% assign has_bg = page._subpattern | has_pattern_background_color: page._pattern %}
+    {% if has_bg %}
+      :root {
+        --color-patternbot-interface: {{page._subpattern | get_pattern_interface_color: page._pattern | as_rgb_digit}};
+        --color-patternbot-interface-opposite: {{page._subpattern | get_pattern_interface_color_opposite: page._pattern | as_rgb_digit}};
+        --color-patternbot-interface-background: {{page._subpattern | get_pattern_background_color: page._pattern | as_hex}};
+        --color-patternbot-interface-accent: {{page._subpattern | get_pattern_interface_color: page._pattern | as_hex}};
+      }
+      html {
+        color: {{page._subpattern | get_pattern_interface_color: page._pattern}};
+      }
+    {% else %}
+      :root {
+        --color-patternbot-interface: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color | as_rgb_digit}};
+        --color-patternbot-interface-opposite: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color_opposite | as_rgb_digit}};
+        --color-patternbot-interface-background: {{page._PatternbotConfig.patternbot.colors.background | as_hex}};
+        {% if page._PatternbotConfig.patternbot.colors.accent %}
+          --color-patternbot-interface-accent: {{page._PatternbotConfig.patternbot.colors.accent | as_hex}};
+        {% else %}
+          {% if page._PatternbotData.css.theme.colors.primary %}
+            --color-patternbot-interface-accent: {{page._PatternbotData.css.theme.colors.primary[0].hex}};
+          {% else %}
+            --color-patternbot-interface-accent: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color | as_hex}};
+          {% endif %}
+        {% endif %}
+      }
+      html {
+        color: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color}};
+      }
+    {% endif %}
+    {% if page._PatternbotData.css.theme.fonts.primary.css_name %}
+      :root {
+        --font-patternbot-primary: {{page._PatternbotData.css.theme.fonts.primary.css_name}}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+      }
+      html {
+        font-family: {{page._PatternbotData.css.theme.fonts.primary.css_name}}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+      }
+    {% endif %}
+    {% if page._PatternbotData.css.theme.fonts.secondary.css_name %}
+      :root {
+        --font-patternbot-secondary: {{page._PatternbotData.css.theme.fonts.secondary.css_name}}, var(--font-patternbot-primary), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+      }
+    {% endif %}
+  </style>
+
+
+  {% if page._PatternbotConfig.patternbot.font_url %}
+    <link href="{{page._PatternbotConfig.patternbot.font_url}}" rel="stylesheet">
+  {% endif %}
+</head>
+<body>
+
+  {% include patternbot_icons.html %}
+
+  <div id="patternbot-pattern-include">
+    {{content}}
+  </div>
+
+  <script src="{{site.baseurl}}/assets/_patternbot/vendor/iframe-resizer-content-window.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
+  <script src="{{site.baseurl}}/assets/_patternbot/vendor/clipboard.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
+  {% include patternbot_pattern_copy_script.html %}
+
+</body>
+</html>

data/_layouts/patternbot_pattern_lib.html

@@ -0,0 +1,214 @@
+<!DOCTYPE html>
+<html lang="en-ca">
+<head>
+  <meta charset="utf-8">
+  <title>{% if page._PatternbotConfig.patternbot.title %}{{page._PatternbotConfig.patternbot.title}} · {% endif %}{{page._PatternbotLocale.patternlib.title}}</title>
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="description" content="{% if page._PatternbotConfig.patternbot.title %}{{page._PatternbotConfig.patternbot.title}} {% endif %}{{page._PatternbotLocale.patternlib.title}} — {% if page._PatternbotConfig.patternbot.description %}{{page._PatternbotConfig.patternbot.description | strip | strip_newlines}}{% else %}{{page._PatternbotLocale.patternlib.description | strip | strip_newlines}}{% endif %}">
+  <meta name="generator" content="jekyll_patternbot/{{page._PatternbotConfig.patternbot.version}}">
+  <link href="{{site.baseurl}}/assets/_patternbot/ui/pattern-lib.min.css?v={{page._PatternbotConfig.patternbot.version}}" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700" rel="stylesheet">
+  <style>
+    :root {
+      --color-patternbot-interface: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color | as_rgb_digit}};
+      --color-patternbot-interface-opposite: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color_opposite | as_rgb_digit}};
+      --color-patternbot-interface-background: {{page._PatternbotConfig.patternbot.colors.background | as_hex}};
+      {% if page._PatternbotConfig.patternbot.colors.accent %}
+        --color-patternbot-interface-accent: {{page._PatternbotConfig.patternbot.colors.accent | as_hex}};
+      {% else %}
+        {% if page._PatternbotData.css.theme.colors.primary %}
+          --color-patternbot-interface-accent: {{page._PatternbotData.css.theme.colors.primary[0].hex}};
+        {% else %}
+          --color-patternbot-interface-accent: {{page._PatternbotConfig.patternbot.colors.background | get_interface_color | as_hex}};
+        {% endif %}
+      {% endif %}
+      {% if page._PatternbotData.css.theme.fonts.primary.css_name %}
+        --font-patternbot-primary: {{page._PatternbotData.css.theme.fonts.primary.css_name}}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+      {% endif %}
+      {% if page._PatternbotData.css.theme.fonts.secondary.css_name %}
+        --font-patternbot-secondary: {{page._PatternbotData.css.theme.fonts.secondary.css_name}}, var(--font-patternbot-primary), -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+      {% endif %}
+    }
+
+    {% if page._PatternbotData.css.theme.fonts.primary %}
+      html {
+        font-family: {{page._PatternbotData.css.theme.fonts.primary.css_name}}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+      }
+    {% endif %}
+
+    body {
+      background-color: var(--color-patternbot-interface-background);
+    }
+  </style>
+  {% if page._PatternbotConfig.patternbot.font_url %}
+    <link href="{{page._PatternbotConfig.patternbot.font_url}}" rel="stylesheet">
+  {% endif %}
+</head>
+<body>
+
+  {% include patternbot_icons.html %}
+
+  <div class="wrapper">
+
+    <header class="masthead-s">
+      <button class="nav-btn" aria-controls="nav" aria-expanded="false" aria-label="Open nav">
+        <svg class="nav-icon-open"><use xlink:href="#nav-icon"></use></svg>
+        <svg class="nav-icon-close"><use xlink:href="#nav-icon-close"></use></svg>
+      </button>
+      <h1 class="masthead-title kilo pad-t-1-8 pad-b-1-8 push-0">
+        {% if page._PatternbotConfig.patternbot.title %}
+          {{page._PatternbotConfig.patternbot.title}}
+          <span class="block normal milli">{{page._PatternbotLocale.patternlib.title}}</span>
+        {% else %}
+          {{page._PatternbotLocale.patternlib.title}}
+        {% endif %}
+      </h1>
+    </header>
+
+    <header class="masthead-m" aria-hidden="true" id="patternbot-nav">
+      <h1 class="masthead-title tera gutter pad-t pad-b push-0">
+        {% if page._PatternbotConfig.patternbot.title %}
+          {{page._PatternbotConfig.patternbot.title}}
+          <span class="block normal mega pad-t-1-4">{{page._PatternbotLocale.patternlib.title}}</span>
+        {% else %}
+          {{page._PatternbotLocale.patternlib.title}}
+        {% endif %}
+      </h1>
+      <hr>
+      <h2 class="italic kilo normal gutter push-1-2">Patterns</h2>
+      <nav class="nav mega">
+        <ul class="list-group" role="tablist">
+          <li role="presentation">
+            <a class="gutter pad-t-1-4 pad-b-1-4 block" role="tab" aria-controls="brand" href="#brand">
+              <div class="relative">
+                <span>Brand</span>
+                <i class="icon i-18 absolute pin-cr">
+                  <svg><use xlink:href="#icon-active"></use></svg>
+                </i>
+              </div>
+            </a>
+          </li>
+          {% if page._PatternbotData.css.typografier contains 'url' %}
+            <li role="presentation">
+              <a class="gutter pad-t-1-4 pad-b-1-4 block" role="tab" aria-controls="typography" href="#typography">
+                <div class="relative">
+                  <span>Typography</span>
+                  <i class="icon i-18 absolute pin-cr">
+                    <svg><use xlink:href="#icon-active"></use></svg>
+                  </i>
+                </div>
+              </a>
+            </li>
+          {% endif %}
+          {% if page._PatternbotData.css.gridifier contains 'url' %}
+            <li role="presentation">
+              <a class="gutter pad-t-1-4 pad-b-1-4 block" role="tab" aria-controls="grid" href="#grid">
+                <div class="relative">
+                  <span>Grid</span>
+                  <i class="icon i-18 absolute pin-cr">
+                    <svg><use xlink:href="#icon-active"></use></svg>
+                  </i>
+                </div>
+              </a>
+            </li>
+          {% endif %}
+          {% if page._PatternbotData.css.modulifier contains 'url' %}
+            <li role="presentation">
+              <a class="gutter pad-t-1-4 pad-b-1-4 block" role="tab" aria-controls="modules" href="#modules">
+                <div class="relative">
+                  <span>Modules</span>
+                  <i class="icon i-18 absolute pin-cr">
+                    <svg><use xlink:href="#icon-active"></use></svg>
+                  </i>
+                </div>
+              </a>
+            </li>
+          {% endif %}
+          {% if page._PatternbotData.css.theme.utilities %}
+            <li role="presentation">
+              <a class="gutter pad-t-1-4 pad-b-1-4 block" role="tab" aria-controls="utilities" href="#utilities">
+                <div class="relative">
+                  <span>Utilities</span>
+                  <i class="icon i-18 absolute pin-cr">
+                    <svg><use xlink:href="#icon-active"></use></svg>
+                  </i>
+                </div>
+              </a>
+            </li>
+          {% endif %}
+          {% unless page._PatternbotData.icons == empty %}
+            <li role="presentation">
+              <a class="gutter pad-t-1-4 pad-b-1-4 block" role="tab" aria-controls="icons" href="#icons">
+                <div class="relative">
+                  <span>Icons</span>
+                  <i class="icon i-18 absolute pin-cr">
+                    <svg><use xlink:href="#icon-active"></use></svg>
+                  </i>
+                </div>
+              </a>
+            </li>
+          {% endunless %}
+          {% for pattern in page._PatternbotData.patterns.user %}
+            {% assign pattern_data = pattern[1] %}
+            {% unless pattern.config.hide_nav %}
+              <li role="presentation">
+                <a class="gutter pad-t-1-4 pad-b-1-4 block" role="tab" aria-controls="{{pattern_data.name}}" href="#{{pattern_data.name}}">
+                  <div class="relative">
+                    <span>{% if pattern_data.config.title %}{{pattern_data.config.title}}{% else %}{{pattern[0] | as_title}}{% endif %}</span>
+                    <i class="icon i-18 absolute pin-cr">
+                      <svg><use xlink:href="#icon-active"></use></svg>
+                    </i>
+                  </div>
+                </a>
+              </li>
+            {% endunless %}
+          {% endfor %}
+          <li class="pad-t-1-2" role="presentation">
+            <button class="nav-show-all gutter pad-t-1-4 pad-b-1-4 block kilo" id="patternbot-nav-show-all" aria-pressed="false" title="Show all patterns" aria-label="Show all patterns">
+              <span class="nav-show-all-wrap relative block">Show all</span>
+            </button>
+          </li>
+        </ul>
+      </nav>
+      {% if page._PatternbotData.pages %}
+        <hr>
+        <h2 class="italic kilo normal gutter push-1-2">Sample pages</h2>
+        <nav class="nav mega">
+          <ul class="list-group">
+            {% for expage in page._PatternbotData.pages %}
+              <li>
+                <a class="gutter pad-t-1-4 pad-b-1-4 block page-pop" href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.sample_pages.source}}/{{expage | normalize_filename}}" target="_blank">
+                  <div class="relative">
+                    <span>{{expage | replace:'.html', '' | as_title}}</span>
+                    <i class="icon i-18 absolute pin-cr">
+                      <svg><use xlink:href="#icon-pop-out"></use></svg>
+                    </i>
+                  </div>
+                </a>
+              </li>
+            {% endfor %}
+          </ul>
+        </nav>
+      {% endif %}
+    </header>
+
+    <main class="main">
+      {% for pattern in page._PatternbotData.patterns.internal %}
+        {% assign pattern_data=pattern[1] %}
+        {% include patternbot_patternlib_pattern.html pattern=pattern_data %}
+      {% endfor %}
+      {% for pattern in page._PatternbotData.patterns.user %}
+        {% assign pattern_data=pattern[1] %}
+        {% include patternbot_patternlib_pattern.html pattern=pattern_data %}
+      {% endfor %}
+    </main>
+
+  </div>
+
+  <script src="{{site.baseurl}}/assets/_patternbot/vendor/iframe-resizer.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
+  <script src="{{site.baseurl}}/assets/_patternbot/vendor/interact.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
+  <script src="{{site.baseurl}}/assets/_patternbot/vendor/clipboard.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
+  {% include patternbot_pattern_copy_script.html %}
+  <script src="{{site.baseurl}}/assets/_patternbot/ui/pattern-lib.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
+</body>
+</html>