# Pattern Lab **URL:** https://discourse.roots.io/t/pattern-lab/2135 **Category:** archived šŸ—„ **Created:** 2014-08-20T11:59:53Z **Posts:** 27 ## Post 1 by @treb0r ā€” 2014-08-20T11:59:54Z Iā€™ve been using both Roots and Bedrock for a while, and both of these projects have forced me to up my game in terms of how I go about designing, building and deploying websites for clients. In the spirit of continuing to improve my workflow, Iā€™ve recently started to experiment with [http://patternlab.io](http://patternlab.io) and the associated atomic design system. Now I am wondering if anybody on here has any experiences of using Pattern Lab with Bootstrap and Roots. If you have not tried Pattern Lab yet, check it out. I guarantee you will be impressed. --- ## Post 2 by @thiago ā€” 2015-02-22T19:47:04Z Hey there! did you get a chance to resolve your issue? Iā€™m just about to begin using patternlab myself! :smile: --- ## Post 3 by @treb0r ā€” 2015-02-22T20:13:46Z Yes, been using [patternlab.io](http://patternlab.io) to great effect. Just set up a grunt file and include bootstrap, works a treat. If you have any questions leave them in this thread and Iā€™ll try to help you out. --- ## Post 4 by @thiagodebastos ā€” 2015-03-19T14:31:57Z @treb0r Wow I canā€™t believe that was 25 days ago. I will try and get it working with Gulp, Iā€™ve used gulp from the start, Iā€™ve never tried my hands on grunt! Just a question, how are you using Patternlab? Do you use it simply for the styleguide? Or have you set it up so that you are including in actual ā€˜bitsā€™. I was playing around with a Jade port of patternlab I was making and I would use certain bits by adding them as mixins or includes. :smile: --- ## Post 5 by @treb0r ā€” 2015-03-20T00:32:12Z Weā€™re using Patternlab to build all the page templates. It saves loads of time and effort. No more full page mockups in photoshop or illustrator. Weā€™ve got it working with gulp now. Once youā€™ve got the pages designed in PL you can copy the assets (less, images, etc) into your sage theme. Copy the html in the generated PL files into your sage .php theme files, throw in some template tags and off you go. Looking forward to trying out some of these other css frameworks soon. --- ## Post 6 by @thiagodebastos ā€” 2015-03-20T00:59:17Z @treb0r That sounds great man, do you have a gist of your gulpfile available? Iā€™m going to do the same, I love the concept of atomic design. As for other frameworks, Iā€™m really enjoying using [stylus](http://learnboost.github.io/stylus/) with [jeet](http://jeet.gs/) and [axis](http://axis.netlify.com/). Much leaner than using large frameworks :smile: --- ## Post 7 by @treb0r ā€” 2015-03-20T14:32:17Z Here you go: > Hereā€™s the modified Sage gulpfile.js and package.json that we are using with [Patternlab.io](http://Patternlab.io). Weā€™ve added gulp-shell and run-sequence as you can see in the json. Let me know how you get on. Any questions, post 'em here. --- ## Post 8 by @treb0r ā€” 2015-03-20T14:50:07Z and by the way, stylus, jeet and axis all look way cool, thanks. Canā€™t wait to be free to try stuff outside of Bootstrap but still within Sage. --- ## Post 9 by @thiagodebastos ā€” 2015-03-21T19:40:39Z Iā€™ve almost got patternlab fully working, with stylus jeet and jade! All I need to understand is your folder structure. At the moment I dumped all the folders from patternlab into my theme directory. The problem with this is that I donā€™t know how to access it from wordpress, because patternlabā€™s `public` output is simply a static site. The only way I can load it is by dragging the main `html` file into the browser, just so I can see what I am doing. This is probably more of a limitation of my understanding of wordpress and `.htaccess`. I also changed: `var manifest = require('asset-builder')('.source/assets/manifest.json');` into: `var manifest = require('asset-builder')('./assets/manifest.json');` because thatā€™s where Sage keeps it by default and I wasnā€™t sure why you moved it. Perhaps to parse info/assets from patternlab? --- ## Post 10 by @treb0r ā€” 2015-03-23T11:06:47Z You shouldnā€™t dump the Patternlab files into Sage. I think trying to to use stylus, jeet and jade is also complicating matters. Iā€™m waiting until Yeoman arrives before I try any of that stuff. I would just get Patternlab working with Bootstrap for now so you can learn how it works. If you decide to have another go with Patternlab and Bootstrap you should clone a fresh copy of Sage and move it into your theme directory. Then you can cherry pick the assets you need from Patternlab (Images, Less, JS). Put those assets into the right places in the Sage assets folder. You should now be able to compile your assets for Sage with Gulp. Once that is working you need to copy the html from Patternlab into the theme php templates as required. --- ## Post 11 by @thiagodebastos ā€” 2015-03-23T11:52:17Z Thank you! That makes more sense, I thought you had just automated the entire thing. I appreciate your help and guidance thus far and will do as you recommended. Regarding Bootstrap, I may give it another shot too, I just find it so bloated and messy to work with. Perhaps I need to learn cleaner ways of using bootstrap :smile: --- ## Post 12 by @treb0r ā€” 2015-03-23T12:50:02Z Itā€™s just a case of trying to run before you can walk. Remember that the [Roots.io](http://Roots.io) guys have already stated that they intend to unbundle Bootstrap from Sage using Yeoman. If you can get Patternlab working with Bootstrap and Sage you will be in a great position to transition to whatever tools you like once that happens. Iā€™ve been doing a lot of reading about Jeet, Stylus and Axis. Iā€™m looking forward to using them soon so thank you too. Good luck :wink: --- ## Post 13 by @thiagodebastos ā€” 2015-03-23T16:37:48Z Here are some more references for Jeet and Stylus :smile: ##Stylus https://www.youtube.com/embed/LBw4QJyvp6o?feature=oembed&wmode=opaque&list=PL12RqeSftwXoaEAgSk7DcTaWeNOJ1Y2U- ## Jeet [https://www.youtube.com/watch?v=Ns4BHTlaOGs&list=PLFe6qPta9Rb49Fz1nVi6Vai2rVQ\_BTwJg](https://www.youtube.com/watch?v=Ns4BHTlaOGs&list=PLFe6qPta9Rb49Fz1nVi6Vai2rVQ_BTwJg) And if you like stylus, youā€™ll LOVE Jade (for non-wordpress sites): ## Jade https://www.youtube.com/embed/videoseries?list=PLTmBrIcSbwxmOkLieUiTHxT1uEjSg4XP0&wmode=transparent&rel=0&autohide=1&showinfo=1&enablejsapi=1 --- ## Post 14 by @icandeveloper ā€” 2015-10-15T20:53:59Z Hi Treb0r - this whole discourse is very interesting but Iā€™m just having some issues with understanding the setup whereby Iā€™d have bedrock, sage running with patter lab somewhere in that set up whereby my front end developers could work solely in pattern lab source folder (Iā€™ve already cloned bootstrap sass in here and have pattern lab working with bootstrap - originally using compass) compiling into the public css (and perhaps being able to access using domain/app/patternlab/public/) and also into the sage assets css - so the set up here would make both css files the same and allow any changes made to pattern lab be mirrored in sage. I was thinking that I could use the sage gulpfile.js to achieve this mechanic and looking at the above discourse I thought thatā€™s what you were doing but something doesnā€™t seem right. So just to recap ā€¦ The setup I have at the moment is ā€¦ ā€“ bedrock ----web --------app ------------patternlab ----------------source ---------------------sass ----------------public ---------------------css ------------themes ----------------sage ---------------------assets -------------------------css So looking at your gist - so do you have patternlab files actually in the sage folder and your gulp file instructions are referring to this setup? --- ## Post 15 by @treb0r ā€” 2015-10-28T15:22:28Z Hi @icandeveloper, sorry for the late reply. We keep PattternLab and Sage separately. We have got our own gulpfile together for Patternlab that is based on the Sage gulpfile. Templates live in Patternlab as that allows us to build up a library of reusable UI components and PL is handy for displaying the layouts to the client. Once signed off, itā€™s just a matter of copying the assets (Sass, Bower.json, etc) into a fresh checkout of Sage. We then just copy and paste the html5 templates as needed to build the working theme. Itā€™s not integrated, but it works well. --- ## Post 16 by @danmv ā€” 2017-01-27T19:27:19Z Hey, would you mind sharing how you set-up bootstrap with patternlab (node). Did you use bootstrap-sass? I am new to pattern lab and not sure how to setup bootstrap-sass correctly with it. Thanks --- ## Post 17 by @asherdub ā€” 2017-01-30T14:19:07Z Hi @danmv I work with @treb0r on WordPress sites built with Sage using PatternLab for the UI design. I use a hybrid of PatternLab with the front-end workflow of Sage 8.5. The Sage 9 webpack workflow still blows my mind at the moment :smiley: Here is a brief explanation of how I use Bootstrap with PL. First I pull bootstrap-sass via bower into a bower\_components folder in the PL source folder. My PL source folder uses the same /assets folder and file structure as Sage 8.5 Then I have similar gulpfile to the one used by Sage 8.5. This runs a sequence to compile the assets (.scss .js etc.) into a /dist folder using the rev manifest in the same way as Sage 8.5. Make sure that manifest.json uses the correct paths to tell gulp where to compile the assets into PL "paths": { ā€œsourceā€: ā€œsource/assets/ā€, ā€œdistā€: ā€œpublic/dist/ā€ }, Once everything has compiled, the last event in the sequence is to run the pattern lab builder command using gulp-shell. I use the standard php twig edition of PatternLab so if youā€™re using the node edition the pattern lab build task will be different. One other thingā€¦ as Iā€™ve told gulp to compile the assets into /public/dist/ I need to link to the assets in /public/dist/ in Pattern Labā€™s head template and data.json I hope that helps. Give thanks! --- ## Post 18 by @treb0r ā€” 2017-01-30T18:01:36Z We are currently looking at a proper integration between Sage 9 and Patternlab 2. There is an interesting WordPress theme using Patternlab twig templates here: > **[forumone/gesso-wp](https://github.com/forumone/gesso-wp)** > > gesso-wp - Gesso WordPress theme If we are successful we will release the project on Github. --- ## Post 19 by @alicam ā€” 2017-05-11T02:00:40Z Any further on this, @treb0r? Very keen to understand your approach! Itā€™s doing my head in, frankly :slight_smile: A --- ## Post 20 by @robrecord ā€” 2018-04-16T14:49:51Z Iā€™m keen to understand this as well. Instead of keeping patternlab separate and copying over compiled HTML files into their respective templates in the wordpress theme, I would like to see the process more integrated where PatternLabā€™s files were actually part of the theme (keeping everything DRYer). I saw this article and it helped my understanding get a bit closer, but Iā€™m not brave enough to try it while my current projectā€™s deadline looms. Looking forward to getting this cracked one day, I think it would be an awesome workflow! > **[Solr + Laravel + Pattern Lab = More Buzzwords!](http://cognition.happycog.com/article/solr-laravel-pattern-lab-more-buzzwords)** > > One of the things I like the most about what we do is the fact that thereā€™s always a bunch of different ways to do the same thing. Chances are, the end result is still just HTML getting rendered by a browser. But the real fun is starting a new... PS are people using Axis and Jeet in 2018? I have never heard of them. --- ## Post 21 by @treb0r ā€” 2018-04-18T11:00:22Z Hi Chaps, Sorry for the very long delay in replying. We have Sage 8.5.\* working well with Pattern Lab (twig) by using Timber on WordPress. The hardest thing we found to get it all working is deciding on and sticking to a variable naming convention that can work across Pattern Lab and WordPress. After a lot of experimentation, weā€™ve now decided to move away from Pattern Lab and twig, mainly because Sage 9 and Laravel use Blade and there is no Blade support in PL. We also found that the Atomic design system as used by PL was just a bit too granular for our needs and often confused the clients when viewing the Pattern Library. I read the excellent [Smashing Book](https://www.smashingmagazine.com/printed-books/design-systems/) on Design Systems and came to the conclusion that we should design and build our own Pattern Library using a static site generator and Blade. I came across [Jigsaw](https://jigsaw.tighten.co/) that seems to fit the bill nicely. We are using the IBM [Carbon Design System](http://carbondesignsystem.com/) as a starting point for our own Library blueprint, which we will then use as a foundation for client work. The vision is to have each UI Pattern defined in a Blade template and then included directly into the Pattern Library, WordPress theme or Laravel app as needed. --- ## Post 22 by @robrecord ā€” 2018-04-18T11:24:09Z Thank you for this insight @treb0r, I was going to try to write a patternlab engine for Blade, or otherwise try to incorporate Handlebars into Blade (within Sage) - but both of these are currently above me; as is trying to merge the two webpack configurations from Sage and Patternlab-node-webpack. I ended up duplicating the default layout in Sage (app.blade.php) and calling it pattern.blade.php, removing the header and footer, and temporarily switching individual templates to use it, to get a stripped-down view of my pages or components as I was developing them. Itā€™s not a great solution but it allows me to create, use and reuse Blade partials that replicate the UI Patterns, which are organised into different folders (/components, /basics etc). Blade seems to work really well for this since it allows passing variables through. Thinking that blade can do much of what Twig, handlebars and other tools can do, I too thought about eschewing PatternLab and building my own version that uses the Blade templates in-situ. With my current project deadline, however, Iā€™m happy to work in halfway-land. Iā€™d be really interested however to see a Blade pattern library that integrates with Sage. Something interesting to me was General Electricā€™s take on Atomic Design which uses different levels of hierarchy, which seem like much friendlier and more useful classifications of pattern: [https://medium.com/ge-design/ges-predix-design-system-8236d47b0891](https://medium.com/ge-design/ges-predix-design-system-8236d47b0891) Iā€™ll check out the links you posted. Thanks for sharing your journey so far! --- ## Post 23 by @chrisk2020 ā€” 2018-04-19T09:41:42Z > [@treb0r](#): > > The vision is to have each UI Pattern defined in a Blade template and then included directly into the Pattern Library, WordPress theme or Laravel app as needed. Weā€™ve done this on one of our projects :slight_smile: The setup was quite in depth and time pressures mean I canā€™t fully outline right now, but Iā€™m planning a blog post. It is possible though. Especially using the controllers in sage 9. In a nutshell the workflow was to build components in the styleguide - which sat at the same level as the resources folder: ![42](https://discourse.roots.io/uploads/default/original/2X/e/e84e9c7d0e60890d34d7db491c2825c38acbe162.png) The.content.php contains the variables that in the theme are replaced via the controller. we weā€™re then able to set view paths in app/config/view: ``` get_parent_theme_file_path().'/styleguide', ``` whcih allowed us to include styleguide templates in the theme with: ``` @include('partials.carousel.carousel--full_row', $data = $data_variable_from_controller) ``` (apologies - the setup to arrive at this workflow was a little more complex), but the upshot is that we had a blade template styleguide populating the theme with components directly. --- ## Post 24 by @treb0r ā€” 2018-04-19T09:57:42Z > [@chrisk2020](#): > > Weā€™ve done this on one of our projects :slight_smile: The setup was quite in depth and time pressures mean I canā€™t fully outline right now, but Iā€™m planning a blog post. It is possible though. Especially using the controllers in sage 9. Good to hear. I might hit you up for some advice if we hit any major obstacles! :wink: --- ## Post 25 by @robrecord ā€” 2018-04-19T11:19:56Z This is the holy grail, right here! Thanks for sharing @chrisk2020 --- ## Post 26 by @mistcat ā€” 2019-08-05T21:42:44Z Hey Chris, If you do get a chance to rough out a blog post about this, Iā€™d very much love to read it! Thank you for sharing! --- ## Post 27 by @ben ā€” 2022-02-26T03:19:32Z