Theming with DrupalX
Last updated
Last updated
DrupalX employs the Drupal "" approach to theming, which is detailed on Drupal.org.
Instead of using the DrupalX theme as a base theme, it is intended to be used as a starter theme. Detailed instructions on this approach are available in the .
After creating and enabling your theme, you can begin customizing it to suit your needs.
All DrupalX components are organized within the components directory using Drupal's approach. To compile SASS for a component run npm run watch:components to compile that folder's .scss file into .css.
To compile your SDC components *.component.yml files automatically from your component's storybook file, run the npm run watch:stories command.
DrupalX integrates components with using to render Twig templates using JavaScript instead of PHP. You can view the official DrupalX storybook at .
To launch your local Storybook, run the following command from the root directory of your theme:
The DrupalX theme starter leverages the to make frontend development for Drupal faster, easier and leaner.
The global.css located at ./src/css/globals.css provides the base CSS styling and tailwind.config.ts provides the base Tailwind configuration for the theme.
DrupalX uses integration templates to pass Drupal content from entities (e.g. paragraphs) to Storybook components. This approach keeps Storybook components agnostic to Drupal, focusing on Tailwind best practices.
The package.json file for the DrupalX theme includes several commands for tasks like compilation and linting. These commands can be customized for any project.
Read the DrupalX project readme for more details on what scripts are available to run from package.json.
