{"id":244958,"date":"2016-08-29T12:39:19","date_gmt":"2016-08-29T19:39:19","guid":{"rendered":"http:\/\/css-tricks.com\/?page_id=244958"},"modified":"2016-08-29T12:39:19","modified_gmt":"2016-08-29T19:39:19","slug":"149-quick-intro-pattern-lab-node-brian-muenzenmeyer","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/149-quick-intro-pattern-lab-node-brian-muenzenmeyer\/","title":{"rendered":"#149: A Quick Intro to Pattern Lab Node with Brian Muenzenmeyer"},"content":{"rendered":"<p>In this screencast I pair up with <a href=\"http:\/\/www.brianmuenzenmeyer.com\/\" rel=\"noopener\">Brian Muenzenmeyer<\/a> who, among other things, works on <a href=\"http:\/\/patternlab.io\/\" rel=\"noopener\">Pattern Lab<\/a>. Specifically, the <a href=\"https:\/\/github.com\/pattern-lab\/patternlab-node\" rel=\"noopener\">Node version<\/a> of Pattern Lab, along with <a href=\"https:\/\/twitter.com\/geoffpursell\" rel=\"noopener\">Geoff Pursell<\/a>. <\/p>\n<p>I should point out: <strong>this screencast barely scratched the surface of what Pattern Lab offers.<\/strong> It&#8217;s not a comprehensive overview. Brian said a recent 8 hour workshop couldn&#8217;t even cover it all. The topics covered in this screencast are:<\/p>\n<ol>\n<li>What is Pattern Lab?<\/li>\n<li>Why would I use it?<\/li>\n<li>Getting it installed and seeing how it works<\/li>\n<\/ol>\n<p>We start from absolutely nothing and get Pattern Lab installed and start playing with it. Brian helps me along the way as I drive. <\/p>\n<p>Pattern Lab Node comes in Grunt and Gulp versions. We use the Gulp version for this screencast, but I believe they are developed in parallel. The Gulp version is running Gulp 4, which my machine wasn&#8217;t upgraded to yet, so we covered how to do that without needing to upgrade and potentially screw up other projects.<\/p>\n<h3>More Stuff to Know About Pattern Lab<\/h3>\n<ul>\n<li>Pattern Lab also has a more mature PHP version which is built by <a href=\"https:\/\/twitter.com\/dmolsen\" rel=\"noopener\">Dave Olsen<\/a>, which has more robust Twig and Drupal support.<\/li>\n<li>A good overview of Pattern Lab from a conceptual level was <a href=\"https:\/\/www.smashingmagazine.com\/2016\/07\/building-maintaining-atomic-design-systems-pattern-lab\/\" rel=\"noopener\">recently published on Smashing Magazine<\/a>. Brian says: &#8220;Pattern Lab is well-suited for teams and companies of any size, and can plug into most any workflow. At least two fortune 50 companies are using it to help power their web products.&#8221;<\/li>\n<li>In addition to Mustache, Pattern Lab Node can build templates for Handlebars, Underscore, and Twig, with various levels of support.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this screencast I pair up with Brian Muenzenmeyer who, among other things, works on Pattern Lab. Specifically, the Node version of Pattern Lab, along with Geoff Pursell. I should point out: this screencast barely scratched the surface of what Pattern Lab offers. It&#8217;s not a comprehensive overview. Brian said a recent 8 hour workshop [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[],"acf":[],"jetpack-related-posts":[{"id":157918,"url":"https:\/\/css-tricks.com\/video-screencasts\/130-first-moments-grunt\/","url_meta":{"origin":244958,"position":0},"title":"#130: First Moments with Grunt","date":"December 10, 2013","format":false,"excerpt":"There are all these tasks that we need to do as front end developers. Concatenate and compress our files. Run our preprocessors. Optimize images. Run tests. The list goes on and on. Using different tools for all of them is getting increasingly difficult. Running them manually makes it worse, and\u2026","rel":"","context":"With 63 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":177144,"url":"https:\/\/css-tricks.com\/video-screencasts\/screencast-134-tour-site-progress-built-jekyll-grunt-sass-svg-system\/","url_meta":{"origin":244958,"position":1},"title":"#134: A Tour of a Site In-Progress Built with Jekyll, Grunt, Sass, an SVG System, and More","date":"August 1, 2014","format":false,"excerpt":"Warning: this is a meandering, intermediate level screencast in which we look at the code that powers a build process for a site. We don't write any code. A \"build process\" is all the stuff that happens between the code you write and code that goes out to a live\u2026","rel":"","context":"With 50 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":146791,"url":"https:\/\/css-tricks.com\/video-screencasts\/128-effeckt-css-local-setup-with-grunt-and-contributing-on-github\/","url_meta":{"origin":244958,"position":2},"title":"#128: Effeckt.css, Local Setup with Grunt, and Contributing on GitHub","date":"August 15, 2013","format":false,"excerpt":"Effeckt.css is an in-progress open source project that aims to provide performant, quality CSS transitions and animations for web designers. The idea is to provide as little UI and JavaScript as possible so that you can extract an effect to use on your own site, and customize it, easily. In\u2026","rel":"","context":"With 16 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":190763,"url":"https:\/\/css-tricks.com\/lodge\/svg\/35-optimizing-svg-tools\/","url_meta":{"origin":244958,"position":3},"title":"35: Optimizing SVG with Tools","date":"December 14, 2014","format":false,"excerpt":"We talked about optimizing SVG by hand already. Making choices manually about detail and what kinds of things can be combined or removed. In this screencast we'll look at optimizing SVG with tools. Tools that can reduce the file size of SVG without (hopefully) changing the look of it at\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":148811,"url":"https:\/\/css-tricks.com\/lodge\/learn-jquery\/06-jquery-selector-extensions\/","url_meta":{"origin":244958,"position":4},"title":"#06: jQuery Selector Extensions","date":"September 2, 2013","format":false,"excerpt":"jQuery can select anything that CSS3 can select. But it doesn't stop there! There are a number of additional selectors that jQuery offers (via the Sizzle selector engine) that are pretty darn useful sometimes. For instance, CSS has attribute selectors that allow you to select an element based on any\u2026","rel":"","context":"With 5 comments","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18684,"url":"https:\/\/css-tricks.com\/lodge\/v10\/127-building-the-single-video-page-part-2\/","url_meta":{"origin":244958,"position":5},"title":"#127: Building the Single Video Page, Part 2","date":"October 2, 2012","format":false,"excerpt":"In this screencast we'll finish up code-wranglin' the template for single videos. We start by getting organized in our CSS a bit. Some of the videos.scss file is global to video-related pages. Some is specific to the archival pages and some is specific to single video pages. For now, it\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/244958"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=244958"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/244958\/revisions"}],"predecessor-version":[{"id":245029,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/244958\/revisions\/245029"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=244958"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=244958"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}