A starter kit for using the prototyping tool, Pattern Lab, in tandem with a Drupal theme. Utilizes Webpack for all asset management.
Update Drupal theme and modules:
Update twig to pass Octane linting
Lint fixes.
npm run new
The major feature of this release is the removal of Sass + Bootstrap in favor of PostCSS and Tailwind. PostCSS has always been a part of Particle to provide autoprefixing and other CSS mutations, but now it's the sole source of CSS generation! Tailwind is a very powerful and simple token-based approach to styling that serves the needs of design systems and component based design.
Tailwind has also been configured to purge generated class names that are not used within the _patterns
subdirectories. This results in a smaller CSS output for production without slowing down the development process. Configuration for Tailwind is located at /source/default/tailwind.config.js
/apps/drupal/
has been renamed to /apps/drupal-default
and now contains a particle_helper
and particle_theme
directory. They contain files that will need to be move to your Drupal modules and theme directories depending on the type of Drupal installation utilized. Additional documentation and steps have been added to /apps/drupal-default/README.md
SVGO has been added to the project directly with an initial configuration at /.svgo.yml
. A new fmt:svg
script has been added that will format svgs within the https://gitlab.com/phase2tech/mastercard/mastercard-design/-/tree/master/source/default/_patterns/01-atoms/svg/icons
directory. This script is also included within the fmt
script.