Pseudo-patterns give developers and designers the ability to quickly build multiple unique variants of an existing pattern. This feature is especially useful when developing template- and page-style patterns or showing the states of other patterns.

The Pseudo-Pattern File Naming Convention

Pseudo-patterns are similar to pattern-specific JSON files but are hinted in such a way that a developer can build a variant of an existing pattern. The basic syntax:


The tilde (~) and .json file extension are the hints that Pattern Lab uses to determine that this is a pseudo-pattern. The patternName tells Pattern Lab which existing pattern it should use when rendering the pseudo-pattern. The JSON file itself works exactly like the pattern-specific JSON file. It has the added benefit that the pseudo-pattern will also inherit any values from the existing pattern’s pattern-specific JSON file.

From a navigation and naming perspective patternName and pseudoPatternName will be combined.

Adding Pseudo-Patterns to Your Project

Adding a pseudo-pattern is as simple as naming it correctly and following the pattern-specific JSON file instructions for organizing its content. Let’s look at a simple example where we want to show an emergency notification on our homepage Mustache template. Our 03-templates/ directory might look like this:


Our homepage.mustache template might look like this:

<div id="main-container">
    {{# emergency }}
        <div class="emergency">Oh Noes! Emergency!</div>
    {{/ emergency }}
    { ...a bunch of other content... }

If our _data.json file doesn’t give a value for emergency that section will never show up when homepage.mustache is rendered. Obviously we’d need to show both the regular and emergency states of the homepage but we don’t want to duplicate the entire homepage.mustache template. That would be a maintenance nightmare. So let’s add our pseudo-pattern:


In our pseudo-pattern, 00-homepage~emergency.json, we add our emergency attribute:

    "emergency": true

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.

Using Pseudo-Patterns as Pattern Includes

By default, pseudo-patterns cannot be used as pattern includes. The data included in the pseudo-pattern, the bit that actually controls the magic, cannot be accessed when rendering the pattern include.

To utilize pseudo-patterns as pattern includes for the PHP version of Pattern Lab you can install the Data Inheritance Plugin.