Example PatternSet

Example set of patterns

Collection cover image

Oveview #

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:

  1. 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".

  2. 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.

  1. Include layout: demo in 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!

  2. 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.

Learn more

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.
 */
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.

Learn more

Image demo pattern

<p>This sample gets displayed in the code samples area,
but is not included in demo.html</p>
<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", class="w-screenshot" %}

Shows off how to create a pattern that uses the Img shortcode.

Learn more