Skip to content

File Paths and Names

Aleksi Peebles edited this page Mar 14, 2022 · 2 revisions

All component file paths follow this structure:

[basePath]/components/[componentType]/[componentSubtype]/[componentName]/[componentFile]

[basePath]

In the component library all component files have the same base path: ./source. This means that all files related to a specific component are in the same folder.

In VuFind the base path is file type specific: ./themes/finna2/js, ./themes/finna2/less and ./themes/finna2/templates. VuFind does not have base paths for component documentation files or data files.

[componentType]

One of atoms, molecules, organisms, templates or pages. See Atomic Design for more information on how to classify components.

[componentSubtype]

Subtypes are used to group similar components together.

Examples: buttons, navigation.

[componentName]

All components should have a reasonably short lower-case machine name that can be used as a HTML id or class name. Different parts of the name should be separated using dashes (kebab-case). For Finna components the first part must always be finna.

Example: finna-panel.

[componentFile]

Component file names should normally consist of the component machine name and the file type specific extension.

Examples: finna-panel.phtml, finna-panel.less, finna-panel.js, finna-panel.md, finna-panel.json.