Let’s take an example: the status messages component:

status-messages
dist
svg Created with Sketch.
smile.svg
css3-full Created with Sketch.
status-messages.css
js-badge Created with Sketch.
status-messages.js
YAML Created with Sketch.
libraries.yml
svg Created with Sketch.
smile.svg
Twig Created with Sketch.
status-messages.html.twig
js-badge Created with Sketch.
status-messages.js
sass Created with Sketch.
status-messages.scss

The main structure to notice is the dist folder. The files inside the dist folder will always be compiled by Gulp. The rest of the files are in the root of the component-folder.

The .scss files and .js files will be compiled in to CSS and JS in the dist folder with the same name.

Any images will be optimised, and SVG's are minified. The optimised files will always be inside the dist-folder.

libraries.yml and .html.twig files don't need compiling, so those won’t appear in the dist folder.

When working, you won’t need to open up the dist folders of each component, as it’s contents are auto-generated.

Next, let’s see what binds a component together!