Using CodeKit 3 with PatternLab 2

This is an updated version of how to work with CodeKit 3 and PatternLab 2.

Both of the platforms have been rebuilt and gained a lot of speed compared to the previous versions. And setup is different from previous versions.

I like to control how the final CSS is generated. Also, I prefer to have as few dependencies as possible and having CodeKit as debugger, code processor and server is really convenient and saves time and cognitive resources.

With now further introduction, here’s how to get them working.

Download and set up PatternLab’s environment. I use PatternLab’s PHP Mustache edition for development. I used Composer for creating the new project.

Update PatternLab’s settings by opening /Project/config/config.yml and setting cacheBusterOn: ‘false’ for keeping processing fast and also update only relevant public HTML-files. This is especially important if you are using version control.

/Project/config/config.yml

Drag PatternLab’s folder to CodeKit as a new project.

Update CodeKit’s project settings

• Fist skip all the files except Source

• Browser refreshing set Document-Root Subpath to /public

• Set up Hooks. Create new Hook, for convenience name it „patternlab.io“.
  Set script to be run when a file is processed and Path From Project Root Contains source and paste following into the script area:
  php core/console — generate — patternsonly

• Set up Build process that is mainly for backup, usually, Hooks keep everything running smoothly. The order of the steps is important.
  Firstly add „Process Files“ step and select source/css/style.scss.
  Secondly add „Run Script“ step and paste following into the script area:
  php core/console — generate — patternsonly

And that’s it. Happy coding.