Pattern Lab

treb0r · August 20, 2014, 11:59am

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 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.

thiago · February 22, 2015, 7:47pm

Hey there! did you get a chance to resolve your issue? I’m just about to begin using patternlab myself!

treb0r · February 22, 2015, 8:13pm

Yes, been using 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.

thiagodebastos · March 19, 2015, 2:31pm

@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.

treb0r · March 20, 2015, 12:32am

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.

thiagodebastos · March 20, 2015, 12:59am

@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 with jeet and axis. Much leaner than using large frameworks

treb0r · March 20, 2015, 2:32pm

Here you go:

gist.github.com

https://gist.github.com/treb0r/c6a89a7289b98c24580a

gulpfile.js

// ## Globals
/*global $:true*/
var $           = require('gulp-load-plugins')();
var argv        = require('yargs').argv;
var browserSync = require('browser-sync');
var gulp        = require('gulp');
var lazypipe    = require('lazypipe');
var merge       = require('merge-stream');
var shell = require('gulp-shell');
var runSequence = require('run-sequence');

This file has been truncated. show original

package.json

{
  "name": "sage",
  "version": "8.0.1",
  "author": "Ben Word <ben@benword.com>",
  "homepage": "https://roots.io/sage/",
  "private": true,
  "repository": {
    "type": "git",
    "url": "git://github.com/roots/sage.git"
  },

This file has been truncated. show original

Here’s the modified Sage gulpfile.js and package.json that we are using with 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.

treb0r · March 20, 2015, 2:50pm

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.

thiagodebastos · March 21, 2015, 7:40pm

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?

treb0r · March 23, 2015, 11:06am

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.

thiagodebastos · March 23, 2015, 11:52am

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

treb0r · March 23, 2015, 12:50pm

It’s just a case of trying to run before you can walk.

Remember that the 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

thiagodebastos · March 23, 2015, 4:37pm

Here are some more references for Jeet and Stylus

##Stylus

Jeet

https://www.youtube.com/watch?v=Ns4BHTlaOGs&list=PLFe6qPta9Rb49Fz1nVi6Vai2rVQ_BTwJg

And if you like stylus, you’ll LOVE Jade (for non-wordpress sites):

Jade

icandeveloper · October 15, 2015, 8:53pm

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?

treb0r · October 28, 2015, 3:22pm

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.

danmv · January 27, 2017, 7:27pm

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

asherdub · January 30, 2017, 2:19pm

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

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!

treb0r · January 30, 2017, 6:01pm

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:

If we are successful we will release the project on Github.

alicam · May 11, 2017, 2:00am

Any further on this, @treb0r?

Very keen to understand your approach!

It’s doing my head in, frankly
A

robrecord · April 16, 2018, 2:49pm

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!

PS are people using Axis and Jeet in 2018? I have never heard of them.