This article describes how to create pattern HTML files for modules.
To use an existing pattern in a module, you must convert the pattern to the new HTML format and path alias described below.
Use the Module Pattern Format
To make working with patterns easier, modules support a new pattern format.
Currently, Habitat authors cannot edit patterns originating from modules in the Add Pattern panel.
Each pattern is a separate HTML file contained within a module’s pattern directory.
- The pattern has a single parent element at its top level.
- The pattern’s file path, relative to
assets/modules, is used as the pattern ID. - The pattern’s label is derived from the file’s
<title>tag. - The pattern’s category comes from a
<meta>tag in<head>, where thenameattribute iscategoryand thecontentattribute is the category name. - The pattern’s icon is linked using a
<link>tag where therelattribute isicon. - The content of the
<body>tag is the pattern snippet. The pattern snippet must be contained in a single child element of the<body>tag. - URLs are interpreted relative to the pattern file. To access content in the
<assets>directory, use a path alias described in the section below.
For example, consider the following old pattern snippet:
Converting this pattern to the new pattern format results in this HTML file:
Use a Path Alias
Patterns in modules are parsed differently from regular patterns. To make it easy to reference other files in the module, Habitat interprets image and widget URLs relative to
the patterns directory.
To access files outside the module’s directory, we recommend using a path alias. Currently, Habitat supports only the following path aliases:
| Path Alias | Points to |
|---|---|
{assets} | The project’s assets folder. |
For example, consider the following part of a pattern:
When a Habitat author drops this pattern into s9ml/chapter01/page.html, Habitat converts this part of the pattern to the following: