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 and change it to your needs.
Important: Never change files in the Webhaven theme directory itself.
/webhaven
|
|- biome.json
|- bs-config.js
|- build/
|- build.mjs
|- components/
|- composer.json
|- config/
|- favicon.ico
|- logo-mail.png
|- logo.svg
|- node_modules/
|- package-lock.json
|- package.json
|- README.md
|- screenshot.png
|- src/
|- templates/
|- webhaven.breakpoints.yml
|- webhaven.info.yml
|- webhaven.libraries.ymlAbove 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.
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.
bs-config.js This file contains the configuration for BrowserSync. It's used during development to automatically reload the browser when files change.
build/ This directory contains all the generated output (CSS, JavaScript, fonts, etc.) from our theme. It's not advised to edit manually.
build.mjs This is the build script that compiles all theme assets. It uses Sass for CSS, esbuild for JavaScript bundling, and PostCSS with Autoprefixer for vendor prefixes. More on this in the build process documentation.
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 separate documentation page.
composer.json This file defines the PHP dependencies managed by Composer.
config/ This directory contains exportable Drupal configuration that ships with the theme.
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 its 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: SCSS, JavaScript, assets (fonts, images, icons), and theme hooks.
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.