Folder Structures

Jump to bottom

Mike Mai edited this page Dec 4, 2018 · 17 revisions

Individual Component

__tests__/
- __snapshots__/ → jest snapshots
  - component.test.js → jest tests
  - component.nightwatch.js → nightwatch tests
src/
- _component-name-something.js
- _component-name-something.twig
- _component-name.mixins.scss
- _component-name-something.scss
- component-name.twig
- component-name.scss
- component-name.js
assets/ → if needed
index.js → polyfill, export namespaces, etc.
index.scss → points to src folder’s main .scss
component-name.schema.yml
package.json
README.md

Pattern Lab Component

_patterns/
- 02-components/
  - component-name/
    - 00-component-name-docs.twig
    - 05-component-name.twig
    - schema/
      - 10-component-name--themes.twig
      - 15-component-name--sizes.twig
    - recipes/
      - 20-component-name--with-background-video.twig
- 04-pages/
  - mockup-name/
    - simple-mockup-page-name.twig
    - complex-mockup-page-name.twig
    - complex-mockup-page-name~variation-a.json → uses the markup from complex-mockup-page-name.twig
    - complex-mockup-page-name~variation-b.json

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