jekyll_patternbot 0.12.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (116) hide show
  1. checksums.yaml +7 -0
  2. data/.editorconfig +12 -0
  3. data/.gitattributes +13 -0
  4. data/.gitignore +73 -0
  5. data/CHANGELOG.md +68 -0
  6. data/Gemfile +16 -0
  7. data/LICENSE.txt +21 -0
  8. data/README.md +39 -0
  9. data/Rakefile +1 -0
  10. data/_config.yml +54 -0
  11. data/_data/locales/en-ca.yml +5 -0
  12. data/_includes/patternbot_icons.html +38 -0
  13. data/_includes/patternbot_pattern_brand_color_swatches.html +48 -0
  14. data/_includes/patternbot_pattern_brand_typeface.html +32 -0
  15. data/_includes/patternbot_pattern_brand_typeface_weight.html +15 -0
  16. data/_includes/patternbot_pattern_copy_script.html +22 -0
  17. data/_includes/patternbot_patternlib_pattern.html +241 -0
  18. data/_layouts/patternbot_pattern_internal.html +94 -0
  19. data/_layouts/patternbot_pattern_lib.html +214 -0
  20. data/_layouts/patternbot_pattern_user.html +27 -0
  21. data/_patterns/brand/colors.html +23 -0
  22. data/_patterns/brand/config.yml +22 -0
  23. data/_patterns/brand/logos.html +43 -0
  24. data/_patterns/brand/typefaces.html +18 -0
  25. data/_patterns/grid/config.yml +14 -0
  26. data/_patterns/grid/grid-sizes.html +47 -0
  27. data/_patterns/icons/config.yml +13 -0
  28. data/_patterns/icons/icons.html +91 -0
  29. data/_patterns/modules/config.yml +32 -0
  30. data/_patterns/modules/embed.html +23 -0
  31. data/_patterns/modules/list-groups.html +21 -0
  32. data/_patterns/modules/media-objects.html +16 -0
  33. data/_patterns/typography/config.yml +55 -0
  34. data/_patterns/typography/emphasis-and-edits.html +80 -0
  35. data/_patterns/typography/font-sizes.html +90 -0
  36. data/_patterns/typography/headings.html +31 -0
  37. data/_patterns/typography/horizontal-spacing.html +46 -0
  38. data/_patterns/typography/links.html +11 -0
  39. data/_patterns/typography/lists.html +43 -0
  40. data/_patterns/typography/quotations.html +17 -0
  41. data/_patterns/typography/size-adjustments.html +20 -0
  42. data/_patterns/typography/typesetting.html +32 -0
  43. data/_patterns/typography/vertical-spacing.html +55 -0
  44. data/_patterns/utilities/config.yml +11 -0
  45. data/_patterns/utilities/utilities.html +18 -0
  46. data/_plugins/jekyll_patternbot/config.rb +19 -0
  47. data/_plugins/jekyll_patternbot/filters/color.rb +87 -0
  48. data/_plugins/jekyll_patternbot/filters/number.rb +11 -0
  49. data/_plugins/jekyll_patternbot/filters/pattern.rb +15 -0
  50. data/_plugins/jekyll_patternbot/filters/text.rb +33 -0
  51. data/_plugins/jekyll_patternbot/finders/finder.rb +34 -0
  52. data/_plugins/jekyll_patternbot/finders/icons.rb +25 -0
  53. data/_plugins/jekyll_patternbot/finders/logos.rb +26 -0
  54. data/_plugins/jekyll_patternbot/finders/patterns.rb +69 -0
  55. data/_plugins/jekyll_patternbot/finders/sample_pages.rb +18 -0
  56. data/_plugins/jekyll_patternbot/generators/internal_patterns.rb +56 -0
  57. data/_plugins/jekyll_patternbot/generators/pattern_lib.rb +27 -0
  58. data/_plugins/jekyll_patternbot/generators/user_patterns.rb +57 -0
  59. data/_plugins/jekyll_patternbot/helpers/color.rb +26 -0
  60. data/_plugins/jekyll_patternbot/helpers/file.rb +17 -0
  61. data/_plugins/jekyll_patternbot/helpers/jekyll.rb +60 -0
  62. data/_plugins/jekyll_patternbot/helpers/pattern.rb +36 -0
  63. data/_plugins/jekyll_patternbot/hooks/pattern_lib.rb +57 -0
  64. data/_plugins/jekyll_patternbot/loggers/patternbot.rb +24 -0
  65. data/_plugins/jekyll_patternbot/parsers/css_color.rb +54 -0
  66. data/_plugins/jekyll_patternbot/parsers/css_font.rb +109 -0
  67. data/_plugins/jekyll_patternbot/parsers/css_utility.rb +27 -0
  68. data/_plugins/jekyll_patternbot/parsers/gridifier.rb +22 -0
  69. data/_plugins/jekyll_patternbot/parsers/icons.rb +27 -0
  70. data/_plugins/jekyll_patternbot/parsers/modulifier.rb +10 -0
  71. data/_plugins/jekyll_patternbot/parsers/theme.rb +39 -0
  72. data/_plugins/jekyll_patternbot/parsers/typografier.rb +21 -0
  73. data/_plugins/jekyll_patternbot/parsers/web_dev_tool.rb +41 -0
  74. data/_plugins/jekyll_patternbot/processors/brand.rb +22 -0
  75. data/_plugins/jekyll_patternbot/processors/modules.rb +35 -0
  76. data/_plugins/jekyll_patternbot/tags/pattern.rb +19 -0
  77. data/_plugins/jekyll_patternbot/tags/pattern_css.rb +27 -0
  78. data/_plugins/jekyll_patternbot/tags/pattern_js.rb +27 -0
  79. data/_plugins/jekyll_patternbot.rb +55 -0
  80. data/_sass/.gitignore +0 -0
  81. data/assets/.gitignore +0 -0
  82. data/assets/_patternbot/common/common.css +223 -0
  83. data/assets/_patternbot/common/common.min.css +1 -0
  84. data/assets/_patternbot/common/gridifier.css +1175 -0
  85. data/assets/_patternbot/common/gridifier.min.css +1 -0
  86. data/assets/_patternbot/common/modulifier.css +539 -0
  87. data/assets/_patternbot/common/modulifier.min.css +1 -0
  88. data/assets/_patternbot/common/typografier.css +1787 -0
  89. data/assets/_patternbot/common/typografier.min.css +1 -0
  90. data/assets/_patternbot/images/placeholder-16by9.svg +1 -0
  91. data/assets/_patternbot/images/placeholder-1by1.svg +1 -0
  92. data/assets/_patternbot/patterns/brand/brand.css +79 -0
  93. data/assets/_patternbot/patterns/brand/brand.min.css +1 -0
  94. data/assets/_patternbot/patterns/grid/grid.css +27 -0
  95. data/assets/_patternbot/patterns/grid/grid.min.css +1 -0
  96. data/assets/_patternbot/patterns/icons/icons.css +41 -0
  97. data/assets/_patternbot/patterns/icons/icons.min.css +1 -0
  98. data/assets/_patternbot/patterns/modules/modules.css +4 -0
  99. data/assets/_patternbot/patterns/modules/modules.min.css +1 -0
  100. data/assets/_patternbot/patterns/typography/typography.css +11 -0
  101. data/assets/_patternbot/patterns/typography/typography.min.css +1 -0
  102. data/assets/_patternbot/patterns/utilities/utilities.css +4 -0
  103. data/assets/_patternbot/patterns/utilities/utilities.min.css +1 -0
  104. data/assets/_patternbot/ui/gridifier.css +1175 -0
  105. data/assets/_patternbot/ui/main.css +513 -0
  106. data/assets/_patternbot/ui/main.js +301 -0
  107. data/assets/_patternbot/ui/modulifier.css +725 -0
  108. data/assets/_patternbot/ui/pattern-lib.css +4 -0
  109. data/assets/_patternbot/ui/pattern-lib.min.css +1 -0
  110. data/assets/_patternbot/ui/pattern-lib.min.js +1 -0
  111. data/assets/_patternbot/ui/typografier.css +1787 -0
  112. data/jekyll_patternbot.gemspec +34 -0
  113. data/package.json +35 -0
  114. data/version.rb +3 -0
  115. data/yarn.lock +2783 -0
  116. metadata +312 -0
data/_layouts/patternbot_pattern_user.html ADDED
@@ -0,0 +1,27 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-ca">
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <title>{{page.title}}</title>
6
+ <meta name="viewport" content="width=device-width,initial-scale=1">
7
+ <link href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.css.source}}/{{page._PatternbotConfig.patternbot.css.main}}?v={{site.time | date:'%s'}}" rel="stylesheet">
8
+ {% if page._subpattern_data.background %}
9
+ <style>
10
+ html {
11
+ background-color: {{page._subpattern_data.background | as_hex}};
12
+ }
13
+ </style>
14
+ {% endif %}
15
+ </head>
16
+ <body>
17
+
18
+ <div id="patternbot-pattern-include">
19
+ {{content}}
20
+ </div>
21
+
22
+ <script src="{{site.baseurl}}/assets/_patternbot/vendor/iframe-resizer-content-window.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
23
+ <script src="{{site.baseurl}}/assets/_patternbot/vendor/clipboard.min.js?v={{page._PatternbotConfig.patternbot.version}}"></script>
24
+ {% include patternbot_pattern_copy_script.html %}
25
+
26
+ </body>
27
+ </html>
data/_patterns/brand/colors.html ADDED
@@ -0,0 +1,23 @@
1
+ <div class="patternbot-font-primary text-left">
2
+ {% assign show_hr = false %}
3
+
4
+ {% if page._PatternbotData.css.theme.colors.primary %}
5
+ {% assign show_hr = true %}
6
+ {% include patternbot_pattern_brand_color_swatches.html style="large" title="Primary" key="primary" colors=page._PatternbotData.css.theme.colors.primary extra_class="patternbot-color-swatches-primary" %}
7
+ {% endif %}
8
+
9
+ {% if page._PatternbotData.css.theme.colors.secondary %}
10
+ {% assign show_hr = true %}
11
+ {% include patternbot_pattern_brand_color_swatches.html style="large" title="Secondary" key="secondary" colors=page._PatternbotData.css.theme.colors.secondary extra_class="patternbot-color-swatches-secondary" show_hr=show_hr %}
12
+ {% endif %}
13
+
14
+ {% if page._PatternbotData.css.theme.colors.accent %}
15
+ {% assign show_hr = true %}
16
+ {% include patternbot_pattern_brand_color_swatches.html style="small" title="Accent" key="accent" colors=page._PatternbotData.css.theme.colors.accent show_hr=show_hr %}
17
+ {% endif %}
18
+
19
+ {% if page._PatternbotData.css.theme.colors.neutral %}
20
+ {% assign show_hr = true %}
21
+ {% include patternbot_pattern_brand_color_swatches.html style="small" title="Neutral" key="neutral" colors=page._PatternbotData.css.theme.colors.neutral show_hr=show_hr %}
22
+ {% endif %}
23
+ </div>
data/_patterns/brand/config.yml ADDED
@@ -0,0 +1,22 @@
1
+ _layout: "patternbot_pattern_internal"
2
+ _extra_css:
3
+ - 'brand/brand.min.css'
4
+
5
+ patterns:
6
+ logos:
7
+ title: "Logos"
8
+ _popout_button: false
9
+ _resizable: false
10
+ _code: false
11
+
12
+ colors:
13
+ title: "Colours"
14
+ _popout_button: false
15
+ _resizable: false
16
+ _code: false
17
+
18
+ typefaces:
19
+ title: "Typefaces"
20
+ _popout_button: false
21
+ _resizable: false
22
+ _code: false
data/_patterns/brand/logos.html ADDED
@@ -0,0 +1,43 @@
1
+ <section class="text-left">
2
+ <div class="grid">
3
+ <div class="unit [ xs-1 m-1-2 ]">
4
+ <h1 class="patternbot-color-body patternbot-brand-company yotta text-left">
5
+ {% if page._PatternbotConfig.patternbot.title %}
6
+ {{page._PatternbotConfig.patternbot.title | strip}}
7
+ <span class="patternbot-sub-heading block giga">{{page._PatternbotLocale.patternlib.title | strip}}</span>
8
+ {% else %}
9
+ {{page._PatternbotLocale.patternlib.title | strip}}
10
+ {% endif %}
11
+ </h1>
12
+ <div class="patternbot-brand-desc peta">
13
+ {% if page._PatternbotConfig.patternbot.description %}
14
+ {{page._PatternbotConfig.patternbot.description | markdownify}}
15
+ {% else %}
16
+ {{page._PatternbotLocale.patternlib.description | markdownify}}
17
+ {% endif %}
18
+ </div>
19
+ </div>
20
+ <div class="unit [ xs-1 m-1-2 ] text-center gutter">
21
+ {% if page._PatternbotData.logos.size_large %}
22
+ <i class="icon i-192 block center-block push-1-2">
23
+ <img class="img-flex" src="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.logos.source}}/{{page._PatternbotData.logos.size_large}}" alt="">
24
+ </i>
25
+ {% endif %}
26
+ {% if page._PatternbotData.logos.size_64 %}
27
+ <i class="icon i-64 push-r-1-4">
28
+ <img class="img-flex" src="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.logos.source}}/{{page._PatternbotData.logos.size_64}}" alt="">
29
+ </i>
30
+ {% endif %}
31
+ {% if page._PatternbotData.logos.size_32 %}
32
+ <i class="icon i-32 push-r-1-4">
33
+ <img class="img-flex" src="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.logos.source}}/{{page._PatternbotData.logos.size_32}}" alt="">
34
+ </i>
35
+ {% endif %}
36
+ {% if page._PatternbotData.logos.size_16 %}
37
+ <i class="icon i-16">
38
+ <img class="img-flex" src="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.logos.source}}/{{page._PatternbotData.logos.size_16}}" alt="">
39
+ </i>
40
+ {% endif %}
41
+ </div>
42
+ </div>
43
+ </section>
data/_patterns/brand/typefaces.html ADDED
@@ -0,0 +1,18 @@
1
+ <div class="text-left">
2
+ {% assign show_hr = false %}
3
+
4
+ {% if page._PatternbotData.css.theme.fonts.primary %}
5
+ {% assign show_hr = true %}
6
+ {% include patternbot_pattern_brand_typeface.html title="Primary" key="primary" font=page._PatternbotData.css.theme.fonts.primary preposition="the" %}
7
+ {% endif %}
8
+
9
+ {% if page._PatternbotData.css.theme.fonts.secondary %}
10
+ {% assign show_hr = true %}
11
+ {% include patternbot_pattern_brand_typeface.html title="Secondary" key="secondary" font=page._PatternbotData.css.theme.fonts.secondary preposition="the" show_hr=show_hr %}
12
+ {% endif %}
13
+
14
+ {% for font in page._PatternbotData.css.theme.fonts.accent %}
15
+ {% assign show_hr = true %}
16
+ {% include patternbot_pattern_brand_typeface.html title="Accent" key="accent" font=font desc=page._PatternbotConfig.patternbot.fonts.accent preposition="an" show_hr=show_hr %}
17
+ {% endfor %}
18
+ </div>
data/_patterns/grid/config.yml ADDED
@@ -0,0 +1,14 @@
1
+ _layout: "patternbot_pattern_internal"
2
+ _user_gridifier: true
3
+ _extra_css:
4
+ - 'grid/grid.min.css'
5
+
6
+ title: "Grid"
7
+ description: |
8
+ 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/)
9
+
10
+ patterns:
11
+ grid-sizes:
12
+ _popout_button: false
13
+ _resizable: false
14
+ _code: false
data/_patterns/grid/grid-sizes.html ADDED
@@ -0,0 +1,47 @@
1
+ <div class="patternbot-mq-display-wrap push patternbot-font-primary patternbot-color-body">
2
+ <ol class="patternbot-mq-display patternbot-list-group list-group push-0 pad-b" style="{% for mq in page._PatternbotData.css.gridifier.settings %}width: calc({{mq.mq | strip_trailing_zero}}em + 40em); {% endfor %}">
3
+ {% for mq in page._PatternbotData.css.gridifier.settings %}
4
+ <li style="padding-left: {{mq.mq}}em">
5
+ <div class="patternbot-mq-inner relative">
6
+ <dl class="patternbot-mq-list patternbot-list-group list-group-inline push-0 gutter-1-2 absolute micro">
7
+ <dt class="push-0">Media query</dt>
8
+ <dd class="push-0">{% if mq.mq > 0 %}{{mq.mq | strip_trailing_zero}}em{% else %}∞{% endif %}</dd>
9
+ <dt class="push-0">Class prefix</dt>
10
+ <dd class="push-0">{{mq.prefix}}</dd>
11
+ <dt class="push-0">№ columns</dt>
12
+ <dd class="push-0">{{mq.columns | strip_trailing_zero}}</dd>
13
+ </dl>
14
+ </div>
15
+ </li>
16
+ {% endfor %}
17
+ </ol>
18
+ </div>
19
+
20
+ <hr class="patternbot-hr">
21
+
22
+ <div class="patternbot-grid-wrap pad-b">
23
+ {% for mq in page._PatternbotData.css.gridifier.settings %}
24
+ <h2 class="patternbot-font-primary patternbot-color-body giga normal">Sizes available at “{{mq.prefix}}”</h2>
25
+ {% for columns in (1..mq.columns) %}
26
+ <ol class="patternbot-grid-display {% if forloop.last %}push{% endif %}" style="min-width: 320px; {% if mq.mq > 0 %}width: {{mq.mq | strip_trailing_zero}}em{% else %}width: 320px{% endif %}">
27
+ {% if forloop.first %}
28
+ <li style="width: 100%">
29
+ <div class="patternbot-grid-display-inner island-1-4">
30
+ <code class="micro">.{{mq.prefix}}-1</code>
31
+ </div>
32
+ </li>
33
+ {% else %}
34
+ {% for i in (1..columns) %}
35
+ <li style="width: calc(100% / {{i}})">
36
+ <div class="patternbot-grid-display-inner island-1-4">
37
+ <code class="micro">.{{mq.prefix}}-1-{{i}}</code>
38
+ </div>
39
+ </li>
40
+ {% endfor %}
41
+ {% endif %}
42
+ </ol>
43
+ {% endfor %}
44
+
45
+ <hr class="patternbot-hr">
46
+ {% endfor %}
47
+ </div>
data/_patterns/icons/config.yml ADDED
@@ -0,0 +1,13 @@
1
+ _layout: "patternbot_pattern_internal"
2
+ _extra_css:
3
+ - 'icons/icons.min.css'
4
+
5
+ title: "Icons"
6
+ description: |
7
+ 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/)
8
+
9
+ patterns:
10
+ icons:
11
+ _popout_button: false
12
+ _code: false
13
+ _resizable: false
data/_patterns/icons/icons.html ADDED
@@ -0,0 +1,91 @@
1
+ {% for spritesheet in page._PatternbotData.icons %}
2
+ {% assign spritesheet_has_bg = spritesheet.name | has_pattern_background_color: 'icons' %}
3
+ <ul class="patternbot-icon-display patternbot-list-group list-group-inline {% if spritesheet_has_bg %}patternbot-icon-display-has-bg{% endif %}">
4
+ {% for icon in spritesheet.icons %}
5
+ {% assign icon_has_bg = icon | has_pattern_background_color: 'icons', spritesheet.name %}
6
+ {% capture icon_class %}patternbot-icon-{{spritesheet.filename | replace:'.svg', ''}}-{{icon}}{% endcapture %}
7
+ {% assign icon_var_colors = icon | get_var_colors: 'icons', spritesheet.name %}
8
+ <li class="patternbot-icon pad-b-1-2 gutter-1-4 push push-r-1-4 {% if icon_has_bg %}patternbot-override-color{% endif %}" id="icons-{{spritesheet.filename | replace:'.svg',''}}-{{icon}}">
9
+ {% if icon_var_colors %}
10
+ <style>
11
+ .{{icon_class}} {
12
+ {% for varcol in icon_var_colors %}
13
+ {{varcol.key}}: {{varcol.val | as_hex}};
14
+ {% endfor %}
15
+ }
16
+ </style>
17
+ {% endif %}
18
+ {% if icon_has_bg %}
19
+ <style>
20
+ #icons-{{spritesheet.filename | replace:'.svg',''}}-{{icon}},
21
+ #icons-{{spritesheet.filename | replace:'.svg',''}}-{{icon}} * {
22
+ --color-patternbot-interface: {{icon | get_pattern_interface_color: 'icons', spritesheet.name | as_rgb_digit}};
23
+ --color-patternbot-interface-opposite: {{icon | get_pattern_interface_color_opposite: 'icons', spritesheet.name | as_rgb_digit}};
24
+ --color-patternbot-interface-background: {{icon | get_pattern_background_color: 'icons', spritesheet.name | as_hex}};
25
+ --color-patternbot-interface-accent: {{icon | get_pattern_interface_color: 'icons', spritesheet.name | as_hex}};
26
+ --color-patternbot-primary: rgba(var(--color-patternbot-interface), var(--color-patternbot-interface), var(--color-patternbot-interface), .9);
27
+ --color-patternbot-opposite: rgba(var(--color-patternbot-interface-opposite), var(--color-patternbot-interface-opposite), var(--color-patternbot-interface-opposite), .9);
28
+ }
29
+
30
+ #icons-{{spritesheet.filename | replace:'.svg',''}}-{{icon}}.patternbot-override-color,
31
+ #icons-{{spritesheet.filename | replace:'.svg',''}}-{{icon}} .patternbot-override-color {
32
+ color: {{icon | get_pattern_interface_color: 'icons', spritesheet.name | as_hex}};
33
+ background-color: var(--color-patternbot-interface-background);
34
+ }
35
+ </style>
36
+ {% endif %}
37
+ <div class="text-center">
38
+ <div class="patternbot-icon-display-left island-1-2">
39
+ <i class="icon i-128 block">
40
+ <svg class="{{icon_class}}"><use xlink:href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.icons.source}}/{{spritesheet.filename}}#{{icon}}"></use></svg>
41
+ </i>
42
+ </div>
43
+ <div class="patternbot-icon-display-right center-contents island-1-2">
44
+ <i class="icon i-64 block push-1-8">
45
+ <svg class="{{icon_class}}"><use xlink:href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.icons.source}}/{{spritesheet.filename}}#{{icon}}"></use></svg>
46
+ </i>
47
+ <i class="icon i-32 block push-1-8">
48
+ <svg class="{{icon_class}}"><use xlink:href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.icons.source}}/{{spritesheet.filename}}#{{icon}}"></use></svg>
49
+ </i>
50
+ <i class="icon i-18 block">
51
+ <svg class="{{icon_class}}"><use xlink:href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.icons.source}}/{{spritesheet.filename}}#{{icon}}"></use></svg>
52
+ </i>
53
+ </div>
54
+ </div>
55
+ <div class="text-center">
56
+ <i class="patternbot-icon-id-icon icon i-24">
57
+ <svg class="{{icon_class}}"><use xlink:href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.icons.source}}/{{spritesheet.filename}}#{{icon}}"></use></svg>
58
+ </i>
59
+ <span class="icon-label ib">
60
+ <code class="micro">
61
+ #{{icon}}
62
+ </code>
63
+ </span>
64
+ <span class="icon-label ib">
65
+ <button class="center-contents-vertical patternbot-tool-btn pattern-copy-btn" title="Copy icon: {{icon}}" aria-label="Copy icon: {{icon}}" data-clipboard-text="&lt;i class=&quot;icon i-18&quot;&gt;&lt;svg&gt;&lt;use xlink:href=&quot;{{site.baseurl}}/{{page._PatternbotConfig.patternbot.icons.source}}/{{spritesheet.filename}}#{{icon}}&quot;&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/i&gt;" hidden>
66
+ <i class="icon i-18">
67
+ <svg>
68
+ <use xlink:href="#icon-copy"></use>
69
+ </svg>
70
+ </i>
71
+ </button>
72
+ </span>
73
+ </div>
74
+ {% if icon_var_colors %}
75
+ <div class="text-center">
76
+ <strong class="not-bold italic block micro pad-t-1-8">Variables</strong>
77
+ <ul class="list-group push-0">
78
+ {% for varcol in icon_var_colors %}
79
+ <li>
80
+ <code class="pico ib">
81
+ {{varcol.key}}
82
+ </code>
83
+ </li>
84
+ {% endfor %}
85
+ </ul>
86
+ </div>
87
+ {% endif %}
88
+ </li>
89
+ {% endfor %}
90
+ </ul>
91
+ {% endfor %}
data/_patterns/modules/config.yml ADDED
@@ -0,0 +1,32 @@
1
+ _layout: "patternbot_pattern_internal"
2
+ _user_modulifier: true
3
+ _extra_css:
4
+ - 'modules/modules.min.css'
5
+
6
+ title: "Modules"
7
+ description: |
8
+ [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/)
9
+
10
+ patterns:
11
+ list-groups:
12
+ title: "List groups"
13
+ description: |
14
+ 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.
15
+ _popout_button: false
16
+ _code: false
17
+ width: 650
18
+ embed:
19
+ title: "Embed containers"
20
+ description: |
21
+ 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.
22
+ _popout_button: false
23
+ _code: false
24
+ width: 650
25
+ media-objects:
26
+ title: "Media objects"
27
+ description: |
28
+ 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.
29
+ _popout_button: false
30
+ _code: false
31
+ width: 650
32
+
data/_patterns/modules/embed.html ADDED
@@ -0,0 +1,23 @@
1
+ <div class="embed embed-16by9">
2
+ <img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.wide}}" alt="">
3
+ </div>
4
+
5
+ <!-- patternbot:hide-start -->
6
+ <div class="grid push-2">
7
+ <div class="unit xs-1-3">
8
+ <div class="embed embed-1by1">
9
+ <img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
10
+ </div>
11
+ </div>
12
+ <div class="unit xs-1-3">
13
+ <div class="embed embed-1by1">
14
+ <img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
15
+ </div>
16
+ </div>
17
+ <div class="unit xs-1-3">
18
+ <div class="embed embed-1by1">
19
+ <img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
20
+ </div>
21
+ </div>
22
+ </div>
23
+ <!-- patternbot:hide-end -->
data/_patterns/modules/list-groups.html ADDED
@@ -0,0 +1,21 @@
1
+ <!-- patternbot:hide-start -->
2
+ <div class="text-left">
3
+ <!-- patternbot:hide-end -->
4
+
5
+ <ul class="list-group">
6
+ <li>List item 1</li>
7
+ <li>List item 2</li>
8
+ <li>List item 3</li>
9
+ <li>List item 4</li>
10
+ </ul>
11
+
12
+ <ul class="list-group-inline">
13
+ <li>List item 1</li>
14
+ <li>List item 2</li>
15
+ <li>List item 3</li>
16
+ <li>List item 4</li>
17
+ </ul>
18
+
19
+ <!-- patternbot:hide-start -->
20
+ </div>
21
+ <!-- patternbot:hide-end -->
data/_patterns/modules/media-objects.html ADDED
@@ -0,0 +1,16 @@
1
+ <!-- patternbot:hide-start -->
2
+ <div class="text-left">
3
+ <!-- patternbot:hide-end -->
4
+
5
+ <div class="media">
6
+ <div class="media-img">
7
+ <img src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
8
+ </div>
9
+ <div class="media-body">
10
+ <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>
11
+ </div>
12
+ </div>
13
+
14
+ <!-- patternbot:hide-start -->
15
+ </div>
16
+ <!-- patternbot:hide-end -->
data/_patterns/typography/config.yml ADDED
@@ -0,0 +1,55 @@
1
+ _layout: "patternbot_pattern_internal"
2
+ _user_typografier: true
3
+ _extra_css:
4
+ - 'typography/typography.min.css'
5
+
6
+ title: "Typography"
7
+ description: |
8
+ The modular typography uses a system generated by [Typografier](++typografier-settings-url++). There are multiple sizes and spacing classes available—all based on the font-size and line-height to create a harmonious vertical rhythm. [See the documentation for all available classes.](https://learn-the-web.algonquindesign.ca/topics/typografier-cheat-sheet/)
9
+
10
+ patterns:
11
+ size-adjustments:
12
+ title: "Size adjustments"
13
+ description: |
14
+ [Typografier](++typografier-settings-url++) generates font-sizes and line-heights for different screen widths that are more appropriate for the available space.
15
+ _popout_button: false
16
+ _resizable: false
17
+ _code: false
18
+ vertical-spacing:
19
+ title: "Vertical spacing"
20
+ description: |
21
+ The vertical spacing classes generated by [Typografier](++typografier-settings-url++) provide a range of different sizes for both top & bottom padding and bottom margins. These same sizes would be applied to the island classes.
22
+ _popout_button: false
23
+ _resizable: false
24
+ _code: false
25
+ horizontal-spacing:
26
+ title: "Horizontal spacing"
27
+ description: |
28
+ The horizontal spacing classes generated by [Typografier](++typografier-settings-url++) provide range of different sizes for left & right padding. These same sizes would be applied to the island classes.
29
+ _popout_button: false
30
+ _resizable: false
31
+ _code: false
32
+ font-sizes:
33
+ title: "Font sizes"
34
+ description: |
35
+ There are multiple font-sizes available based on a typographic scale. The font-sizes and line-heights increase as the screen gets wider to better use the available space.
36
+ _popout_button: false
37
+ _code: false
38
+ headings:
39
+ title: "Headings"
40
+ _code: false
41
+ links:
42
+ title: "Links"
43
+ _code: false
44
+ lists:
45
+ title: "Lists"
46
+ _code: false
47
+ quotations:
48
+ title: "Quotations"
49
+ _code: false
50
+ emphasis-and-edits:
51
+ title: "Emphasis & edits"
52
+ _code: false
53
+ typesetting:
54
+ title: "Typesetting"
55
+ _code: false