Folder Structures

Jump to bottom

Mike Mai edited this page May 16, 2019 · 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.feature.twig
- _component.feature.scss
- _component.feature.js
- _component-element.twig
- _component-element.scss
- _component-element.js
- _component-element.feature.twig
- _component-element.feature.scss
- _component-element.feature.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

_patterns/
- 02-components/
  - component-name/
    - 00-component-name-docs.twig
    - 05-component-name.twig
    - schema/
      - 10-component-name--prop1.twig
      - 15-component-name--prop2.twig
    - recipes/
      - 20-component-name--recipe-name.twig
- 04-pages/
  - mockup-name/
    - simple-mockup-page-name.twig
    - complex-mockup-page-name.twig → has variables for passing data
    - complex-mockup-page-name~variation-a.json → passes unique data
    - complex-mockup-page-name~variation-b.json → passes unique data

Refer to Naming Conventions for naming files.

Pacakges

packages/
- build-tools/
- config/
- core/
- ui/
  - assets/ → fonts and svgs
  - icons/
  - fonts/
  - core/
    - bolt-themes
    - bolt-typography
    - etc...
  - components/
    - bolt-button
    - bolt-band
    - etc...
  - patterns/
    - bolt-button-group
    - bolt-chip-group
    - 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