Materials

Defining the "materials" that make up your toolkit

"Material" is a generic term for the individual components/modules/chunks that make up an interface. By default, Fabricator defines a material taxonomy of "component" and "structure", but is flexible and allows you to define your own taxonomy.

Defining your taxonomy

A successful taxonomy takes into account a number of different factors such as established brand terminology, personal preference, the size and scale of the end applications, etc. Here are some sample taxonomies that might work for you:

└── materials
    ├── components
    └── structures

└── materials
    ├── atoms
    ├── molecules
    └── organism

└── materials
    ├── typography
    ├── elements
    └── components

└── materials
    ├── content
    ├── forms
    ├── lists
    └── navigation

Within the src/materials directory, you can define your taxonomy by organizing your materials into sub-directories.

Adding materials

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

To add a material, create a new .html 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
    └── components
        └── lists
            ├── ordered.html
            └── unordered.html

Grouped materials are accessed as a partial using dot notation: {{> lists.ordered}}

Documenting a material

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.

For example:

01-foo.html
02-bar.html

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.html
01.01-bar.html