Pseudo-Patterns

Pseudo-patterns give the ability to quickly build multiple variants of an existing pattern.

The Pseudo-Pattern File Naming Convention

[patternName]~[variantName].json

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

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. Our templates directory might look like this:

article.mustache
blog.mustache
homepage.mustache

Our homepage.mustache template might look like this:

<div id="main-container">
  {{# emergency }}
    <div class="emergency">Emergency!</div>
  {{/ emergency }}
</div>

If there is no JSON data file giving a value for emergency, that section will never show when homepage.mustache gets rendered. We want to show both the regular and emergency states of the homepage, but we don't want to duplicate the entire homepage.mustache template. Duplicate changes nearly always get forgotten in future maintenance. So let's DRY (Don't Repeat Yourself) things up and add our pseudo-pattern:

article.mustache
blog.mustache
homepage.mustache
homepage~emergency.json

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

{
  "emergency": true
}

Now when we build Fepper, we'll have our homepage template rendered twice: once as the regular pattern, and once as a pseudo-pattern showing the emergency section. Note that the pseudo-pattern will show up in the UI menu as "Homepage Emergency".

Using Pseudo-Patterns as Included Partials

Pseudo-patterns cannot be used as included partials. They are just logical extensions of variant JSON data, not actual patterns.

Pseudo-Pattern Markdown Content

Pseudo-patterns can, however, have their content coded in Markdown. Check the documentation on Markdown content to learn more.