jekyll_patternbot 1.0.3 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 12dcf450d35475dc37eafe5327756a61d6106eeff5bfacd96cb4e79cf413cd88
-  data.tar.gz: 271a02183cecf8e1e5d99523b5de8b37f6d46da57a20e9514313cc006d5334af
+  metadata.gz: 6c9240afd356cdc24f186b10691f65353b93bd793ae184d1dd928f06aeaab901
+  data.tar.gz: 5a5e7fc77e495a5303013e4b4638c79f06e64645adc66ab368495c3664876ac0
 SHA512:
-  metadata.gz: 2831f645acc83e811962b26a6866af049f95b54f5497980cc452eb85c082932810aac7c3df1902a74df8c12e1f191e70af3ccc1a4145e98d67c54bdafeb8f169
-  data.tar.gz: b75f25545e08af7e8a7a08c9f837656a862fa8bffe9c55d71b5cdbf643ae7b2c3a0e1ed3cb7496de108ceff114ec03bb5e44a259496a51a2727e14ee350e2426
+  metadata.gz: 62d443a880fbc9d155b8b8e085931f738e145a045451915ed5ed84b39702c0cfb9125cc57d30a459e5544c78963847ff09f6173de03ae01b0a8f950b3319ab22
+  data.tar.gz: cc6d16da3aa6c874858ad33d8fb2c79a079d9dd9dccb1b9d0fabbeb39f32e28752fcf2cd18881189c24168914dc6d3414197ab6619f975a199cea2f94ec47e92

data/CHANGELOG.md

@@ -5,6 +5,25 @@ Jekyll Patternbot adheres to [Semantic Versioning](http://semver.org/).
 
 ---
 
+## [1.1.0] — 2019-01-26
+
+### Added
+
+- Added class lists for all the Web Dev Tool systems: Gridifier, Typografier & Modulifier.
+- Added icons sizes lists for the icons & a code sample of using icons.
+- Added the ability specify a code sample form within `config.yml` instead of outputting the pattern include.
+
+### Fixed
+
+- Fix the class names for some of the vertical spacing classes: they didn’t match real Typografier class names.
+- Fixed a bug when `<h2>` tags were targetted, the font family in the font display changed incorrectly.
+- A pluralization typo in the ModulesProcessor caused a few modules to not display.
+- Bold fonts weren’t showing the the typefaces section when there was no `font_url` or it was a browser-safe font.
+- Added missing space above `<hr>` that separates the different typefaces.
+- Added a cleaner error message when `theme: jekyll_patternbot` wasn’t specified inside the user’s `_config.yml` file.
+
+---
+
 ## [1.0.3] — 2019-01-19
 
 ### Fixed

data/_includes/patternbot_pattern_brand_typeface.html

@@ -1,4 +1,4 @@
-<section style="font-family:var({{include.font.var}});">
+<section style="font-family:var({{include.font.var}});" {% if include.show_hr %}class="pad-t"{% endif %}>
   {% if include.show_hr %}<hr class="patternbot-hr">{% endif %}
 
   <ul class="patternbot-code-details patternbot-list-group list-group-inline micro push-1-2 pad-t">
@@ -12,7 +12,7 @@
     </li>
   </ul>
 
-  <h2 class="patternbot-color-body yotta"><span class="patternbot-type-sample-large">{{include.font.name_pretty}}</span> is {{include.preposition}} {{include.title | downcase}} typeface</h2>
+  <h2 class="patternbot-color-body yotta" style="font-family:var({{include.font.var}});"><span class="patternbot-type-sample-large">{{include.font.name_pretty}}</span> is {{include.preposition}} {{include.title | downcase}} typeface</h2>
   {% assign pattern_has_rationale = include.key | has_pattern_rationale:'typefaces' %}
   {% if pattern_has_rationale %}
     <div class="patternbot-max-length tera max-length">

data/_includes/patternbot_pattern_class_list.html

@@ -0,0 +1,30 @@
+<div class="patternbot-font-primary text-left milli">
+  <div class="pattern-utilities-scrollable scrollable">
+    <table class="patternbot-utilities-table">
+      <thead>
+        <tr>
+          <th scope="col" colspan="6">Class</th>
+          <th scope="col" colspan="18">Description</th>
+        </tr>
+      </thead>
+      <tbody>
+        {% for util in include.classes %}
+          <tr>
+            <th class="valign-middle" scope="row" colspan="6">
+              <ul class="list-group patternbot-utilities-classes">
+                {% if util.classes %}
+                  {% for class in util.classes %}
+                    <li><code class="ib valign-middle">{{class | escape}}</code></li>
+                  {% endfor %}
+                {% else %}
+                  <li><code class="ib valign-middle">{{util.class | escape}}</code></li>
+                {% endif %}
+              </ul>
+            </th>
+            <td class="valign-middle" scope="col" colspan="18"><span class="ib valign-middle">{{util.description | markdownify}}</span></td>
+          </tr>
+        {% endfor %}
+      </tbody>
+    </table>
+  </div>
+</div>

data/_includes/patternbot_patternlib_pattern.html

@@ -188,7 +188,11 @@
                   <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._code_sample %}
+                <code><pre id="{{include.pattern.name}}-{{pattern_name}}-code-sample-copy-chunk">{{pattern_data._code_sample | escape}}</pre></code>
+              {% else %}
+                <code><pre id="{{include.pattern.name}}-{{pattern_name}}-code-sample-copy-chunk">{{pattern_name | pattern_code:include.pattern.name, pattern_data | escape}}</pre></code>
+              {% endif %}
               {% if pattern_data.fields %}
                 <div class="pad-t-1-2">
                   <hr class="pattern-code-sep push-1-2">

data/_layouts/patternbot_pattern_lib.html

@@ -156,7 +156,7 @@
               </a>
             </li>
           {% endunless %}
-          {% unless page._PatternbotData.icons == empty %}
+          {% unless page._PatternbotData.icons.spritesheets == 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">

data/_patterns/grid/config.yml

@@ -2,13 +2,20 @@ _layout: "patternbot_pattern_internal"
 _user_gridifier: true
 _extra_css:
   - 'grid/grid.min.css'
+  - 'utilities/utilities.min.css'
 
 title: "Grid"
 description: |
-  The grids generated by [Gridifier](++gridifier-settings-url++) provide an array of sizing options—with explicit classes—for each major breakpoint. [See the documentation for all available classes.](https://learn-the-web.algonquindesign.ca/topics/gridifier-cheat-sheet/)
+  The grids generated by [Gridifier](++gridifier-settings-url++) provide an array of sizing options—with explicit classes—for each major breakpoint.
 
 patterns:
   grid-sizes:
     _popout_button: false
     _resizable: false
     _code: false
+  utility-classes:
+    description: |
+      Mix & match classes for grids and units to make any responsive layout necessary for templates.
+    _popout_button: false
+    _resizable: false
+    _code: false

data/_patterns/grid/utility-classes.html

@@ -0,0 +1 @@
+{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.gridifier.utility_classes %}

data/_patterns/grid/utility-classes.yml

@@ -0,0 +1,35 @@
+# Direct copy from: https://learn-the-web.algonquindesign.ca/topics/gridifier-cheat-sheet/
+
+- class: '.grid-middle'
+  description: 'Vertically centers all the units inside a grid row.'
+- class: '.grid-stretch'
+  description: 'Forces all the unit elements to be the same height.'
+- class: '.grid-bottom'
+  description: 'Aligns all the units to the bottom of the grid row.'
+
+- class: '.[size]-0'
+  description: 'Allows a unit to be hidden on specific screens sizes.'
+- class: '.unit-[size]-centered'
+  description: 'Allows a unit to be centered horizontally on specific screen sizes.'
+- class: '.unit-offset-[size]-[width]'
+  description: 'Makes empty space to the left of the unit by the specified amount.'
+- class: '.unit-push-[size]-[width]'
+  description: 'Pushes the unit to the right, to change order.'
+- class: '.unit-pull-[size]-[width]'
+  description: 'Pulls the unit to the left, to change order.'
+- class: '.unit-content-distribute'
+  description: 'Makes the content distribute, the top of the unit’s content will align, the bottom content will align. The content in the center will distribute its surrounding space evenly.'
+- class: '.[size]-content-distribute'
+  description: 'Makes the content distribute at a specific screen size.'
+- class: '.content-fill'
+  description: 'When using distribute, can cause a chunk of content to stretch vertically. Added to an element inside a unit—will not work added directly to a .unit.'
+- class: '.[size]-content-fill'
+  description: 'Cause a chunk of content to stretch vertically at a specific screen size.'
+- classes: '.content-shrink'
+  description: 'When using .content-fill the elements will stretch the whole width of the containing box. Adding .content-shrink will allow the element to be only as wide as it needs to be. Added to an element inside a unit—will not work added directly to a .unit.'
+- classes: '.[size]-content-shrink'
+  description: 'Allow the element to be only as wide as it needs to be, when using `.content-fill` — only at a specific screen size.'
+- class: '.unit-content-center'
+  description: 'Lumps all the content together in the vertical center of the element.'
+- class: '.unit-[size]-content-center'
+  description: 'This class exists in variations for all sizes to allow distribution only at specific points or size-less for permanent distribution.'

data/_patterns/icons/config.yml

@@ -1,13 +1,38 @@
 _layout: "patternbot_pattern_internal"
 _extra_css:
   - 'icons/icons.min.css'
+  - 'utilities/utilities.min.css'
 
 title: "Icons"
 description: |
-  The sprite sheet contains the following icons for use in the website. Combine the icons with [Modulifier](https://modulifier.web-dev.tools) & [Typografier](https://typografier.web-dev.tools) classes for lots of variability. [See the documentation for all available classes.](https://learn-the-web.algonquindesign.ca/topics/modulifier-cheat-sheet/)
+  The sprite sheet contains the following icons for use in the website. Combine the icons with [Modulifier](https://modulifier.web-dev.tools) & [Typografier](https://typografier.web-dev.tools) classes for lots of variability.
 
 patterns:
   icons:
     _popout_button: false
     _code: false
     _resizable: false
+  icons-with-labels:
+    title: "Icons with Labels"
+    description: |
+      Sample code for using SVG icon spritesheets mixed with a text label, using the below classes.
+    width: 320
+    _code_sample: |
+      <a class="icon-link exa" href="#">
+        <i class="icon i-1">
+          <svg><use xlink:href="/images/icons.svg#icon-id"></use></svg>
+        </i>
+        <span class="icon-label">Icon label</span>
+      </a>
+  icon-classes:
+    description: |
+      Classes that can be used on elements & combined to make nicely aligned icons and labels.
+    _popout_button: false
+    _resizable: false
+    _code: false
+  icon-sizes:
+    description: |
+      Icons sizes available from [Modulifier](https://modulifier.web-dev.tools) & [Typografier](https://typografier.web-dev.tools).
+    _popout_button: false
+    _code: false
+    _resizable: false

data/_patterns/icons/icon-classes.html

@@ -0,0 +1 @@
+{% include patternbot_pattern_class_list.html classes=page._PatternbotData.icons.classes.general %}

data/_patterns/icons/icon-classes.yml

@@ -0,0 +1,54 @@
+# Direct copy from: https://learn-the-web.algonquindesign.ca/topics/modulifier-cheat-sheet/
+# Direct copy from: https://learn-the-web.algonquindesign.ca/topics/typografier-cheat-sheet/
+
+general:
+  - class: '.icon'
+    description: 'To be added to a tag, usually `<i>` to mark it as being an icon.'
+  - class: '.icon-label'
+    description: 'Can be added to the neighbouring text to allow the icon and the text to align.'
+  - class: '.icon-link'
+    description: 'Can be added to the surrounding `<a>` tag to remove the `text-decoration`'
+
+sizes:
+  - class: '.i-16'
+    description: '16 px × 16 px'
+  - class: '.i-18'
+    description: '18 px × 18 px'
+  - class: '.i-20'
+    description: '20 px × 20 px'
+  - class: '.i-24'
+    description: '24 px × 24 px'
+  - class: '.i-32'
+    description: '32 px × 32 px'
+  - class: '.i-48'
+    description: '48 px × 48 px'
+  - class: '.i-64'
+    description: '64 px × 64 px'
+  - class: '.i-96'
+    description: '96 px × 96 px'
+  - class: '.i-128'
+    description: '128 px × 128 px'
+  - class: '.i-192'
+    description: '192 px × 192 px'
+  - class: '.i-256'
+    description: '256 px × 256 px'
+
+type_sizes:
+  - class: '.i-1'
+    description: 'An icon that’s width & height are the same size of the current line-height.'
+  - class: '.i-3-4'
+    description: 'An icon that’s width & height are ¾ the size of the current line-height.'
+  - class: '.i-1-2'
+    description: 'An icon that’s width & height are ½ the size of the current line-height.'
+  - class: '.i-1-4'
+    description: 'An icon that’s width & height are ¼ the size of the current line-height.'
+  - class: '.i-1-8'
+    description: 'An icon that’s width & height are ⅛ the size of the current line-height.'
+  - class: '.i-3-2'
+    description: 'An icon that’s width & height are 1½ the size of the current line-height.'
+  - class: '.i-5-4'
+    description: 'An icon that’s width & height are 1¼ the size of the current line-height.'
+  - class: '.i-7-4'
+    description: 'An icon that’s width & height are 1¾ the size of the current line-height.'
+  - class: '.i-2'
+    description: 'An icon that’s width & height are twice the size of the current line-height.'

data/_patterns/icons/icon-sizes.html

@@ -0,0 +1,8 @@
+<h2 class="patternbot-font-primary patternbot-color-body giga normal">Pixel-based icons sizes</h2>
+{% include patternbot_pattern_class_list.html classes=page._PatternbotData.icons.classes.sizes %}
+
+{% if page._PatternbotData.css.typografier contains 'url' %}
+  <hr class="patternbot-hr patternbot-hr-always-visible">
+  <h2 class="patternbot-font-primary patternbot-color-body giga normal">Typography-based icons sizes</h2>
+  {% include patternbot_pattern_class_list.html classes=page._PatternbotData.icons.classes.type_sizes %}
+{% endif %}

data/_patterns/icons/icons-with-labels.html

@@ -0,0 +1,6 @@
+<a class="icon-link exa" href="#">
+  <i class="icon i-1">
+    <svg><use xlink:href="/images/{{page._PatternbotData.icons.spritesheets[0].filename}}#{{page._PatternbotData.icons.spritesheets[0].icons[0]}}"></use></svg>
+  </i>
+  <span class="icon-label">Icon label</span>
+</a>

data/_patterns/icons/icons.html

@@ -1,4 +1,4 @@
-{% for spritesheet in page._PatternbotData.icons %}
+{% for spritesheet in page._PatternbotData.icons.spritesheets %}
   {% assign spritesheet_has_bg = spritesheet.name | has_pattern_background_color: 'icons' %}
   <ul class="patternbot-icon-display patternbot-list-group list-group-inline {% if spritesheet_has_bg %}patternbot-icon-display-has-bg{% endif %}">
     {% for icon in spritesheet.icons %}

data/_patterns/modules/config.yml

@@ -2,31 +2,53 @@ _layout: "patternbot_pattern_internal"
 _user_modulifier: true
 _extra_css:
   - 'modules/modules.min.css'
+  - 'utilities/utilities.min.css'
 
 title: "Modules"
 description: |
-  [Modulifier](++modulifier-settings-url++) generates a series of simple, default CSS components that can be used throughout the site, or as basic building blocks for more complex patterns. [See the documentation for all available classes.](https://learn-the-web.algonquindesign.ca/topics/modulifier-cheat-sheet/)
+  [Modulifier](++modulifier-settings-url++) generates a series of simple, default CSS components that can be used throughout the site, or as basic building blocks for more complex patterns.
 
 patterns:
-  list-groups:
-    title: "List groups"
-    description: |
-      The list group system provides two classes: one for a vertical, stacking group of list items; and another for a horizontal, side-by-side group of list items.
-    _popout_button: false
-    _code: false
-    width: 650
-  embed:
-    title: "Embed containers"
+  images-embeds:
+    title: "Images & embed containers"
     description: |
       Embed containers should be used for all content images, enforcing aspect ratios but also giving browsers a placeholder for the graphic before it loads to prevent unnecessary text reflows.
     _popout_button: false
-    _code: false
-    width: 650
+    _resizable: false
+    _code_sample: |
+      <div class="embed embed-4by3">
+        <img class="embed-item" src="/images/4by3.jpg" alt="">
+      </div>
   media-objects:
     title: "Media objects"
     description: |
       A simple pattern that provides and image beside some text—good for comments with avatars and many other situations. Will usually be combined into larger patterns.
     _popout_button: false
+    _resizable: false
+    _code_sample: |
+      <div class="media">
+        <div class="media-img">
+          <img src="/images/square.jpg" alt="">
+        </div>
+        <div class="media-body">
+          <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
+        </div>
+      </div>
+  skip-links:
+    description: |
+      A helpful accessibility feature that should be included immediately within the `<body>` tag on the top of most pages.
+    _popout_button: false
+    _resizable: false
+    _code_sample: |
+      <ul class="skip-links">
+        <li><a href="#main">Jump to main content</a></li>
+        <li><a href="#nav">Jump to main navigation</a></li>
+        <li><a href="#pause">Pause all animations</a></li>
+      </ul>
+  utility-classes:
+    description: |
+      All the different utility classes available from within [Modulifier](++modulifier-settings-url++).
+    _popout_button: false
     _code: false
-    width: 650
+    _resizable: false
 

data/_patterns/modules/images-embeds.html

@@ -0,0 +1,28 @@
+<div class="text-length patternbot-max-length-short">
+  <div class="embed embed-16by9">
+    <img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.wide}}" alt="">
+  </div>
+  <div class="grid push-2">
+    <div class="unit xs-1-3">
+      <div class="embed embed-1by1">
+        <img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
+      </div>
+    </div>
+    <div class="unit xs-1-3">
+      <div class="embed embed-1by1">
+        <img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
+      </div>
+    </div>
+    <div class="unit xs-1-3">
+      <div class="embed embed-1by1">
+        <img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
+      </div>
+    </div>
+  </div>
+</div>
+
+<h2 class="patternbot-font-primary patternbot-color-body giga normal">Image utility classes</h2>
+{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.images %}
+
+<h2 class="patternbot-font-primary patternbot-color-body giga normal">Embed container sizes</h2>
+{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.embed_sizes %}

data/_patterns/modules/media-objects.html

@@ -1,7 +1,4 @@
-<!-- patternbot:hide-start -->
-<div class="text-left">
-<!-- patternbot:hide-end -->
-
+<div class="text-left patternbot-max-length-short">
   <div class="media">
     <div class="media-img">
       <img src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
@@ -10,7 +7,7 @@
       <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
     </div>
   </div>
-
-<!-- patternbot:hide-start -->
 </div>
-<!-- patternbot:hide-end -->
+
+<h2 class="patternbot-font-primary patternbot-color-body giga normal">Media object classes</h2>
+{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.media_objects %}

data/_patterns/modules/skip-links.html

@@ -0,0 +1 @@
+{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.skip_links %}

data/_patterns/modules/utility-classes.html

@@ -0,0 +1,29 @@
+{% if page._PatternbotData.css.modulifier.settings contains 'list-group' %}
+  <h2 class="patternbot-font-primary patternbot-color-body giga normal">List utility classes</h2>
+  {% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.lists %}
+{% endif %}
+
+{% if page._PatternbotData.css.modulifier.settings contains 'buttons' %}
+  <h2 class="patternbot-font-primary patternbot-color-body giga normal">Basic button classes</h2>
+  {% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.buttons %}
+{% endif %}
+
+{% if page._PatternbotData.css.modulifier.settings contains 'hidden' %}
+  <h2 class="patternbot-font-primary patternbot-color-body giga normal">Utility classes for hiding</h2>
+  {% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.hidden %}
+{% endif %}
+
+{% if page._PatternbotData.css.modulifier.settings contains 'positioning' %}
+  <h2 class="patternbot-font-primary patternbot-color-body giga normal">Positioning utility classes</h2>
+  {% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.positioning %}
+{% endif %}
+
+{% if page._PatternbotData.css.modulifier.settings contains 'forms' %}
+  <h2 class="patternbot-font-primary patternbot-color-body giga normal">Form utility classes</h2>
+  {% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.forms %}
+{% endif %}
+
+{% if page._PatternbotData.css.modulifier.settings contains 'print' %}
+  <h2 class="patternbot-font-primary patternbot-color-body giga normal">Print utility classes</h2>
+  {% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.print %}
+{% endif %}