Folder Structures

Jump to bottom

Mike Mai edited this page Jan 7, 2022 · 17 revisions

Individual Component

__tests__/
- __snapshots__/ → jest snapshots
  - component.test.js → jest tests
  - component.nightwatch.js → nightwatch tests
- __fixture__/ → media used in tests
- component.js
src/
- _component-setting-and-tools.scss
- _component-sub-template.twig
- _component-sub-template.scss
- _component-sub-template.js
- _component-outside-library.js
- _component-outside-library.scss
- component.twig
- component.scss
- component.js
assets/ → if needed
index.js → polyfill, export namespaces, etc.
index.scss → points to src folder’s main .scss
component.schema.yml
package.json
README.md
CHANGELOG.md
TESTING.md

Pattern Lab

The word docs is reserved for the initial doc page, do not use it to name any other pages or it will not show up in the navigation.

_patterns/
- 10-visual-styles/
- 20-elements/
  - element-name/
    - 00-element-name-docs.twig
    - 05-element-name.twig
    - 10-element-name-prop1.twig
    - 15-element-name-prop2.twig
    - 20-element-name-use-case-*.twig
- 30-layouts/
  - layout-name/
    - 00-layout-name-docs.twig
    - 05-layout-name.twig
    - 10-layout-name-prop1.twig
    - 15-layout-name-prop2.twig
    - 20-layout-name-use-case-*.twig
- 40-components/
  - component-name/
    - 00-component-name-docs.twig
    - 05-component-name.twig
    - 10-component-name-prop1.twig
    - 15-component-name-prop2.twig
    - 20-component-name-use-case-*.twig
- 50-pages/
  - mockup-name/
    - mockup-name-simple-page-name.twig
    - mockup-name-complex-page-name.twig → has variables for passing data
    - mockup-name-complex-page-name~variation-a.json → passes unique data
    - mockup-name-complex-page-name~variation-b.json → passes unique data
- 60-experiments/ → all the bad apples
- 999-tests/ → hidden from nav, for VRT tests only

To avoid collision, all pages should be prefixed with component name or mockup name. Also refer to Component Folder File Naming.

Pacakges

packages/
- build-tools/
- config/
- ui/
  - core/
    - bolt-settings
    - bolt-tools
  - global/
    - bolt-vars
    - bolt-utils
    - bolt-generic
    - etc...
  - components/
    - bolt-accordion
    - bolt-popover
    - etc...
  - elements/
    - bolt-button
    - bolt-text-link
    - etc...
  - layouts/
    - bolt-holy-grail
    - bolt-layout
    - etc...

Others

examples/
- using-react/
- using-pattern-lab/
- using-drupal/
- using-static-site/
website/
- src/
  - content/
  - templates/
  - pages/
  - utils/
  - assets/
  - .boltrc
  - package.json
  - composer.json