How I deliver front-end development with Pattern Lab

August 29, 2017

Pattern Lab

I will admit that I love shiny new processes or tools. I constantly embrace the hope for radical changes that will make my life easier in every way. I jump on them, try them out, and abandon most of them as being more “shiny” than “helpful.” I think that’s healthy for somebody who’s supposed to build and consult others on all these things. Still, a few things have truly changed my world. Abandoning table-based design and embracing CSS was a win, obviously. I couldn’t go back to life without CSS pre-processors like Sass. Craft CMS is the CMS I wish I had been building in for a decade. Now, atomic design and Pattern Lab have finally separated out the front-end development from integration in a way that has completely changed my job on certain projects.


When I worked with Busy Noggin Digital recently on the new Craft CMS site for 121 Community Church I was able to build and deliver completely in Pattern Lab (with Twig) for the first time, and I don’t think I could go back as a front-end developer. Since they were doing the back-end development and integration in-house, all they needed or wanted from me was CSS/JS and modular HTML. I could have given them static HTML, but I thought that this was a perfect opportunity to use Pattern Lab. Thankfully, they like refining processes as much as me and trusted me to run with it.


So, with a completely new process at hand, I started my first deliverable (not pre-production or staging) pattern library deliverable using Pattern Lab with Twig. In a few minutes, I was able to launch a new docker container with just PHP (Pattern Lab doesn’t need a database or anything), my standard starter files with Grunt and Bower setup just the way I like them, and I was already pulling in colors and fonts from the mockups. I shared a git repository with their main back-end developer, and he was able to see my progress and make notes. Even more cool, because of the modular nature of the project (and Craft implementation in general) and the fact that I was already using Twig (for HTML templates), he was able to take my code and start integrating as I was still finalizing the CSS and JS for the project. If he had changes necessary for integration, I could update my HTML and immediately test the changes in a responsive environment with plenty of example pages (seeing the module on it’s own, on the home page, and even embedded on a content page).


So, what were the main benefits compared to static HTML?


More importantly, what were the benefits compared to us collaborating in one Craft CMS implementation?


Overall, this project worked out great, and I’m in the middle of working on the pattern library for rebuilding this site and Even though neither of those are shared projects, I can use it as an opportunity to practice my techniques I learned on that shared project and even get better for the next project. I’ve already updated my Pattern Lab starter repository with common elements. So, if you haven’t given atomic design and Pattern Lab a shot, I highly recommend both of them. You can learn more about atomic design from Brad Frost’s articles, but I would recommend just buying his book. If you’re serious about playing with atomic design or pattern libraries in general, you should definitely check out the Pattern Lab project. Of course, if you want to work with a front-end developer who already uses them and loves new tools, then you can always .(JavaScript must be enabled to view this email address).