jekyll_patternbot 0.12.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +7 -0
- data/.editorconfig +12 -0
- data/.gitattributes +13 -0
- data/.gitignore +73 -0
- data/CHANGELOG.md +68 -0
- data/Gemfile +16 -0
- data/LICENSE.txt +21 -0
- data/README.md +39 -0
- data/Rakefile +1 -0
- data/_config.yml +54 -0
- data/_data/locales/en-ca.yml +5 -0
- data/_includes/patternbot_icons.html +38 -0
- data/_includes/patternbot_pattern_brand_color_swatches.html +48 -0
- data/_includes/patternbot_pattern_brand_typeface.html +32 -0
- data/_includes/patternbot_pattern_brand_typeface_weight.html +15 -0
- data/_includes/patternbot_pattern_copy_script.html +22 -0
- data/_includes/patternbot_patternlib_pattern.html +241 -0
- data/_layouts/patternbot_pattern_internal.html +94 -0
- data/_layouts/patternbot_pattern_lib.html +214 -0
- data/_layouts/patternbot_pattern_user.html +27 -0
- data/_patterns/brand/colors.html +23 -0
- data/_patterns/brand/config.yml +22 -0
- data/_patterns/brand/logos.html +43 -0
- data/_patterns/brand/typefaces.html +18 -0
- data/_patterns/grid/config.yml +14 -0
- data/_patterns/grid/grid-sizes.html +47 -0
- data/_patterns/icons/config.yml +13 -0
- data/_patterns/icons/icons.html +91 -0
- data/_patterns/modules/config.yml +32 -0
- data/_patterns/modules/embed.html +23 -0
- data/_patterns/modules/list-groups.html +21 -0
- data/_patterns/modules/media-objects.html +16 -0
- data/_patterns/typography/config.yml +55 -0
- data/_patterns/typography/emphasis-and-edits.html +80 -0
- data/_patterns/typography/font-sizes.html +90 -0
- data/_patterns/typography/headings.html +31 -0
- data/_patterns/typography/horizontal-spacing.html +46 -0
- data/_patterns/typography/links.html +11 -0
- data/_patterns/typography/lists.html +43 -0
- data/_patterns/typography/quotations.html +17 -0
- data/_patterns/typography/size-adjustments.html +20 -0
- data/_patterns/typography/typesetting.html +32 -0
- data/_patterns/typography/vertical-spacing.html +55 -0
- data/_patterns/utilities/config.yml +11 -0
- data/_patterns/utilities/utilities.html +18 -0
- data/_plugins/jekyll_patternbot/config.rb +19 -0
- data/_plugins/jekyll_patternbot/filters/color.rb +87 -0
- data/_plugins/jekyll_patternbot/filters/number.rb +11 -0
- data/_plugins/jekyll_patternbot/filters/pattern.rb +15 -0
- data/_plugins/jekyll_patternbot/filters/text.rb +33 -0
- data/_plugins/jekyll_patternbot/finders/finder.rb +34 -0
- data/_plugins/jekyll_patternbot/finders/icons.rb +25 -0
- data/_plugins/jekyll_patternbot/finders/logos.rb +26 -0
- data/_plugins/jekyll_patternbot/finders/patterns.rb +69 -0
- data/_plugins/jekyll_patternbot/finders/sample_pages.rb +18 -0
- data/_plugins/jekyll_patternbot/generators/internal_patterns.rb +56 -0
- data/_plugins/jekyll_patternbot/generators/pattern_lib.rb +27 -0
- data/_plugins/jekyll_patternbot/generators/user_patterns.rb +57 -0
- data/_plugins/jekyll_patternbot/helpers/color.rb +26 -0
- data/_plugins/jekyll_patternbot/helpers/file.rb +17 -0
- data/_plugins/jekyll_patternbot/helpers/jekyll.rb +60 -0
- data/_plugins/jekyll_patternbot/helpers/pattern.rb +36 -0
- data/_plugins/jekyll_patternbot/hooks/pattern_lib.rb +57 -0
- data/_plugins/jekyll_patternbot/loggers/patternbot.rb +24 -0
- data/_plugins/jekyll_patternbot/parsers/css_color.rb +54 -0
- data/_plugins/jekyll_patternbot/parsers/css_font.rb +109 -0
- data/_plugins/jekyll_patternbot/parsers/css_utility.rb +27 -0
- data/_plugins/jekyll_patternbot/parsers/gridifier.rb +22 -0
- data/_plugins/jekyll_patternbot/parsers/icons.rb +27 -0
- data/_plugins/jekyll_patternbot/parsers/modulifier.rb +10 -0
- data/_plugins/jekyll_patternbot/parsers/theme.rb +39 -0
- data/_plugins/jekyll_patternbot/parsers/typografier.rb +21 -0
- data/_plugins/jekyll_patternbot/parsers/web_dev_tool.rb +41 -0
- data/_plugins/jekyll_patternbot/processors/brand.rb +22 -0
- data/_plugins/jekyll_patternbot/processors/modules.rb +35 -0
- data/_plugins/jekyll_patternbot/tags/pattern.rb +19 -0
- data/_plugins/jekyll_patternbot/tags/pattern_css.rb +27 -0
- data/_plugins/jekyll_patternbot/tags/pattern_js.rb +27 -0
- data/_plugins/jekyll_patternbot.rb +55 -0
- data/_sass/.gitignore +0 -0
- data/assets/.gitignore +0 -0
- data/assets/_patternbot/common/common.css +223 -0
- data/assets/_patternbot/common/common.min.css +1 -0
- data/assets/_patternbot/common/gridifier.css +1175 -0
- data/assets/_patternbot/common/gridifier.min.css +1 -0
- data/assets/_patternbot/common/modulifier.css +539 -0
- data/assets/_patternbot/common/modulifier.min.css +1 -0
- data/assets/_patternbot/common/typografier.css +1787 -0
- data/assets/_patternbot/common/typografier.min.css +1 -0
- data/assets/_patternbot/images/placeholder-16by9.svg +1 -0
- data/assets/_patternbot/images/placeholder-1by1.svg +1 -0
- data/assets/_patternbot/patterns/brand/brand.css +79 -0
- data/assets/_patternbot/patterns/brand/brand.min.css +1 -0
- data/assets/_patternbot/patterns/grid/grid.css +27 -0
- data/assets/_patternbot/patterns/grid/grid.min.css +1 -0
- data/assets/_patternbot/patterns/icons/icons.css +41 -0
- data/assets/_patternbot/patterns/icons/icons.min.css +1 -0
- data/assets/_patternbot/patterns/modules/modules.css +4 -0
- data/assets/_patternbot/patterns/modules/modules.min.css +1 -0
- data/assets/_patternbot/patterns/typography/typography.css +11 -0
- data/assets/_patternbot/patterns/typography/typography.min.css +1 -0
- data/assets/_patternbot/patterns/utilities/utilities.css +4 -0
- data/assets/_patternbot/patterns/utilities/utilities.min.css +1 -0
- data/assets/_patternbot/ui/gridifier.css +1175 -0
- data/assets/_patternbot/ui/main.css +513 -0
- data/assets/_patternbot/ui/main.js +301 -0
- data/assets/_patternbot/ui/modulifier.css +725 -0
- data/assets/_patternbot/ui/pattern-lib.css +4 -0
- data/assets/_patternbot/ui/pattern-lib.min.css +1 -0
- data/assets/_patternbot/ui/pattern-lib.min.js +1 -0
- data/assets/_patternbot/ui/typografier.css +1787 -0
- data/jekyll_patternbot.gemspec +34 -0
- data/package.json +35 -0
- data/version.rb +3 -0
- data/yarn.lock +2783 -0
- metadata +312 -0
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -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
|
|
@@ -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>
|
|
@@ -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
|
|
@@ -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="<i class="icon i-18"><svg><use xlink:href="{{site.baseurl}}/{{page._PatternbotConfig.patternbot.icons.source}}/{{spritesheet.filename}}#{{icon}}"></use></svg></i>" 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 %}
|
|
@@ -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
|
+
|
|
@@ -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 -->
|
|
@@ -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 -->
|
|
@@ -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 -->
|
|
@@ -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
|