drupalninja / drupalx_theme
DrupalX Bootstrap, Storybook starter theme.
Installs: 710
Dependents: 1
Suggesters: 0
Security: 0
Stars: 7
Watchers: 4
Forks: 1
Open Issues: 0
Language:CSS
Type:drupal-theme
This package is auto-updated.
Last update: 2024-11-17 23:47:33 UTC
README
The DrupalX theme starter kit is intended to be used with the DrupalX distribution.
This starter kit includes Bootstrap 5, Storybook and full template integration with the DrupalX install profile.
Public Storybook: https://drupalx.netlify.app/
Generating the theme
The following commands will generate the new custom theme using the DrupalX starter as the template:
chmod +x core/scripts/drupal && ddev exec --dir /var/www/html/web core/scripts/drupal generate-theme --starterkit=drupalx_theme nameoftheme
Enable the new theme:
ddev . drush theme:en nameoftheme ddev . drush config-set system.theme default -y nameoftheme ddev . drush cr
Compiling Theme Assets
If you haven't yet, install nvm: https://github.com/creationix/nvm
Use the right version of node with the following:
nvm use
This command will look at your .nvmrc
file and use the
version node.js specified in it. This ensures all developers
use the same version of node for consistency.
If that version of node isn't installed, install it with the following command:
nvm install
Install npm dependencies:
npm install
Build all required theme assets:
npm run build
Compile SASS as files are updated:
npm run watch
Run Storybook:
npm run storybook
Run Cypress tests (requires Storybook running):
npm run cypress
Managing the 'dist' Folder
By default, the .gitignore file does not ignore the dist folder for demonstration purposes. However, in most projects, you will want to ignore this folder.
To do this, you can uncomment the relevant lines in the .gitignore file to ignore the dist folder and its contents. Here are the steps:
Update .gitignore:
- Open the .gitignore file.
- Find the lines related to the dist folder, which are commented out.
- Uncomment these lines to ensure the dist folder is ignored by Git.
Deploying Your Application:
- If you choose to ignore the dist folder, you will need to incorporate an npm build process when you deploy your application. This ensures that the necessary assets are generated and included in your deployment package.