A Component Architecture

Visual representation of a typical component

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

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

|
├─ src
│  ├── components
│      ├── heading
│          ├── heading.scss
│          ├── heading.es6.js
│          ├── heading.json
│          └── heading.twig

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

1. Markup: Markup for a component is written using Twig, Drupal's new templating engine. Naming convention for a component twig template looks like this: heading.twig (where heading is the name of the component).

2. Data: For the purpose of the styleguide, we need dummy or stock data, which is normally provided in .json format. More on the structure of this file later.

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

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

Not every component will need a javascript file.

Next: Exercises