Contrib.social

Allow starterkit theme generator tool to clone Vartheme BS5

Open on Drupal.org →
Created on 1 October 2022, about 2 years ago
Updated 10 June 2023, over 1 year ago

Problem/Motivation

Vartheme BS4 provides a shell script to generate a sub-theme. Radix provides a Drush command and a kit. Currently, there's no documentation, script, or Drush command for creating a Vartheme BS5 sub-theme.

Proposed resolution

Remaining tasks

  • ✅ File an issue about this project
  • ✅ Addition/Change/Update/Fix to this project
  • ✅ Testing to ensure no regression
  • ➖ Automated unit/functional testing coverage
  • ✅ Developer Documentation support on feature change/addition
  • ➖ User Guide Documentation support on feature change/addition
  • ✅ Accessibility and Readability
  • ✅ Code review from 1 Varbase core team member
  • ✅ Full testing and approval
  • ✅ Credit contributors
  • ✅ Review with the product owner
  • ✅ Update Release Notes and Update Helper on new feature change/addition
  • ✅ Release Varbase 10.0.0-alpha2 → , vartheme_bs5-3.0.0-alpha3 →

Varbase update type

  • ✅ No Update
  • ➖ Optional Update
  • ➖ Forced Update
  • ➖ Forced Update if Unchanged

User interface changes

  • N/A

API changes

  • N/A

Data model changes

  • N/A

Release notes snippet

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

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
  --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.

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.
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.

yarn install # Install the dependencies

yarn theme:init # Initialize the theme once

yarn theme:full-build # Compile SASS once

yarn theme:watch # Compile SASS per save
✨ Feature request
Status

Fixed

Version

3.0

Component

Code

Created by

🇺🇸United States jcandan

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024