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 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 that seems to fit the bill nicely. We are using the IBM Carbon Design System 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.
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.
We’ve done this on one of our projects 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:
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:
(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.
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.
