Skip to content
This repository was archived by the owner on Dec 10, 2019. It is now read-only.

Commit 727cb79

Browse files
committed
Pseudopattern documentation. I really dont like including this here while not having a solution for patternlab.io documentation. may need to focus on that more.
1 parent bbeb32c commit 727cb79

File tree

1 file changed

+49
-0
lines changed

1 file changed

+49
-0
lines changed

README.md

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,55 @@ Pattern states should be lowercase and use hyphens where spaces are present.
7373
}
7474
```
7575

76+
##### Pseudo-Patterns
77+
Pseudo-patterns are meant to give developers the ability to build multiple and unique **rendered** patterns off of one base pattern and its mark-up while giving them control over the data that is injected into the base pattern. This feature is especially useful when developing template- and page-style patterns.
78+
79+
Pseudo-patterns are, essentially, the pattern-specific JSON files that would accompany a pattern. Rather than require a Mustache pattern, though, pseudo-patterns are hinted so a developer can reference a shared pattern. The basic syntax:
80+
81+
`patternName~pseudoPatternName.json`
82+
83+
The tilde, `~`, and JSON extension denotes that this is a pseudo-pattern. `patternName` is the parent pattern that will be used when rendering the pseudo-pattern. `patternName` and `pseudoPatternName` are combined when adding the pseudo-pattern to the navigation.
84+
85+
The JSON file itself works exactly like the [pattern-specific JSON file](http://patternlab.io/docs/data-pattern-specific.html). It has the added benefit that the pseudo-pattern will also import any values from the parent pattern's pattern-specific JSON file. Here is an example (which ships with the package) where we want to show an emergency notification on our homepage template. Our `03-templates/` directory looks like this:
86+
87+
```
88+
00-homepage.mustache
89+
01-blog.mustache
90+
02-article.mustache
91+
```
92+
93+
Our `00-homepage.mustache` template might look like this:
94+
95+
```
96+
<div id="main-container">
97+
{{# emergency }}
98+
<div class="emergency">Oh Noes! Emergency!</div>
99+
{{/ emergency }}
100+
{ ...a bunch of other content... }
101+
</div>
102+
```
103+
104+
If our `_data.json` file doesn't give a value for `emergency` that section will never show up when `00-homepage.mustache` is rendered.
105+
106+
We want to show both the regular and emergency states of the homepage but we don't want to duplicate the entire `00-homepage.mustache` template. That would be a maintenance nightmare. So let's add our pseudo-pattern:
107+
108+
```
109+
00-homepage.mustache
110+
00-homepage~emergency.json
111+
01-blog.mustache
112+
02-article.mustache
113+
```
114+
115+
In our pseudo-pattern, `00-homepage~emergency.json`, we add our `emergency` attribute:
116+
117+
```
118+
{
119+
"emergency": true
120+
}
121+
```
122+
123+
Now when we generate our site we'll have our homepage template rendered twice. Once as the regular template and once as a pseudo-pattern showing the emergency section. Note that the pseudo-pattern will show up in our navigation as `Homepage Emergency`.
124+
76125
##### Pattern Linking
77126
You can build patterns that link to one another to help simulate using a real website. This is especially useful when working with the Pages and Templates pattern types. The basic format is:
78127

0 commit comments

Comments
 (0)