How to create a new pattern
Creating a colorchanger pattern
In this tutorial we will create a new pattern called pat-colorchanger. This pattern changes the text-color of an element after waiting for 3 seconds.
Creating the pattern directory
To start off, lets create a new directory in which we will put our pattern’s files, and then lets navigate into it.
mkdir pat-colorchanger cd pat-colorchanger
Using the Yeoman generator
Instead of manually typing out the code shown in this tutorial, you can simply use the Yeoman Patternslib generator to generate the appropriate skeleton for you.
If Yeoman is not installed, you can get it via npm:
sudo npm install -g yo
Then, simply run the following commands inside the
directory you created in the previous section.
sudo npm install -g generator-patternslib yo patternslib pat-colorchanger
In our example we are creating for demonstration purposes the pattern pat-colorchanger, but you will of course choose a more appropriate name for your own pattern.
The directory layout
The Yeoman generator will create the correct layout and all the necessary files.
However, if you are doing this manually instead of using Yeoman, then create this directory as well as the files required:
touch README.md index.html src/pat-colorchanger.js
Determining the HTML markup for the pattern
Patterns are configured via a declarative HTML syntax.
Usually a particular pattern is invoked by specifying its name as a HTML class on a DOM object. The invoked pattern then acts upon that specifc DOM element. In our example case, the pattern changes the text color after 3 seconds. This color change is applied to the DOM element on which the pattern is declared.
The pattern can be configured by specifying HTML5 data attributes, which start with the
data- prefix, followed by the pattern’s name.
So in our case, that is
<p class="pat-colorchanger" data-pat-colorchanger="color: blue" style="color: red"> This text will turn from red into blue after 3 seconds. </p>
The HTML markup as shown above, which illustrates how your pattern functions, should be put
index.html file. This file can then be used by designers and integrators
to demo the pattern’s functionality.
When you are designing your pattern, you need to decide on a relevant name for it, and how it should be configured.
For a reference of all the ways a pattern could be configured, please read the Parameters page.
Put this code into
This pattern can be loaded directly in your browser after a standard Patterns bundle has been loaded.
<html> <body> <script src="patterns-2.0.0.js"></script> <script src="/src/pat-colorchanger.js"></script> </body> </html>
There is a general rule that patterns should only trigger for elements that
pat-<pattern name> class. This is reflected in the
trigger for our
pattern: it specifies that this pattern applies to any DOM element with the
When the page loads (and also when content is injected via AJAX) the
function of our pattern will be called once for each matched DOM element.