How to work with Pattern Lab & CodeKit?


Well, if you got here you must know something either about CodeKit, Pattern Lab or Atomic Design. Assuming this, I will jump ahead and describe my setup for working with both of these tools.

The problem

I like how CodeKit processes SCSS files and how Pattern Lab keeps everything in order. But if I used CodeKit’s SCSS processors and Pattern Lab’s scripts for compiling and refreshing, I didn’t like multiple page refreshes and what sound my mac’s fans made. The problem was that both of the tools started processing code and refreshing the browser if something was saved on in the project folder. I looked around and found several hints how both of these tools could be used together, but still had running CodeKit and shell script in Terminal.

The solution

The way to keep everything in CodeKit is quite easy and depends on its Hooks.

Put the Pattern Lab’s folder to CodeKit as a new project
Right-click on all the folders except “source” and chose “Skip this folder”. This will ensure that CodeKit will refresh only once per file save.
General settings: Add “mustache, json” into Generic Page Extensions field. This is for letting CodeKit know that it has to run its processors.
Browser refreshing: Put Refresh Delay to “0.5" seconds to give Pattern Lab some time for compiling the page. Document-Root Subpath has to be “/public” and CodeKit’s server will show processed page.
I will leave all the SASS and other language specific settings for you. Only thing worth mentioning is to put the processed CSS file to the same folder as the source file is. I can’t count how much time I have wasted before fixing that “bug”.
Hooks: Create new hook and make sure that the full path of the processed file contains “source”. Run the code as Shell Script.

The script for the hook has to point to your project’s builder.php in core folder and have a flag “-g” for generating site and cleaning up public folder.

#!/bin/sh
php “/Users/eskolehtme/Documents/project/core/builder.php” -g

This is how my work with CodeKit and Pattern Lab is easier. I only have to open the project in CodeKit and start working.