Theme structure

Directories & files structure

Get to know each directory and the files so you have a deeper understanding on how the theme works and how you can build on top of it change it to your needs.

Important: Never change files in the Webhaven theme directory itself.

/Webhaven
|
|- biome.json
|- build/
|- Commands/
|- components
|- drush.services.yml
|- favicon.ico
|- includes/
|- logo-mail.png
|- logo.svg
|- mix-manifest.json
|- node_modules/
|- package-lock.json
|- package.json
|- REAMDE.md
|- screenshot.png
|- src/
|- starterkits/
|- templates/
|- webhaven.breakpoints.yml
|- webhaven.info.yml
|- webhaven.libraries.yml
|- webhaven.png
|- webhaven.theme
|- webpack.mix.js

Above you see the structure of the Webhaven Drupal theme. 

If you want to learn about Drupal theming I advice you to read the Drupal documentation.

This is something I would like to cover in the Webhaven Academy in the future.

Webhaven specific files

biome.json This file has the configuration for BiomeJS, it's a fast formatter that takes care of the formatting and linting.

build/ This directory contains all the generated output (CSS, javascript, fonts, etc.) from our theme. It's not advised to edit manually.

Commands/ This directory contains the code that we use to automatically create a subtheme based on the starterkit theme.

components/ This directory contains all the components that are used in the Webhaven theme. I'll cover the details on how to copy and alter components on a seperate documentation page.

drush.services.yml This file is used to define our custom command for Drush (the command-line tool for Drupal) to automatically create a subthemed based on the starterkit theme.

includes/ This directory contains additional theme files that are automatically loaded in the webhaven.theme. We use this structure to keep things organised instead of having a (very) large and long webhaven.theme file.

mix.manifest.json This file is generated by Laravel Mix. It's not advised to edit manually.

node_modules/ This directory contains all the packages that are installed for asset compilation and the Webhaven theming workflows. It's not advised to touch it contents.

package-lock.json This file is generated to lock exact dependency versions for consistent builds. It's not advised to edit manually.

package.json This file defines the Node.js dependencies and scripts used for compiling assets and managing the Webhaven theme’s build process.

src/ This directory contains all the source files that are compiled and used by the theme.

starterkits/ This directory contains the skeleton that is used to create a subtheme automatically.

templates/ This directory contains the twig template files that Drupal uses. These templates load the appropriate component that can be found in the components directory.

webhaven.breakpoints.yml This file has all the breakpoints that can be used by the Drupal breakpoints system. This file is only used for Drupal configuration purposes a good example is when you want to work with responsive images in the Drupal configuration.

webhaven.info.yml This file has all our Drupal theme metadata like name, description, etc. It also tells Drupal what libraries to load automatically.

webhaven.libraries.yml This file describes the Drupal libraries (CSS and JS files) that we use in our theme. This file only holds what needs to be loaded on every page load. All other files are loaded dynamically since we use SDC (Single Directory components) to handle that.

webhaven.theme This file normally holds all the Drupal theme specific hooks, we load in all our files that are in the includes/ directory here to keep things organised.

webpack.mix.js This file has the configuration for Webpack (Laravel Mix), it tells us how to compile everything and also adds BrowserSync but more on that later.