Example Pattern Set
Example set of patterns
On this page
Overview #
Code pattern is a snippet of code, representing a solution to a typical problem. Patterns are organized as follows: "/patterns/PatternSuite/PatternSet/PatternName"
To create a new pattern:
-
Add a new directory in a chosen "PatternSuite" or "PatternSet" folder. The directory name becomes the ID of the pattern. For example, for a pattern in "/patterns/some-suite/my-pattern/" the pattern ID is "some-suite/my-pattern".
-
Add the following files to the directory:
site/content/en/patterns/SomePatternSuite/
|-+ SomePatternName/
|-- index.md
|-- demo.md
|-+ assets/
|--some-asset.ext"index.md"" #
The overview and the description of the pattern.
YAML front matter must contain layout: pattern and title.
---
layout: pattern
title: Example Pattern
---"demo.md" #
The actual demo that gets included via <iframe>.
YAML front matter must contain patternId.
You have two options for how to build the actual rendered HTML.
-
Include
layout: demoin the front matter. By doing this, the demo will be built out of "body.html" and all CSS and JS files found in "assets". Most authors will want this! -
Include the HTML you want to render, but do not specify any
layout:. (See the "Full HTML demo pattern" and "Image demo pattern", below.)
"assets" directory #
Assets directory can contain one or more files named "asset-name.ext", such as "style.css" and "script.js"
Each file is displayed as a tab in samples area of the code pattern.
The file extension is the label of the tab with the sample. For example, the tab displaying "style.css" is labeled CSS.
If layout: demo is specified, as it is in the default example pattern, then the demo HTML will be assembled by including "body.html" from this folder, as well as:
- "*.css" files get included in the
<head>of the demo. - "*.js" files get included at the end of the body of the demo.
Example pattern
<div>
HTML for the example-pattern
</div>console.log('Javascript for the example-pattern');
document.body.append('Javascript for the example-pattern');
body {
background-color: red;
}This is the easiest way to create a new pattern, and assets will be combined for your benefit.
Full HTML demo pattern
<div>
This HTML is displayed as source code in the samples area of a CodePattern.
It is ignored and not included in "demo.html", because this pattern demo is
defined as a standalone, full HTML page.
</div>console.log('This JS is displayed in the samples area of a CodePattern.');
/**
* This file is ignored and not automatically included inside "demo.html",
* because this pattern demo is defined as a standalone, full HTML page.
*/
console.log('I am a special script declared as a static asset of this demo.');
/**
* This file is ignored and not automatically included inside "demo.html",
* because this pattern demo is defined as a standalone, full HTML page.
*/
body {
background-color: red;
}
/* This CSS is displayed in the samples area of a CodePattern.
It is ignored and not included in the demo.html, because in this pattern demo
is defined as a standalone, full html page. */Use this pattern if you'd like to show different HTML in the source viewer from what is actually rendered.
Graph demo pattern
<figure class="highcharts-figure">
<div id="container"></div>
</figure>
document.addEventListener('pageScriptsLoaded', (e) => {
Highcharts.chart('container', {
title: {
text: 'CMS churn'
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. From {point.from} to {point.to}: {point.weight}.'
}
},
series: [{
keys: ['from', 'to', 'weight'],
data: [
[
"Joomla",
"WordPress",
2832
],
[
"Drupal",
"WordPress",
2180
],
[
"Wix",
"WordPress",
789
],
[
"Squarespace",
"WordPress",
628
],
[
"WordPress",
"Drupal",
624
],
[
"WordPress",
"Wix",
559
],
[
"WordPress",
"Squarespace",
550
],
[
"TYPO3 CMS",
"WordPress",
459
],
[
"WordPress",
"Joomla",
285
],
[
"DNN",
"WordPress",
214
],
[
"WordPress",
"Duda",
206
],
[
"WordPress",
"Craft CMS",
186
],
[
"WordPress",
"1C-Bitrix",
179
],
[
"Duda",
"WordPress",
163
],
[
"WordPress",
"Tilda",
159
],
[
"GoDaddy Website Builder",
"WordPress",
155
],
[
"WordPress",
"TYPO3 CMS",
141
],
[
"Weebly",
"WordPress",
137
],
[
"WebsPlanet",
"Mono.net",
136
],
[
"WordPress",
"Contentful",
130
],
[
"1C-Bitrix",
"WordPress",
129
],
[
"Joomla",
"Drupal",
118
],
[
"Drupal",
"Brightspot",
118
],
[
"Drupal",
"Adobe Experience Manager",
115
],
[
"Craft CMS",
"WordPress",
107
],
[
"WordPress",
"Adobe Experience Manager",
107
],
[
"Microsoft SharePoint",
"WordPress",
106
],
[
"Squarespace",
"Wix",
99
],
[
"Joomla",
"1C-Bitrix",
96
],
[
"WebsPlanet",
"Duda",
95
],
[
"SilverStripe",
"WordPress",
92
],
[
"Business Catalyst",
"WordPress",
91
],
[
"Jimdo",
"WordPress",
86
],
[
"WordPress",
"October CMS",
85
],
[
"Kentico CMS",
"WordPress",
83
],
[
"Wix",
"Squarespace",
79
],
[
"Sitefinity",
"WordPress",
76
],
[
"Tilda",
"WordPress",
73
],
[
"Contao",
"WordPress",
68
],
[
"DataLife Engine",
"WordPress",
66
],
[
"WordPress",
"Odoo",
66
],
[
"WordPress",
"GoDaddy Website Builder",
65
],
[
"Drupal",
"Contentful",
64
],
[
"Liferay",
"WordPress",
62
],
[
"Mono.net",
"Wix",
61
],
[
"MODX",
"WordPress",
58
],
[
"SPIP",
"WordPress",
57
],
[
"1C-Bitrix",
"Tilda",
57
],
[
"WordPress",
"Sitecore",
56
],
[
"TYPO3 CMS",
"Drupal",
54
],
[
"Microsoft SharePoint",
"Drupal",
52
],
[
"Drupal",
"1C-Bitrix",
51
]
],
type: 'dependencywheel',
name: 'CMS churn',
dataLabels: {
color: '#333',
textPath: {
enabled: true,
attributes: {
dy: 5
}
},
distance: 10
},
size: '95%'
}]
});
});
.highcharts-figure,
.highcharts-data-table table {
min-width: 320px;
max-width: 800px;
margin: 1em auto;
}
#container {
height: 500px;
}
.highcharts-data-table table {
font-family: Verdana, sans-serif;
border-collapse: collapse;
border: 1px solid #ebebeb;
margin: 10px auto;
text-align: center;
width: 100%;
max-width: 500px;
}
.highcharts-data-table caption {
padding: 1em 0;
font-size: 1.2em;
color: #555;
}
.highcharts-data-table th {
font-weight: 600;
padding: 0.5em;
}
.highcharts-data-table td,
.highcharts-data-table th,
.highcharts-data-table caption {
padding: 0.5em;
}
.highcharts-data-table thead tr,
.highcharts-data-table tr:nth-child(even) {
background: #f8f8f8;
}
.highcharts-data-table tr:hover {
background: #f1f7ff;
}
#csv {
display: none;
}Use this pattern if you'd like to show different HTML in the source viewer from what is actually rendered.
Image demo pattern
<p>This sample gets displayed in the code samples area,
but is not included in demo.html</p>
{% Img src="image/admin/3lZosaL1YXafLn4ZRINl.gif", alt="WalkMe state toggle test.", width="441", height="400" %}Shows off how to create a pattern that uses the Img shortcode.