materials

MATERIALS

Defining the "materials" that make up your toolkit

"Material" is a generic term for the individual component/modules/chuncks that make up an interface. They are your UI components.

Taxonomy

Fabricator Builder expects your taxonomy to comply with Atomic Design, so your materials directory should look like this:

└─ materials
    ├─ atoms
    ├─ molecules
    └─ organisms

Adding materials

A material is an .html or .hbs file that can contain YAML front-matter and handlebars markup.

To add a material, create a new file in the desired directory. The material should show up on the listing page automatically.

Every material is accessible as a handlebars partial using the {{> partial-name}} syntax where partial-name is the name of the file.

Sometimes it is useful to group materials, like instances where you want to show alternate versions. You can group materials by placing them in a subdirectory:

└─ materials
    └─ atoms
        └─ lists
            ├─ ordered.hbs
            └─ unordered.hbs

Only one grouping level is supported, and grouped materials are accessed as a partial using dot notation: {{> lists.ordered}}.

Documenting materials

You can directly associate documentation with a material by adding notes in the front-matter of the file:

---
notes: |
  These are notes written in `markdown`
---

<div class="component">My Component</div>

Notes will appear adjacent to a material on the listing page and can be toggled on/off.

Ordering materials

Sometimes you want to have control over the order in which materials are listed. By default, materials are sorted alphabetically, but you can manually sort materials by prefixing their filename with a number. This also counts for the grouping directories.

For example:

01-foo.hbs
02-bar.hbs

will list as:

Foo
Bar

Number prefixes are ignored in partial keywords, so in the example above, the materials are still accessed as:

{{> foo}}
{{> bar}}

Ordering works with any quantity of dot-delimited number prefixes. You can get pretty granular:

01.00-foo.hbs
01.01-bar.hbs