Using CodeKit 3 with PatternLab 2

web css framework

This is an updated version of how to work with CodeKit 3 and PatternLab 2. Both of the platforms have been rebuilt and gained much speed compared to the previous versions. Also, 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 a debugger, code processor and server is convenient and saves time and cognitive resources.

With no 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 the 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

/Project/config/config.yml

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

Update CodeKit’s project settings

Update CodeKit’s project settings

  • Fist skip all the files except “Source”

1*9jZrdGtbp0LmVDr_MuLLAA.png

  • Browser refreshing set Document-Root Subpath to /public

1*De6MxaanwulKyJHZTr6IPQ.png

  • 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

1*sNtsBuyPRb619RQUKX9_zg.png

  • Set up “Build” process that is mainly for backup, usually, Hooks keep everything running smoothly. The order of these steps is important.

Firstly add „Process Files“ step and select source/css/style.scss.

Secondly, add the „Run Script“ step and paste following into the script area:

php core/console — generate — patternsonly

1*rJ0l19uW0j7r14H0AqU8Hw.png

And that’s it. Happy coding.