Creating Your Own Theme
Last updated
Last updated
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:
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
Utilize the command provided in the following link to automatically configure all necessary Node.js or theme processing requirements:
Please refer to the following link for a comprehensive set of instructions or an external resource to guide you through the setup process:
To generate a new theme from Vartheme BS5 using the starterkit/theme-generation
script, run the following from Drupal's installation root:
Run the following Drupal Generate Theme script:
Additionally, you can create the theme's human-readable name and it description with two optional arguments:
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.
Add replaces:
to all copied Varbase Components within all .component.yml
files.
Follow up with the following link
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.
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.
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
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.
With webpack, project can compile may type of files and integrate with more nodejs processing tools.
Use the following alias script command to compile all SCSS, JS, or SVG icons.
In case of working on a custom SDC component, an alias script command can help with the.
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:
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.
Use to only while working to auto compile custom theme styling
theme:watch
is targeted for the theme only, but it can be customized in custom theme
Should you encounter a bug while generating a new theme, please create a new issue
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.
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