↓Skip to main content

Using CodeKit 3 with PatternLab 2

·

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

Both platforms have been rebuilt and gained much speed compared to the previous versions. The setup is different from previous versions.

I like to control how the final CSS is generated. 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 Composer to create the new project.

Update PatternLab’s settings by opening /Project/config/config.yml and setting cacheBusterOn: ‘false’ to keep processing fast and 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

  • First, skip all the files except “Source”

Skip Selected Folders
Skip Selected Folders

  • Browser refreshing set Document-Root Subpath to /public

Set Document-Root Path to /public
Set Document-Root Path to /public

  • Set up Hooks. Create a 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 the following into the script area:

php core/console — generate — patternsonly

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

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

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

php core/console — generate — patternsonly

And that’s it. Happy coding.