Creating Your Own Theme

After building and installing the project with the Varbase Project template, use the Drupal Generate Theme using the Vartheme starterkit command.

Before that have a look at:

Understanding The Vartheme Starterkit Theme

Learn more about Bootstrap standard build tools documentation, compile source code, run tests, and more.

https://getbootstrap.com/docs/5.3/getting-started/contribute/#tooling-setup

Install Needed Tools Command

Utilize the command provided in the following link to automatically configure all necessary Node.js or theme processing requirements:

Command to Install Needed Theming Tools

Install Needed Tools Manually

Please refer to the following link for a comprehensive set of instructions or an external resource to guide you through the setup process:

Manually Install Needed Theming Tools

Create new Vartheme BS5 Cloned Generated Theme

How to use the Vartheme BS5 Starterkit

To generate a new theme from Vartheme BS5 using the starterkit/theme-generation script, run the following from Drupal's installation root:

cd PROJECT_DIR_NAME/docroot

Run the following Drupal Generate Theme script:

php core/scripts/drupal generate-theme new_theme_name --starterkit vartheme_bs5 --path themes/custom

Additionally, you can create the theme's human-readable name and it description with two optional arguments:

php core/scripts/drupal generate-theme new_theme_name \
  --starterkit vartheme_bs5 \
  --path themes/custom \
  --name "New Theme Name" \
  --description "Custom theme generated from Vartheme BS5 theme" 

This script will copy over all the files from the Vartheme BS5 theme, and replace instances of Vartheme BS5's machine name and label with the strings you provide.

After Installing the New Custom Theme

Uninstall Vartheme BS5 after creating a new theme

At this point the new generated theme will not need the Vartheme BS5 to be installed.

Copy All Varbase Components to the New Custom Theme

cd PATH_TO_THE_PROJECT/docroot
cp -r modules/contrib/varbase_components/components themes/custom/PROJECT_THEME/components

Add replaces: to all copied Varbase Components within all .component.yml files.

Follow up with the following link

Customize a Varbase Single Directory Components (SDC) In a Custom Theme

Customizing CSS

The new theme should look and function identically to Vartheme BS5 out of the box, but the styles could be changed to suit the project's needs. Vartheme BS5's styles are written using Bootstrap 5, SASS, PostCSS, which is installed and configured Varbase, and allows CSS authors to write modern CSS while still supporting browsers that have not fully implemented the newest methodologies.

Customizing Bootstrap's JavaScripts

• Issue #3423178: Moved all Bootstrap ~5.3.0 JavaScript libraries to Single Directory Components (SDC) in Varbase Components

• Issue #3423174: Added Bootstrap ~5.3.0 JavaScript libraries in Varbase Components and only attache them with needed SDC components

As part of the generate-theme command, the necessary package.json dependencies and scripts files are copied over for the project. Simply install the dependencies and then run yarn theme:init once, and then either the yarn theme:full-build command to compile the assets once or the yarn theme:watch command to re-compile the assets every time a .scss file is changed.

Install the Dependencies for Needed Packages

yarn install

Recommended to use Yarn, Please do not use npm install

you may run into issue while installing

the list of packages in the package.json was optimized for better use with Yarn

Install Needed YARN and Webpack Tools

Initialize the Theme Once

yarn theme:init

Ensure that you perform this step immediately after generating and installing packages, or after updating Bootstrap, Font Awesome, or any other necessary extensions.

The theme:init script alias will trigger the execution of webpack --progress --config webpack.config.init.js. This command is responsible for copying the specified files and folders from the webpack.config.init.js configuration file to their respective locations.

Additionally, any additional external libraries from the node_modules folder can be managed by copying them to a designated target libraries folder.

It is essential to include comprehensive "install once" or "configure once" options that can be utilized by new development team members when they join the project for custom theme development or theming. This approach ensures a smooth onboarding process and facilitates seamless setup for new team members.

Compile Once

With webpack, project can compile may type of files and integrate with more nodejs processing tools.

Compile all

Use the following alias script command to compile all SCSS, JS, or SVG icons.

yarn theme:full-build

Compile SDC Components Only

In case of working on a custom SDC component, an alias script command can help with the.

yarn components:build

The components:build script alias will trigger the execution of webpack --progress --config webpack.config.components.js. This command is responsible only for compiling custom SDC components in the them. The webpack.config.components.js file has the list of entry, and output for compiled css/js/svg script to the right public path.

Have a look at the following link for more info:

Customize a Varbase Single Directory Components (SDC) In a Custom Theme

Compile Custom Theme Styling Only

In case of working on small custom theme styling, which no need to compile components. The following alias script command can help compile in a quick way.

yarn theme:build

Watching and Syncing

Use to only while working to auto compile custom theme styling

yarn theme:watch

theme:watch is targeted for the theme only, but it can be customized in custom theme

Reporting Starterkit Bugs

Should you encounter a bug while generating a new theme, please create a new issue

Additional Information

Starterkit is for generating new themes that include reasonably un-opinionated templates and styles that eliminate much of the the initial work required to create a theme.

Starterkit is the recommended approach for creating new themes. For more information, consult the Starterkit documentation on Drupal.org.

Cloning a Project

On the state of working in a team in a project, the created theme could be don by other member of the team.

When the theme get committed by git for example, the node_modules folder will not be committed. As it is listed in the .gitignore file.

After cloning a project with a Vartheme cloned generated theme.

Run the following commands to get all development tools

cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME
yarn install
yarn theme:init
yarn theme:full-build