Fepper Documentation

Pattern Organization

Patterns are organized in a nested folder structure under source/_patterns/

[patternType]/[patternSubtype]/[patternName].[patternExtension]

These are the parts:

• patternType - the most general of pattern categories. The default pattern types "elements", "compounds", and "components" can be renamed or even removed without further configuration.
• patternSubType - more specific pattern categories. Pattern subtypes are optional.
• patternName - the name of a pattern as written to the file system.
• patternExtension - the file extension of a pattern.

For display in the UI menu, hyphens (-) in your pattern types, pattern subtypes, and pattern names will be replaced with spaces, and first letters of words will be capitalized. For example, if you want a pattern to be displayed in the menu as "Hamburger Navigation", you should name it hamburger-navigation.mustache. Numeric prefixes will also be stripped, so you can also name it 00-hamburger-navigation.mustache if you want it listed before pattern names that start with a letter. It will still appear in the menu as "Hamburger Navigation".

Deeper Nesting

Fepper allows for even deeper nesting of folders. For example:

- compounds/
  - blocks/
    - media-blocks/
      - image-block.mustache
      - video-block.mustache

In this example, media-blocks will act as the pattern subtype when it comes to navigation in the UI. The shorthand partial name for image-block.mustache will be compounds-image-block.