Pattern Lab: Advanced Design Implementation & Developer Workflow

What Is Pattern Lab?Let's get this first section out of the way quickly and onto the good stuff! Pattern Lab is an advanced implementation tool that allows development teams to cook with gas! It provides a framework where front-end developers can concurrently work on the theming/styling while back-end developers are still crunching out the back-end code. This provides a means to "work the bugs out" early on and even inform folks (clients, developers, project managers, etc) of any potential stress points or issues. This can enhance sales and make everyone's lives easier. Let's talk about this more..

The Wild West

In the past -- front-end developers would often times be scraping along for work to do in the beginning of the project while most of the back-end development was still in progress. This lended itself to less productivity, a sacrifice of efficiency, and almost always, a flash flood of change requests and bug tickets near the end of the project; effectively driving everyone crazy because we never achieved true clarity on what we were all building in the first place. Simply put - we were building without a blueprint.Ask any engineer in any field about building without a blueprint -- the result is almost always scope creep, loss of quality, anxiety all around, and increased work hours (overtime is no fun for anyone). Pattern Lab provides a living blueprint, and so much more!

The New Age

It's the future, man! Now that we've passed through the technological "age of enlightenment" it's time to employ the tools created there. Enter Pattern Lab.Pattern Lab gives us the ability to inform site architecture, structure, form, and fashion through parallel workflows. What the heck does that mean? It means that in the beginning of the project, once we've decided on a few details (cms, theme framework, etc) we as Front-Enders can begin breaking the designs down into atomically organized components. Most of the smaller-to-medium components (atoms and molecules) will/can be reused. This recycling of components pushes us towards organizational consistency across elements. Some of the larger components (organisms and templates) will also be reused -- but are more generally reserved for handling dynamic or complex features of the site/application (notice I say application here -- Pattern Lab can be used to enhance any creative endeavor dealing with design and user experience).

Let's Recap and Move Forward

In the "old west" our projects would move along at a slower rate in the beginning due to not enough work for the front-end team to be effectively building on -- and let's face it -- without markup we can't do much of anything! The "new age" of Atomic Design provides us with a means to start creating atomic elements and get moving with theming at the same time the backend is still being built. We even benefit from finding bugs, "gotchas", and other opportunities early on.What is the top benefit of all this? There are obvious benefits and not so obvious benefits -- but the major "home run hitter" goes to shared assets! Picture this as the ability to drop our Pattern Lab work right into a theme, cms, or application and everything slides together. This means that all the work we did in the beginning comes to join the finalized backend work -- and beautiful things ensue.

Atoms and Molecules and Organisms, oh my!

   
Now that we've gotten through the "why?" portion of Pattern Lab and Atomic Design -- let's very quickly cover what each of the 5 available components are and how they should be utilized. Atoms -- are the smallest and most versatile component available through Pattern Lab. These little guys are best suited for repeatable or often used html tags, as well as many other functions such as variables, colors, etc. I've also used atoms for embed codes or other one-off elements. Molecules -- are traditionally a combination of atoms, as well as other markup that might not be completely suitable for an atom or a larger organism. A good example of a molecule might be in creating a social share widget where each of the social icons and links would be a separate atom and all would be contained under one wrapper (making it a molecule). Organisms -- are usually a grouping of molecules (and sometimes atoms) that allow us to create specific sections of an interface. These are the components we will place into our templates for reuse. A good example of an organism might be a slider-- which would be a collection of slider components, such as arrows, buttons, or pagers, and of course the slides themselves. Templates -- are mostly put together with organisms (and sometimes molecules) and allow us to create "page template" for us to build our more final pages or sections from. Pages -- are the end result of creating the above elements and referencing templates to generate the final work. These are traditionally the items you will show clients for approval or feedback and will refine until ready. For more detailed explanations of Atomic Design and Pattern Lab, please see the below resources:

• Your Frontend Methodology Is All of Them - Christopher Bloom
• Atomic Design - Brad Frost

"Vanilla" Pattern Lab

Let's briefly cover "vanilla" Pattern Lab and some Pattern Lab concepts.

Setting Up Pattern Lab

This is actually very easy and can be accomplished with minimal effort:

1. First things first -- let's head on over to the Pattern Lab GitHub repo and download the zipfile.
2. Once we have the zip, unpack it into whatever directory you so desire.
3. Visit that directory via the terminal, and run php core/builder.php --generate
4. When that command completes, you will now have a generated Pattern Lab file structure ready for you to customize.
5. To enable live reload (who likes hitting refresh/F5 all the time?) from the same terminal window, run php core/builder.php -wr
6. When this command executes successfully, your Pattern Lab instance will now watch for changes and reload the browser when detected. Sweet!
7. Last step is to open your Pattern Lab instance. Open index.html within public/index.html

Pattern Lab Folder Structure

It's important to have a basic understanding of how the Pattern Lab folder structure is laid out and works. Below you will find the default structure:

Let's quickly discuss this folder tree: 

• config
• core
• extras
• public --> This is the endpoint for where your code will be compiled to. To view your Pattern Lab you will open index.html from here.
• source --> This is where all the magic happens!
• _data: This directory is used for adding "data" to your Pattern Lab through the use of JSON files. The file listed here "_data.json" is used as a global inclusion, however, you can also include your own.
• _patterns: This is where all your components will reside. You can see by the tree on the right that the 5 major classifications of components go here (atoms, molecules, organisms, templates, & pages). These items are a mixture of .mustache & .json files (if we have something like 01-link-list.mustache we can include 01-link-list.json to fill in data)
• css: Where your SASS will live
• fonts: Custom font inclusion
• images: Images go here :-)
• js: A home for your JavaScript

It's important to also note the files beginning with an underscore (e.g. _data.json). These items will be aggregated together. Items which do not receive the underscore will be rendered individually.

Following The Rabbit Hole Deeper

With the above example of the folder structure, I wanted to also provide a very simple example of how the mustache files work here, how to include a pattern within another pattern, and how to use .json files in unison.

Patterns

A pattern is just a .mustache file that contains markup. As an example, let's create a simple atom called social-item.mustache that contains the following:

<a href="{{ url }}"><img src="{{ src }}" alt="Follow Us On {{ channel }}!" /></a>

Now what we can see from the above is that we have an atom that is ready to be a repeatable component. Using the double mustache syntax {{ url }} we are able to grab JSON values.

Including Patterns Within Other Patterns --> Pattern-ception

Now let's say that we want to create a molecule that would include a few different social media sites. We can accomplish this first by creating our new molecule. Let's call this molecule social-media-menu.mustache and add in the following:

<div class="social-media-menu">
  {{#socialItems}}
    {{> atoms-social-item}}
  {{/socialItems}}
</div>

So what we have done now is setup a loop to run over all the items within the JSON object socialItems and for each item returned pass it through oursocial-item atom created in the last section. Now we just need to add the JSON and we will have a working example!

Putting It Together: Mustache + JSON

Since we want this molecule to know about the JSON data to loop through, we create a new .json file and name it the same as the "companion" molecule, so in this case we would name it social-media-menu.json. Our new file would contain the following:

{
    "socialItems":
    [
        {
            "url": "http://facebook.com/",
            "src": "../../images/fb-icon.jpg",
            "channel": "Facebook"
        },
        {
            "url": "http://twitter.com/",
            "src": "../../images/tw-icon.jpg",
            "channel": "Twitter"
        },
        {
            "url": "http://plus.google.com/",
            "src": "../../images/gp-icon.jpg",
            "channel": "Google Plus"
        }
    ]
}

With all of these three steps put together, we get:

<div class="social-media-menu">
  <a href="http://facebook.com/"><img src="../../images/fb-icon.jpg" alt="Follow Us On Facebook!" /></a>
  <a href="http://twitter.com/"><img src="../../images/tw-icon.jpg" alt="Follow Us On Twitter!" /></a>
  <a href="http://plus.google.com/"><img src="../../images/gp-icon.jpg" alt="Follow Us On Google Plus!" /></a>
</div>

And just as we saw above where we included that social item atom {{> atoms-social-item}} we can include this molecule in another pattern, such as an organism or whatever using the same syntax {{> molecules-social-media-menu}}.

Conclusion

So to wrap things up - we've gone over how the "old west" was won by the advancements of the "new age" of atomic design. We've explained how the methodologies of the "old west" lended itself to less productivity and time wasted, and how implementing parallel workflows can exponentially increase the productivity and effectiveness of a creative/development team. We covered many of the nuances of starting a Pattern Lab project, it's folder structure, how components are atomically arranged within the system. Lastly, we quickly took a look at the process of creating an atom, including it as a reusable component within a molecule, iterating over JSON data, and how the end result would render.I hope this has been an informative and inspiring article the helps guide those who read it towards a more atomically centered design implementation approach.

What's next?

Keep a look out for another installment blog post that will encompass Pattern Lab Starter and how the work done there can make life even better! Exciting stuff you don't want to miss!