2. Folder setup

Understanding the pattern library's folder structure will help you in understanding how blocks are built, and exported.

A simplified folder structure looks like this:

pattern-library
  + .tmp
  + assets
  + blocks
  + config
  + crate
  + export
  + icons
  + lib
  + wwwroot

(Please note: We've omitted the .git, docs and node_modules here for simplicity)

Let's go through each folder in turn and discuss what it does.

/.tmp

This contains the pre-rendered blocks for use within the pattern library, ie. compiled xsl and xml files.

/assets

This contains all the assets that the pattern library needs in order to display the blocks. These are already present within Firefly itself. These files are not exported to Firefly.

/blocks

The file structure is based on the BEM (Block Element Modifier) convention. A directory contains all the patterns(blocks) used within the site, each within their own folder. Inside this folder live all the files relevant to that pattern, such as .html/.xslt/.xml, .less, .js, and any metadata.

+-- blocks/    
    +-- pattern_name/
        +-- pattern_name.html
        +-- pattern_name.js
        +-- pattern_name.less

/config

This folder contains all the configuration file for the pattern library.

/crate

The scaffold files for the pattern library itself.

/export

Where all block and supporting files are generated when using the gulp export command. This location configurable in your /config/options.local.js file.

/icons

Where all the icon files live.

/lib

Local node modules required for the pattern library.

/wwwroot

Where the pattern library preview site is exported to. Accessible on http://localhost:3000.