Pattern Lab

archived 🗄
17

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!

1 Like