↓Skip to main content
tsoon

Using CodeKit 3 with PatternLab 2

·
Design Career

In 2016, integrating CodeKit 3 with PatternLab 2 offered developers a powerful combination. CodeKit served as an all-in-one tool for preprocessing, linting, and serving files, while PatternLab provided a robust pattern library system. This integration streamlined the development process and improved efficiency.

Both have likely evolved significantly since then. This article is preserved for historical context, consult current documentation for up-to-date integration methods.

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

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

Update CodeKit’s project settings

  • First, skip all the files except “Source”

Skip Selected Folders

  • Browser refreshing set Document-Root Subpath 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

Settings for Hooks

  • 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

Setting up a build process

And that’s it. Happy coding.

Esko Lehtme
Author
Esko Lehtme

Related

Eliminating waste in UX workflows with lean process mapping
Design Leadership
Process mapping transformed our UX team by revealing inefficiencies, clarifying responsibilities, and enabling strategic planning. By applying lean principles to our workflow, we reduced project setup time by weeks and gained the flexibility to manage multiple projects efficiently.
Tallinna Ettevõtluspäev 2024 - kolm võtet kliendi mõistmiseks
Design Career
At Tallinn Entrepreneurship Day 2024, I introduced three practical methods for customer research: card sorting, empathy mapping, and customer journey mapping. These techniques help new entrepreneurs understand customer attitudes, values, and behaviors, guiding product development in the right direction.
How design team leads evaluate your LinkedIn profile
·
Design Career
I’ve reviewed hundreds of LinkedIn profiles during hiring. Let me share exactly what catches my attention and makes profiles stand out. You’ll learn how to craft experience descriptions, present your skills, and create a professional narrative that resonates with hiring managers. These insights will help you optimize your profile to capture attention and open doors in the design field.