11# How to create a new pattern
22
3- This section provides a quick tutorial on how to create a new Patternslib pattern.
3+ This document provides a quick tutorial on how to create a new Patternslib pattern.
44Patterns are implemented as javascript objects that are registered with the Patternslib library.
55
6- We create a new pattern called pat-colorchanger, which will change
7- the text-color of an element after waiting for 3 seconds.
6+ ## Creating a colorchanger pattern
87
9- ## Creating the pattern directory
8+ In this tutorial we will create a new pattern called pat-colorchanger.
9+ This pattern changes the text-color of an element after waiting for 3 seconds.
10+
11+ ### Creating the pattern directory
1012
1113To start off, lets create a new directory in which we'll put our pattern's
1214files, and then lets navigate into it.
@@ -16,6 +18,17 @@ mkdir pat-colorchanger
1618cd pat-colorchanger
1719```
1820
21+ ### Using the Yeoman generator
22+
23+ Instead of manually typing out the code shown in this tutorial, you can simply
24+ use the [ Yeoman Patternslib generator] ( https://www.npmjs.com/package/generator-patternslib ) to generate the appropriate skeleton for you.
25+
26+ To do so, simply run the following commands in side the ` pat-colorchanger `
27+ directory you created in the previous section.
28+
29+ sudo npm install -g generator-patternslib
30+ yo patternslib pat-colorchanger
31+
1932In our example we're creating for demonstration purposes the pattern
2033pat-colorchanger, but you'll of course choose a more appropriate
2134name for your own pattern.
@@ -26,11 +39,10 @@ Each pattern should have a certain layout. Look for example at [pat-pickadate](h
2639There is one subdirectory, called * src* , inside the * pat-pickadate* repository.
2740It contains the pattern's actual Javascript source file(s).
2841
29- Let's create this directory now::
30-
31- mkdir src
42+ The Yeoman generator will create the correct layout and all the necessary
43+ files.
3244
33- And let's also create the files required: :
45+ However, if you're doing this manually instead of using Yeoman, then create this directory as well as the files required:
3446
3547 touch README.md index.html src/pat-colorchanger.js
3648
@@ -39,7 +51,7 @@ And let's also create the files required::
3951
4052Patterns are configured via a declarative HTML syntax.
4153
42- A particular pattern is usually invoked by specifying its name as an HTML class on a DOM object.
54+ Usually a particular pattern is invoked by specifying its name as an HTML class on a DOM object.
4355The invoked pattern then acts upon that specifc DOM element. In our example case, the pattern
4456changes the text color after 3 seconds. This color change is applied to the DOM
4557element on which the pattern is declared.
@@ -51,11 +63,9 @@ So in our case, that's `data-pat-colorchanger`.
5163
5264For example:
5365
54- ```
55- <p class="pat-colorchanger" data-pat-colorchanger="color: blue" style="color: red">
56- This text will turn from red into blue after 3 seconds.
57- </p>
58- ```
66+ <p class="pat-colorchanger" data-pat-colorchanger="color: blue" style="color: red">
67+ This text will turn from red into blue after 3 seconds.
68+ </p>
5969
6070HTML markup as shown above, which illustrates how your pattern functions, should be put
6171inside the ` index.html ` file. This file can then be used by designers and integrators
@@ -144,8 +154,7 @@ Put this code into `./src/pat-colorchanger.js`
144154}));
145155```
146156
147- This pattern can be loaded directly in your browser after a standard Patterns
148- bundle has been loaded.
157+ This pattern can be loaded directly in your browser after a standard Patterns bundle has been loaded.
149158
150159```
151160<html>
0 commit comments