resources.html

---
layout: default
title: Pattern Lab Resources
---


<section class="banner">
    <h1 class="banner__title">Resources</h1>
</section><!--end .banner-->

<div class="g g--2up">
    <div class="gi">

        <div class="tile tile--flex">
    	    <h2 class="language-btn">Style guides and atomic design</h2>

            <ul class="link-list">
            	<li class="link-list__item"><a class="link-list__link" href="http://styleguides.io">Styleguides.io</a></li>
            	<li class="link-list__item"><a class="link-list__link" href="http://atomicdesign.bradfrost.com">Atomic Design by Brad Frost</a></li>
            	<li class="link-list__item"><a class="link-list__link" href="http://bradfrost.com/blog/post/atomic-web-design/">Atomic design article</a></li>
            </ul>

        </div>

    </div><!--end .gi-->

    <div class="gi">

        <div class="tile tile--flex tile--fancy">
		    <h2 class="language-btn">Pattern Lab Examples</h2>
            <ul class="link-list">
            	<li class="link-list__item"><a class="link-list__link" href="http://demo.patternlab.io/">Pattern Lab Demo</a></li>
            	<li class="link-list__item"><a class="link-list__link" href="http://patterns.frostfinery.com/">Frost Finery</a></li>
				<li class="link-list__item"><a class="link-list__link" href="http://foodbank.bradfrostweb.com/patternlab/v10/">Pittsburgh Food Bank</a></li>
				<li class="link-list__item"><a class="link-list__link" href="http://www.brianmuenzenmeyer.com/patternlab/public/">brianmuenzenmeyer.com</a></li>
				<li class="link-list__item"><a class="link-list__link" href="http://altinn.github.io/DesignSystem/">Altinn</a></li>
            </ul>
        </div>

    </div><!--end .gi-->

    <div class="gi">

        <div class="tile tile--flex tile--alt">
    	    <h2 class="language-btn">Articles</h2>
            <ul class="link-list">
              <li class="link-list__item"><strong><a class="link-list__link" href="https://www.smashingmagazine.com/2016/07/building-maintaining-atomic-design-systems-pattern-lab/">Making And Maintaining Atomic Design Systems With Pattern Lab 2 by Brad Frost, Dave Olsen, Brian Muenzenmeyer</a></strong></li>
              <li class="link-list__item"><a class="link-list__link" href="http://www.brianmuenzenmeyer.com/using-patternlab-to-design-build-and-maintain-a-website">Using Pattern Lab to Design Build and Maintain a (Jekyll) Website by Brian Muenzenmeyer</a></li>
              <li class="link-list__item"><a class="link-list__link" href="http://www.brianmuenzenmeyer.com/solving-problems-with-pattern-lab-small-team-workflow">Solving Problems with Pattern Lab - Small Team Workflow by Brian Muenzenmeyer</a></li>
              <li class="link-list__item"><a class="link-list__link" href="http://www.brianmuenzenmeyer.com/adding-common-gulp-tasks-to-pattern-lab-node">Adding Common Gulp Tasks to Pattern Lab Node by Brian Muenzenmeyer</a></li>
			  <li class="link-list__item"><a class="link-list__link" href="http://tinnedfruit.com/2016/09/12/why-and-how-to-test-your-pattern-library.html">Why and How to Test Your Pattern Library: Testing Strategy by Jim Newbery</a></li>
			  <li class="link-list__item"><a class="link-list__link" href="http://tinnedfruit.com/2016/09/20/why-and-how-to-test-your-pattern-library-2.html">Why and How to Test Your Pattern Library: Testing a Pattern Lab Project by Jim Newbery</a></li>
            </ul>
        </div>

    </div><!--end .gi-->
    
    <div class="gi">

        <div class="tile tile--flex tile--alt2">
    	    <h2 class="language-btn">Podcasts</h2>
            <ul class="link-list">
              <li class="link-list__item"><strong><a class="link-list__link" href="http://goodstuff.fm/nbsp/86">Dave Olsen talking Pattern Lab 2 on Non-Breaking Space Podcast</a></strong></li>
			  <li class="link-list__item"><strong><a class="link-list__link" href="http://msdevshow.com/2015/12/pattern-lab-with-brian-muenzenmeyer/">Brian Muenzenmeyer talking Pattern Lab 2 on the MS DEV SHOW Podcast</a></strong></li>
            </ul>
        </div>

    </div><!--end .gi-->

    <div class="gi">
	
	<div class="tile tile--flex tile--fancy2">
	    <h2 class="language-btn">Presentations</h2>
	    <ul class="link-list">
           <li class="link-list__item"><strong><a class="link-list__link" href="https://css-tricks.com/video-screencasts/149-quick-intro-pattern-lab-node-brian-muenzenmeyer/">Screencast: A Quick Intro to Pattern Lab Node with Brian Muenzenmeyer</a></strong></li>
           <li class="link-list__item"><strong><a class="link-list__link" href="https://www.youtube.com/watch?v=hIH-lI1QTns&t=1s">Screencast: Migrating to Pattern Lab 3.0</a></strong></li>
           <li class="link-list__item"><strong><strong><a class="link-list__link" href="https://github.com/bmuenzenmeyer/pl-migrate-example">Code: Migrating to Pattern Lab 3.0</a></strong></li>
	    </ul>
	</div>
	
    </div><!--end .gi-->
</div><!--end .g--2up-->