Folder Structures

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

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