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

This is where all the blocks live. The main block definitions live inside core. Each theme folder has an override less file for each block.

blocks
  + angular
  + core
  + melody
  + (etc)

/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.