Integrating Pattern Lab with a Drupal Theme
Pattern Lab is an interactive, responsive style guide organized around "Atomic Design" principles.
What is Pattern Lab?
Pattern Lab is an interactive, responsive style guide organized around "Atomic Design" principles. This is a very simplified description of the tool; if you're interested in learning more about Pattern Lab in general, the Resources section of the official site is worthy of your attention, and Forum One's Daniel Ferro and Dan Mouyard did a great presentation at DrupalCon 2015.
Pattern Lab at Forum One
There were a lot of unknowns when we first started using Pattern Lab on our projects. One of the big ones: "Where should the files live?"
Every project organized things differently, but we eventually reached a consensus that Pattern Lab should live within the theme directory. As is often the case with ever-evolving processes, older projects had to be retrofitted.
Our retrofit had three goals:
- Move Pattern Lab into the Drupal theme directory.
- Remove (or keep) build artifacts out of the code repository.
Goal One: Move Pattern Lab into the Drupal Theme
Using the Gesso Drupal theme and Gesso Pattern Lab as an example (your paths will vary):
cd to theme directory
Move Pattern Lab into the Gesso theme directory (fellow OCD devs: Pattern Lab is 2 words, so the machine name is pattern-lab)
mv ../../../../../pattern-lab pattern-lab/
Remove the .gitignore file from Pattern Lab
rm -rf pattern-lab/.gitignore
Goal Two: Single Source of Assets
Move theme assets from Pattern Lab to Gesso theme (or vice versa, depending which assets are being favored)
mv pattern-lab/images images/ mv pattern-lab/js js/ mv pattern-lab/polyfills polyfills/ mv pattern-lab/sass sass/
Update Pattern Lab's _00-head.mustache file to point to Gesso theme's resources
Goal Three: Remove Build Artifacts from the Code Repository
We've had a continuous integration system set up for a while. Since our hands were already dirty with the reorganization, we threw in a couple more tweaks so Jenkins would generate our CSS and public Pattern Lab site using a couple Grunt tasks. More automation and a cleaner code repo — who doesn't want that?
Remove build artifacts from Gesso and Pattern Lab. For us this meant compiled CSS and Pattern Lab's public directory:
cd public/sites/all/themes/gesso rm -rf css rm -rf pattern-lab/public rm -rf pattern-lab/source/css
Add build artifacts and other Pattern Lab files to Gesso theme's .gitignore
/pattern-lab/*-ck.js /pattern-lab/public css/*
Optional: Grunt tasks for continuous integration
grunt.registerTask(‘buildStyles’, [ ‘compass:’ + stage, ]); grunt.registerTask(‘buildPatternlab’, [ ‘copy:patternlabStyleguide’, ‘shell:patternlab’ ]);
If you do the third step, it's helpful to remind other people working on the project that they'll have to recompile the CSS after pulling down the changes.
Now we have Pattern Lab nicely integrated within our Drupal theme;— a single source for all theme-related assets and our commits are much cleaner with build artifacts removed from the repo.