jekyll_patternbot 1.0.3 → 1.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +19 -0
- data/_includes/patternbot_pattern_brand_typeface.html +2 -2
- data/_includes/patternbot_pattern_class_list.html +30 -0
- data/_includes/patternbot_patternlib_pattern.html +5 -1
- data/_layouts/patternbot_pattern_lib.html +1 -1
- data/_patterns/grid/config.yml +8 -1
- data/_patterns/grid/utility-classes.html +1 -0
- data/_patterns/grid/utility-classes.yml +35 -0
- data/_patterns/icons/config.yml +26 -1
- data/_patterns/icons/icon-classes.html +1 -0
- data/_patterns/icons/icon-classes.yml +54 -0
- data/_patterns/icons/icon-sizes.html +8 -0
- data/_patterns/icons/icons-with-labels.html +6 -0
- data/_patterns/icons/icons.html +1 -1
- data/_patterns/modules/config.yml +35 -13
- data/_patterns/modules/images-embeds.html +28 -0
- data/_patterns/modules/media-objects.html +4 -7
- data/_patterns/modules/skip-links.html +1 -0
- data/_patterns/modules/utility-classes.html +29 -0
- data/_patterns/modules/utility-classes.yml +196 -0
- data/_patterns/typography/config.yml +6 -1
- data/_patterns/typography/utility-classes.html +1 -0
- data/_patterns/typography/utility-classes.yml +36 -0
- data/_patterns/typography/vertical-spacing.html +5 -5
- data/_patterns/utilities/classes.html +1 -20
- data/_plugins/jekyll_patternbot.rb +1 -0
- data/_plugins/jekyll_patternbot/config.rb +8 -0
- data/_plugins/jekyll_patternbot/hooks/pattern_lib.rb +9 -3
- data/_plugins/jekyll_patternbot/parsers/css_font.rb +5 -4
- data/_plugins/jekyll_patternbot/parsers/gridifier.rb +4 -0
- data/_plugins/jekyll_patternbot/parsers/icons.rb +7 -0
- data/_plugins/jekyll_patternbot/parsers/modulifier.rb +4 -0
- data/_plugins/jekyll_patternbot/parsers/typografier.rb +4 -0
- data/_plugins/jekyll_patternbot/parsers/web_dev_tool.rb +12 -0
- data/_plugins/jekyll_patternbot/processors/brand.rb +5 -5
- data/_plugins/jekyll_patternbot/processors/icons.rb +23 -0
- data/_plugins/jekyll_patternbot/processors/modules.rb +15 -15
- data/_plugins/jekyll_patternbot/processors/utilities.rb +5 -5
- data/assets/_patternbot/common/common.css +10 -0
- data/assets/_patternbot/common/common.min.css +1 -1
- data/assets/_patternbot/patterns/utilities/utilities.css +24 -0
- data/assets/_patternbot/patterns/utilities/utilities.min.css +1 -1
- data/version.rb +1 -1
- metadata +16 -4
- data/_patterns/modules/embed.html +0 -23
- data/_patterns/modules/list-groups.html +0 -21
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 6c9240afd356cdc24f186b10691f65353b93bd793ae184d1dd928f06aeaab901
|
4
|
+
data.tar.gz: 5a5e7fc77e495a5303013e4b4638c79f06e64645adc66ab368495c3664876ac0
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 62d443a880fbc9d155b8b8e085931f738e145a045451915ed5ed84b39702c0cfb9125cc57d30a459e5544c78963847ff09f6173de03ae01b0a8f950b3319ab22
|
7
|
+
data.tar.gz: cc6d16da3aa6c874858ad33d8fb2c79a079d9dd9dccb1b9d0fabbeb39f32e28752fcf2cd18881189c24168914dc6d3414197ab6619f975a199cea2f94ec47e92
|
data/CHANGELOG.md
CHANGED
@@ -5,6 +5,25 @@ Jekyll Patternbot adheres to [Semantic Versioning](http://semver.org/).
|
|
5
5
|
|
6
6
|
---
|
7
7
|
|
8
|
+
## [1.1.0] — 2019-01-26
|
9
|
+
|
10
|
+
### Added
|
11
|
+
|
12
|
+
- Added class lists for all the Web Dev Tool systems: Gridifier, Typografier & Modulifier.
|
13
|
+
- Added icons sizes lists for the icons & a code sample of using icons.
|
14
|
+
- Added the ability specify a code sample form within `config.yml` instead of outputting the pattern include.
|
15
|
+
|
16
|
+
### Fixed
|
17
|
+
|
18
|
+
- Fix the class names for some of the vertical spacing classes: they didn’t match real Typografier class names.
|
19
|
+
- Fixed a bug when `<h2>` tags were targetted, the font family in the font display changed incorrectly.
|
20
|
+
- A pluralization typo in the ModulesProcessor caused a few modules to not display.
|
21
|
+
- Bold fonts weren’t showing the the typefaces section when there was no `font_url` or it was a browser-safe font.
|
22
|
+
- Added missing space above `<hr>` that separates the different typefaces.
|
23
|
+
- Added a cleaner error message when `theme: jekyll_patternbot` wasn’t specified inside the user’s `_config.yml` file.
|
24
|
+
|
25
|
+
---
|
26
|
+
|
8
27
|
## [1.0.3] — 2019-01-19
|
9
28
|
|
10
29
|
### Fixed
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<section style="font-family:var({{include.font.var}});">
|
1
|
+
<section style="font-family:var({{include.font.var}});" {% if include.show_hr %}class="pad-t"{% endif %}>
|
2
2
|
{% if include.show_hr %}<hr class="patternbot-hr">{% endif %}
|
3
3
|
|
4
4
|
<ul class="patternbot-code-details patternbot-list-group list-group-inline micro push-1-2 pad-t">
|
@@ -12,7 +12,7 @@
|
|
12
12
|
</li>
|
13
13
|
</ul>
|
14
14
|
|
15
|
-
<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>
|
15
|
+
<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>
|
16
16
|
{% assign pattern_has_rationale = include.key | has_pattern_rationale:'typefaces' %}
|
17
17
|
{% if pattern_has_rationale %}
|
18
18
|
<div class="patternbot-max-length tera max-length">
|
@@ -0,0 +1,30 @@
|
|
1
|
+
<div class="patternbot-font-primary text-left milli">
|
2
|
+
<div class="pattern-utilities-scrollable scrollable">
|
3
|
+
<table class="patternbot-utilities-table">
|
4
|
+
<thead>
|
5
|
+
<tr>
|
6
|
+
<th scope="col" colspan="6">Class</th>
|
7
|
+
<th scope="col" colspan="18">Description</th>
|
8
|
+
</tr>
|
9
|
+
</thead>
|
10
|
+
<tbody>
|
11
|
+
{% for util in include.classes %}
|
12
|
+
<tr>
|
13
|
+
<th class="valign-middle" scope="row" colspan="6">
|
14
|
+
<ul class="list-group patternbot-utilities-classes">
|
15
|
+
{% if util.classes %}
|
16
|
+
{% for class in util.classes %}
|
17
|
+
<li><code class="ib valign-middle">{{class | escape}}</code></li>
|
18
|
+
{% endfor %}
|
19
|
+
{% else %}
|
20
|
+
<li><code class="ib valign-middle">{{util.class | escape}}</code></li>
|
21
|
+
{% endif %}
|
22
|
+
</ul>
|
23
|
+
</th>
|
24
|
+
<td class="valign-middle" scope="col" colspan="18"><span class="ib valign-middle">{{util.description | markdownify}}</span></td>
|
25
|
+
</tr>
|
26
|
+
{% endfor %}
|
27
|
+
</tbody>
|
28
|
+
</table>
|
29
|
+
</div>
|
30
|
+
</div>
|
@@ -188,7 +188,11 @@
|
|
188
188
|
<svg><use xlink:href="#icon-copy"></use></svg>
|
189
189
|
</i>
|
190
190
|
</button>
|
191
|
-
|
191
|
+
{% if pattern_data._code_sample %}
|
192
|
+
<code><pre id="{{include.pattern.name}}-{{pattern_name}}-code-sample-copy-chunk">{{pattern_data._code_sample | escape}}</pre></code>
|
193
|
+
{% else %}
|
194
|
+
<code><pre id="{{include.pattern.name}}-{{pattern_name}}-code-sample-copy-chunk">{{pattern_name | pattern_code:include.pattern.name, pattern_data | escape}}</pre></code>
|
195
|
+
{% endif %}
|
192
196
|
{% if pattern_data.fields %}
|
193
197
|
<div class="pad-t-1-2">
|
194
198
|
<hr class="pattern-code-sep push-1-2">
|
@@ -156,7 +156,7 @@
|
|
156
156
|
</a>
|
157
157
|
</li>
|
158
158
|
{% endunless %}
|
159
|
-
{% unless page._PatternbotData.icons == empty %}
|
159
|
+
{% unless page._PatternbotData.icons.spritesheets == empty %}
|
160
160
|
<li role="presentation">
|
161
161
|
<a class="gutter pad-t-1-4 pad-b-1-4 block" role="tab" aria-controls="icons" href="#icons">
|
162
162
|
<div class="relative">
|
data/_patterns/grid/config.yml
CHANGED
@@ -2,13 +2,20 @@ _layout: "patternbot_pattern_internal"
|
|
2
2
|
_user_gridifier: true
|
3
3
|
_extra_css:
|
4
4
|
- 'grid/grid.min.css'
|
5
|
+
- 'utilities/utilities.min.css'
|
5
6
|
|
6
7
|
title: "Grid"
|
7
8
|
description: |
|
8
|
-
The grids generated by [Gridifier](++gridifier-settings-url++) provide an array of sizing options—with explicit classes—for each major breakpoint.
|
9
|
+
The grids generated by [Gridifier](++gridifier-settings-url++) provide an array of sizing options—with explicit classes—for each major breakpoint.
|
9
10
|
|
10
11
|
patterns:
|
11
12
|
grid-sizes:
|
12
13
|
_popout_button: false
|
13
14
|
_resizable: false
|
14
15
|
_code: false
|
16
|
+
utility-classes:
|
17
|
+
description: |
|
18
|
+
Mix & match classes for grids and units to make any responsive layout necessary for templates.
|
19
|
+
_popout_button: false
|
20
|
+
_resizable: false
|
21
|
+
_code: false
|
@@ -0,0 +1 @@
|
|
1
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.gridifier.utility_classes %}
|
@@ -0,0 +1,35 @@
|
|
1
|
+
# Direct copy from: https://learn-the-web.algonquindesign.ca/topics/gridifier-cheat-sheet/
|
2
|
+
|
3
|
+
- class: '.grid-middle'
|
4
|
+
description: 'Vertically centers all the units inside a grid row.'
|
5
|
+
- class: '.grid-stretch'
|
6
|
+
description: 'Forces all the unit elements to be the same height.'
|
7
|
+
- class: '.grid-bottom'
|
8
|
+
description: 'Aligns all the units to the bottom of the grid row.'
|
9
|
+
|
10
|
+
- class: '.[size]-0'
|
11
|
+
description: 'Allows a unit to be hidden on specific screens sizes.'
|
12
|
+
- class: '.unit-[size]-centered'
|
13
|
+
description: 'Allows a unit to be centered horizontally on specific screen sizes.'
|
14
|
+
- class: '.unit-offset-[size]-[width]'
|
15
|
+
description: 'Makes empty space to the left of the unit by the specified amount.'
|
16
|
+
- class: '.unit-push-[size]-[width]'
|
17
|
+
description: 'Pushes the unit to the right, to change order.'
|
18
|
+
- class: '.unit-pull-[size]-[width]'
|
19
|
+
description: 'Pulls the unit to the left, to change order.'
|
20
|
+
- class: '.unit-content-distribute'
|
21
|
+
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.'
|
22
|
+
- class: '.[size]-content-distribute'
|
23
|
+
description: 'Makes the content distribute at a specific screen size.'
|
24
|
+
- class: '.content-fill'
|
25
|
+
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.'
|
26
|
+
- class: '.[size]-content-fill'
|
27
|
+
description: 'Cause a chunk of content to stretch vertically at a specific screen size.'
|
28
|
+
- classes: '.content-shrink'
|
29
|
+
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.'
|
30
|
+
- classes: '.[size]-content-shrink'
|
31
|
+
description: 'Allow the element to be only as wide as it needs to be, when using `.content-fill` — only at a specific screen size.'
|
32
|
+
- class: '.unit-content-center'
|
33
|
+
description: 'Lumps all the content together in the vertical center of the element.'
|
34
|
+
- class: '.unit-[size]-content-center'
|
35
|
+
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
CHANGED
@@ -1,13 +1,38 @@
|
|
1
1
|
_layout: "patternbot_pattern_internal"
|
2
2
|
_extra_css:
|
3
3
|
- 'icons/icons.min.css'
|
4
|
+
- 'utilities/utilities.min.css'
|
4
5
|
|
5
6
|
title: "Icons"
|
6
7
|
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.
|
8
|
+
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.
|
8
9
|
|
9
10
|
patterns:
|
10
11
|
icons:
|
11
12
|
_popout_button: false
|
12
13
|
_code: false
|
13
14
|
_resizable: false
|
15
|
+
icons-with-labels:
|
16
|
+
title: "Icons with Labels"
|
17
|
+
description: |
|
18
|
+
Sample code for using SVG icon spritesheets mixed with a text label, using the below classes.
|
19
|
+
width: 320
|
20
|
+
_code_sample: |
|
21
|
+
<a class="icon-link exa" href="#">
|
22
|
+
<i class="icon i-1">
|
23
|
+
<svg><use xlink:href="/images/icons.svg#icon-id"></use></svg>
|
24
|
+
</i>
|
25
|
+
<span class="icon-label">Icon label</span>
|
26
|
+
</a>
|
27
|
+
icon-classes:
|
28
|
+
description: |
|
29
|
+
Classes that can be used on elements & combined to make nicely aligned icons and labels.
|
30
|
+
_popout_button: false
|
31
|
+
_resizable: false
|
32
|
+
_code: false
|
33
|
+
icon-sizes:
|
34
|
+
description: |
|
35
|
+
Icons sizes available from [Modulifier](https://modulifier.web-dev.tools) & [Typografier](https://typografier.web-dev.tools).
|
36
|
+
_popout_button: false
|
37
|
+
_code: false
|
38
|
+
_resizable: false
|
@@ -0,0 +1 @@
|
|
1
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.icons.classes.general %}
|
@@ -0,0 +1,54 @@
|
|
1
|
+
# Direct copy from: https://learn-the-web.algonquindesign.ca/topics/modulifier-cheat-sheet/
|
2
|
+
# Direct copy from: https://learn-the-web.algonquindesign.ca/topics/typografier-cheat-sheet/
|
3
|
+
|
4
|
+
general:
|
5
|
+
- class: '.icon'
|
6
|
+
description: 'To be added to a tag, usually `<i>` to mark it as being an icon.'
|
7
|
+
- class: '.icon-label'
|
8
|
+
description: 'Can be added to the neighbouring text to allow the icon and the text to align.'
|
9
|
+
- class: '.icon-link'
|
10
|
+
description: 'Can be added to the surrounding `<a>` tag to remove the `text-decoration`'
|
11
|
+
|
12
|
+
sizes:
|
13
|
+
- class: '.i-16'
|
14
|
+
description: '16 px × 16 px'
|
15
|
+
- class: '.i-18'
|
16
|
+
description: '18 px × 18 px'
|
17
|
+
- class: '.i-20'
|
18
|
+
description: '20 px × 20 px'
|
19
|
+
- class: '.i-24'
|
20
|
+
description: '24 px × 24 px'
|
21
|
+
- class: '.i-32'
|
22
|
+
description: '32 px × 32 px'
|
23
|
+
- class: '.i-48'
|
24
|
+
description: '48 px × 48 px'
|
25
|
+
- class: '.i-64'
|
26
|
+
description: '64 px × 64 px'
|
27
|
+
- class: '.i-96'
|
28
|
+
description: '96 px × 96 px'
|
29
|
+
- class: '.i-128'
|
30
|
+
description: '128 px × 128 px'
|
31
|
+
- class: '.i-192'
|
32
|
+
description: '192 px × 192 px'
|
33
|
+
- class: '.i-256'
|
34
|
+
description: '256 px × 256 px'
|
35
|
+
|
36
|
+
type_sizes:
|
37
|
+
- class: '.i-1'
|
38
|
+
description: 'An icon that’s width & height are the same size of the current line-height.'
|
39
|
+
- class: '.i-3-4'
|
40
|
+
description: 'An icon that’s width & height are ¾ the size of the current line-height.'
|
41
|
+
- class: '.i-1-2'
|
42
|
+
description: 'An icon that’s width & height are ½ the size of the current line-height.'
|
43
|
+
- class: '.i-1-4'
|
44
|
+
description: 'An icon that’s width & height are ¼ the size of the current line-height.'
|
45
|
+
- class: '.i-1-8'
|
46
|
+
description: 'An icon that’s width & height are ⅛ the size of the current line-height.'
|
47
|
+
- class: '.i-3-2'
|
48
|
+
description: 'An icon that’s width & height are 1½ the size of the current line-height.'
|
49
|
+
- class: '.i-5-4'
|
50
|
+
description: 'An icon that’s width & height are 1¼ the size of the current line-height.'
|
51
|
+
- class: '.i-7-4'
|
52
|
+
description: 'An icon that’s width & height are 1¾ the size of the current line-height.'
|
53
|
+
- class: '.i-2'
|
54
|
+
description: 'An icon that’s width & height are twice the size of the current line-height.'
|
@@ -0,0 +1,8 @@
|
|
1
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">Pixel-based icons sizes</h2>
|
2
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.icons.classes.sizes %}
|
3
|
+
|
4
|
+
{% if page._PatternbotData.css.typografier contains 'url' %}
|
5
|
+
<hr class="patternbot-hr patternbot-hr-always-visible">
|
6
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">Typography-based icons sizes</h2>
|
7
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.icons.classes.type_sizes %}
|
8
|
+
{% endif %}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<a class="icon-link exa" href="#">
|
2
|
+
<i class="icon i-1">
|
3
|
+
<svg><use xlink:href="/images/{{page._PatternbotData.icons.spritesheets[0].filename}}#{{page._PatternbotData.icons.spritesheets[0].icons[0]}}"></use></svg>
|
4
|
+
</i>
|
5
|
+
<span class="icon-label">Icon label</span>
|
6
|
+
</a>
|
data/_patterns/icons/icons.html
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
{% for spritesheet in page._PatternbotData.icons %}
|
1
|
+
{% for spritesheet in page._PatternbotData.icons.spritesheets %}
|
2
2
|
{% assign spritesheet_has_bg = spritesheet.name | has_pattern_background_color: 'icons' %}
|
3
3
|
<ul class="patternbot-icon-display patternbot-list-group list-group-inline {% if spritesheet_has_bg %}patternbot-icon-display-has-bg{% endif %}">
|
4
4
|
{% for icon in spritesheet.icons %}
|
@@ -2,31 +2,53 @@ _layout: "patternbot_pattern_internal"
|
|
2
2
|
_user_modulifier: true
|
3
3
|
_extra_css:
|
4
4
|
- 'modules/modules.min.css'
|
5
|
+
- 'utilities/utilities.min.css'
|
5
6
|
|
6
7
|
title: "Modules"
|
7
8
|
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.
|
9
|
+
[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.
|
9
10
|
|
10
11
|
patterns:
|
11
|
-
|
12
|
-
title: "
|
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"
|
12
|
+
images-embeds:
|
13
|
+
title: "Images & embed containers"
|
20
14
|
description: |
|
21
15
|
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
16
|
_popout_button: false
|
23
|
-
|
24
|
-
|
17
|
+
_resizable: false
|
18
|
+
_code_sample: |
|
19
|
+
<div class="embed embed-4by3">
|
20
|
+
<img class="embed-item" src="/images/4by3.jpg" alt="">
|
21
|
+
</div>
|
25
22
|
media-objects:
|
26
23
|
title: "Media objects"
|
27
24
|
description: |
|
28
25
|
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
26
|
_popout_button: false
|
27
|
+
_resizable: false
|
28
|
+
_code_sample: |
|
29
|
+
<div class="media">
|
30
|
+
<div class="media-img">
|
31
|
+
<img src="/images/square.jpg" alt="">
|
32
|
+
</div>
|
33
|
+
<div class="media-body">
|
34
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
|
35
|
+
</div>
|
36
|
+
</div>
|
37
|
+
skip-links:
|
38
|
+
description: |
|
39
|
+
A helpful accessibility feature that should be included immediately within the `<body>` tag on the top of most pages.
|
40
|
+
_popout_button: false
|
41
|
+
_resizable: false
|
42
|
+
_code_sample: |
|
43
|
+
<ul class="skip-links">
|
44
|
+
<li><a href="#main">Jump to main content</a></li>
|
45
|
+
<li><a href="#nav">Jump to main navigation</a></li>
|
46
|
+
<li><a href="#pause">Pause all animations</a></li>
|
47
|
+
</ul>
|
48
|
+
utility-classes:
|
49
|
+
description: |
|
50
|
+
All the different utility classes available from within [Modulifier](++modulifier-settings-url++).
|
51
|
+
_popout_button: false
|
30
52
|
_code: false
|
31
|
-
|
53
|
+
_resizable: false
|
32
54
|
|
@@ -0,0 +1,28 @@
|
|
1
|
+
<div class="text-length patternbot-max-length-short">
|
2
|
+
<div class="embed embed-16by9">
|
3
|
+
<img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.wide}}" alt="">
|
4
|
+
</div>
|
5
|
+
<div class="grid push-2">
|
6
|
+
<div class="unit xs-1-3">
|
7
|
+
<div class="embed embed-1by1">
|
8
|
+
<img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
|
9
|
+
</div>
|
10
|
+
</div>
|
11
|
+
<div class="unit xs-1-3">
|
12
|
+
<div class="embed embed-1by1">
|
13
|
+
<img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
|
14
|
+
</div>
|
15
|
+
</div>
|
16
|
+
<div class="unit xs-1-3">
|
17
|
+
<div class="embed embed-1by1">
|
18
|
+
<img class="embed-item" src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
|
19
|
+
</div>
|
20
|
+
</div>
|
21
|
+
</div>
|
22
|
+
</div>
|
23
|
+
|
24
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">Image utility classes</h2>
|
25
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.images %}
|
26
|
+
|
27
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">Embed container sizes</h2>
|
28
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.embed_sizes %}
|
@@ -1,7 +1,4 @@
|
|
1
|
-
|
2
|
-
<div class="text-left">
|
3
|
-
<!-- patternbot:hide-end -->
|
4
|
-
|
1
|
+
<div class="text-left patternbot-max-length-short">
|
5
2
|
<div class="media">
|
6
3
|
<div class="media-img">
|
7
4
|
<img src="{{site.baseurl}}{{page._PatternbotConfig.patternbot.placeholders.square}}" alt="">
|
@@ -10,7 +7,7 @@
|
|
10
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>
|
11
8
|
</div>
|
12
9
|
</div>
|
13
|
-
|
14
|
-
<!-- patternbot:hide-start -->
|
15
10
|
</div>
|
16
|
-
|
11
|
+
|
12
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">Media object classes</h2>
|
13
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.media_objects %}
|
@@ -0,0 +1 @@
|
|
1
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.skip_links %}
|
@@ -0,0 +1,29 @@
|
|
1
|
+
{% if page._PatternbotData.css.modulifier.settings contains 'list-group' %}
|
2
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">List utility classes</h2>
|
3
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.lists %}
|
4
|
+
{% endif %}
|
5
|
+
|
6
|
+
{% if page._PatternbotData.css.modulifier.settings contains 'buttons' %}
|
7
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">Basic button classes</h2>
|
8
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.buttons %}
|
9
|
+
{% endif %}
|
10
|
+
|
11
|
+
{% if page._PatternbotData.css.modulifier.settings contains 'hidden' %}
|
12
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">Utility classes for hiding</h2>
|
13
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.hidden %}
|
14
|
+
{% endif %}
|
15
|
+
|
16
|
+
{% if page._PatternbotData.css.modulifier.settings contains 'positioning' %}
|
17
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">Positioning utility classes</h2>
|
18
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.positioning %}
|
19
|
+
{% endif %}
|
20
|
+
|
21
|
+
{% if page._PatternbotData.css.modulifier.settings contains 'forms' %}
|
22
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">Form utility classes</h2>
|
23
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.forms %}
|
24
|
+
{% endif %}
|
25
|
+
|
26
|
+
{% if page._PatternbotData.css.modulifier.settings contains 'print' %}
|
27
|
+
<h2 class="patternbot-font-primary patternbot-color-body giga normal">Print utility classes</h2>
|
28
|
+
{% include patternbot_pattern_class_list.html classes=page._PatternbotData.css.modulifier.utility_classes.print %}
|
29
|
+
{% endif %}
|