Pattern Architecture

Visual representation of a typical pattern

It is recommended to group your patterns in folders. This not only provides organization as your catalog of patterns grows, but it also makes each pattern completely reusable and even portable as all the pieces a pattern needs are encapsulated in a single folder.

The structure below is completely optional. Your particular workflow may be different.

|
├─ src
│  ├── components
│      ├── heading
│          ├── heading.css
│          ├── heading.js
│          ├── heading.ui_patterns.yml
│          └── pattern-heading.html.twig

From the front-end point of view, a pattern is broken down in 4 parts:

1. Markup: Markup for a pattern is written using Twig, Drupal's new templating engine. Naming convention for a pattern twig template looks like this: pattern-heading.html.twig (where pattern is a prefix used by the UI_Patterns module, and heading is the name of the pattern).

2. Data: For the purpose of the styleguide, we need dummy or stock data, which is normally provided in .yml format. The yml file allows us to specify the pattern's name, fields and any placeholder content. A typical yml file may be named card.ui_patterns.yml. More on the structure of this file later.

3. Styles: This are written in CSS or Sass.

4. Behavior: The pattern's behaviors are usually handled with JavaScript.

Not every pattern will need a javascript file, but for sure .yml, .twig, and .css/scss.