IDEAS | BLOG

Integrating Pattern Lab with a Drupal Theme

Pattern Lab is an interactive, responsive style guide organized around "Atomic Design" principles.

PatternLab

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:

  1. Move Pattern Lab into the Drupal theme directory.
  2. Have a single source of assets (Sass partials, images, JavaScript, fonts).
  3. 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

cd sites/all/themes/gesso

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

<script src="../../drupal/misc/jquery.js?v=1.4.4"></script>

becomes

<script src="../../../../drupal/misc/jquery.js?v=1.4.4"></script>

mustache

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.

remove artifacts

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.