Creating Your Own Theme
After building and installing the project with the Varbase Project template, use the create new Vartheme sub theme command.
Before that have a look at:
Learn more about Bootstrap standard build tools documentation, compile source code, run tests, and more.

Install Needed Tools Command

    1.
    Open a terminal window.
    2.
    Change directory in the terminal to docroot/themes/contrib/vartheme_bs4/scripts in the project.
    3.
    Run the bash ./install-needed-tools.sh
    4.
    Follow with the list of instructions.
1
cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4/scripts
2
bash ./install-needed-tools.sh
Copied!

Install Needed Tools Manually

Recommended doing the installation of needed tools using the bash script command. But if that is not the case. By deciding to manually install custom versions. Please follow with the following steps.

1. Install sed and gawk

Helps with string replace and re-naming files.
1
sudo apt install -y sed gawk;
Copied!

2. Install npm and nodejs

Helps getting more development tools and the Bootstrap and popper packages.
1
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
2
sudo apt update
3
sudo apt install nodejs
4
sudo apt install build-essential
5
6
curl -L https://npmjs.com/install.sh | sudo -E bash -
7
sudo apt update
8
sudo apt install npm
Copied!

3. Install Yarn

1
sudo apt install yarn
Copied!
Install Yarn as a global by npm
1
sudo npm install -g yarn
Copied!

4. Install Gulp

Helps in managing tasks when compiling SASS/SCSS to CSS
1
sudo npm install gulp-cli -g
2
sudo npm install gulp -D
Copied!

Create new Vartheme BS4 Sub Theme

Create with Bash Script

    1.
    Open a terminal to run commands
    2.
    Change directory in the terminal to docroot/themes/contrib/vartheme_bs4/scripts
    3.
    Run the create-new-vartheme-bs4.sh "THEME_NAME". Change the THEME_NAME to the project name or any selected theme name.
1
cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4/scripts
2
bash ./create-new-vartheme-bs4.sh "THEME_NAME"
Copied!

Create with Yarn

1
cd PROJECT_DIR_NAME/docroot/themes/contrib/vartheme_bs4
2
yarn theme:create-sub-theme "THEME_NAME"
Copied!

Example mythem for mysite

If a Varbase site named "mysite" was built using the following command:
1
cd /var/www/html
2
composer create-project Vardot/varbase-project:~9 mysite --no-dev --no-interaction
Copied!
The folder mysite for the project is located at "/var/www/html/mysite"
Change directory to docroot/themes/contrib/vartheme_bs4/scripts
1
cd /var/www/html/mysite/docroot/themes/contrib/vartheme_bs4/scripts
Copied!
Run the following bashcommand to create a custom theme named "mytheme"
1
bash ./create-new-vartheme-bs4.sh "mytheme"
Copied!
The new theme will be located at "/var/www/html/mysite/docroot/themes/custom/mytheme"
When the finishes the following message will show up in the terminal
1
---------------------------------------------------------------------------
2
The new Vartheme BS4 Sub-Theme were created at "/var/www/html/mysite/docroot/themes/custom/mytheme :)"
3
---------------------------------------------------------------------------
Copied!

Activate the New Theme

    Go to Appearance in the administration of the Varbase site.
    Search for the name of the newly generated theme
    Click on Install and set as default.
    Navigate to the home page to check if the new theme is the default theme.

Initiation Commands

First step to do after creating a new theme.
Change directory to the new theme in the terminal then run only gulp without arguments.
Run this command ones after creating a new sub theme
Run it again ones after updating the Bootstrap 4 library with yarn install
1
cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME
2
gulp
3
[10:55:40] Using gulpfile PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME/gulpfile.js
4
[10:55:40] Starting 'default'...
5
[10:55:40] Starting 'compile'...
6
[10:55:42] Finished 'compile' after 2.44 s
7
[10:55:42] Starting 'move_bootstrap_js_files'...
8
[10:55:43] Finished 'move_bootstrap_js_files' after 18 ms
9
[10:55:43] Starting 'move_popper_js_files'...
10
[10:55:43] Finished 'move_popper_js_files' after 3.89 ms
11
[10:55:43] Starting 'watch'...
Copied!
or with Yarn
1
yarn theme:init
Copied!

Compiling SCSS to CSS

    For example change the color value for the primary color in scss/bootstrap-variables.scss file to test compiling SASS files to CSS
Then run gulp compile ones to compile every time the SCSS source changes.
1
cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME
2
gulp compile
3
[11:22:30] Using gulpfile PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME/gulpfile.js
4
[11:22:30] Starting 'compile'...
5
[11:22:33] Finished 'compile' after 2.54 s
Copied!
or with Yarn
1
yarn theme:build
Copied!

Watching SCSS Changes

Increase maximum watched SASS files by
1
echo fs.inotify.max_user_watches=524288
2
| sudo tee -a /etc/sysctl.conf && sudo sysctl -p
Copied!
Run gulp watch to keep watching for changes. This command will auto compile on each save of changes for SCSS files.
1
cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME
2
gulp watch
3
[11:25:53] Using gulpfile PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME/gulpfile.js
4
[11:25:53] Starting 'watch'...
Copied!
or with Yarn
1
yarn theme:watch
Copied!

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 Sub theme.
Run the following commands to get all development tools
1
cd PROJECT_DIR_NAME/docroot/themes/custom/THEME_NAME
2
yarn install
3
gulp
Copied!
Last modified 3mo ago