Whats new in Primer 2?

Primer 2 is out! You can grab a copy from GitHub.

We originally designed Primer (our Pattern Library) as a tool to help with the development and maintainability of front end components. Using it we’ve able to build complex design systems and easily build out page templates from a series of smaller re-usable fragments. Building in isolation allowed our front end to be completely decoupled from whatever back end system would eventually be used. This also allowed for an element of parallel development to occur between front and backend.

With Primer v1, when it came to implementing the backend (e.g. in WordPress) we were able to package up all our front end assets (compiled CSS/JS, sprites etc) and copy them as is. This got us a long way but we were still left to re-implement the various templates in whatever templating language the back end system required. With Primer 2 we’ve made changes to remove this additional friction in a couple of ways:

  1. We’ve added the ability to use custom template engines, letting you use your templating language of choice. We’ve implemented Handlebars (the default) and also Twig but it is relatively simple to add other languages as required (I’ll post instructions on how to do this soon).
  2. We’ve removed the custom inc partial loader we’d written for v1. The custom loader essentially had the same API as the Handlebars default but allowed Primer to merge in data from patterns on include. This seemed like a good idea to start with as it made building out larger templates quicker, but also made the templates less portable and less declarative.

This is the largest change in the v2 release and represents a significant amount of work from the team at Rareloop.

We’re hugely proud of this release and have some exciting plans for additional modules that build on top of the new features that are now available (including an export from Primer -> Lumberjack).

Other additions & changes