it comes down to what you need for the most reach / portability
if a team can write all their patterns in a language that works both in PL and their production apps, happy days
if not, then translation is required
we are working on ever more PatternEngines, but we will never support everyone
the export process does not translate (though that's a pretty neat idea!)
the export process attempts to package up patterns in their source form and strip out PL's extra glue
at my company, the flagship awesome design system is written in React. but they have strong desires to go back to simpler HTML/CSS/JS so that their patterns are more portable as the building blocks of the web, freed up so implementors can use the design system components as spec for their language of need, if not outright
it certainly isnt a perfect workflow. but we are trying to get to Handlebars as the default, which is more capable. there is stellar work going on with Twig too. and then we are also trying to get rudimentary React support
all of these things give us decent surface area, along with the PatternEngine ability to define your own (Elm perhaps)
I hope this clarifies Pattern Lab's value exchange a bit better.
@ringods I should have clarified in my earlier post. Our “single source of truth” is raw HTML/CSS with our coding standard using BEM. Our front-end team creates UX prototypes and wireframes, with consideration to mobile first, responsiveness and accessibility of that HTML. The UX team then creates the HTML and CSS in Pattern Lab. Our devs refer to these Pattern Lab components as a reference and translate to the appropriate language depending on the technology needs our our clients.
I've noticed you can use a MD file to display additional content for the a folder, but if I do that in v3 beta, I get a JS error message
patternlab-viewer.js:1 Uncaught TypeError: Cannot read property 'innerHTML' of null which appears to be related to a #pl-pattern-data-footer element
Does Mustache support base templates and blocks like Hugo supports? https://gohugo.io/templates/base/#define-the-base-template
I need to wrap multiple elements in generic section
div tags to mimic how Zoho Sites generates HTML. I have atoms for these sections, but the content of these sections differ in the molecules I'm creating.
So to say it in the most simple way: I want to find a way to pass the generated html of one atom as the content (parameter) of another (the outer) atom as the result of my molecule.
Coming back to my own question: using the Handlebars engine and Dynamic Partials (https://handlebarsjs.com/partials.html#dynamic-partials) solved it for me:
https://gitter.im/pattern-lab/node?at=5bfdc4b0a6e00567431e2d0d
Is this a good place to ask about how to introduce the styles in the styleguide-specific.css into my view. I've been looking around all day at it and I think there must be a setting somewhere I'm missing!
NPM via Gulp. Currently using @latest for these:
"@pattern-lab/styleguidekit-assets-default": "^4.0.0-alpha.3",
"@pattern-lab/styleguidekit-mustache-default": "^4.0.0-alpha.1",
"@pattern-lab/styleguidekit-assets-default": "^4.0.0-alpha.3",
"@pattern-lab/styleguidekit-mustache-default": "^4.0.0-alpha.1",
Just want those swatch styles!
Feels slightly hacky. If anyone has any better suggestion, please let me know :thumbsup:
@Seanom if you switch from Mustache to Handlebars as the templating engine, you can use
Dynamic Partials (https://handlebarsjs.com/partials.html#dynamic-partials). As an example, here is my box molecule (https://gitlab.com/ringods/zoho-sites-template-development/blob/master/source/_patterns/02-molecules/05-containers/00-box.hbs), using a data lookup for the name of the partial to insert. The value in the data file points to the pattern to insert as the content (https://gitlab.com/ringods/zoho-sites-template-development/blob/master/source/_patterns/02-molecules/05-containers/00-box.json).
Connecting the templating engine between PL and whatever production environment is what makes it all tick.
i have a headline.twig pattern as well. if i create a headline.json and assign the "headline" variable in there, the article.json uses that variable instead of data.json
i thought that was something that the dataInheritance plugin was doing, but that's disabled
Has anyone ran into an issue where pseudo patterns do not render as pattern's variations? For example: I created
button~primary.yml but when I look at the button pattern page, only the main pattern is rendered and the primary pseudo one simple shows me the content of button~primary.yml but in plain text and without any markup around them. I am using PL Node v3 beta 0.
I just started using Pattern Lab and have run into several issues. I won't get into all of them; however primarily right now I can't get the Pattern Infro drop-downs to display (clicking them does nothing) yet there's no JS error in the console. Likewise, when I want to view all of one atom subtype, it just sits there saying "Loading Pattern Lab" with an error in the console saying, "Uncaught TypeError: Cannot read property 'innerHTML' of null". I mention both together in case they are somehow related. The weird part is that the latter wasn't a problem at first and I'm not sure what changed to cause this.
I can attempt to troubleshoot this on my own, but thought I'd see if anyone knows off-hand why it would be doing this. Thanks!
I can attempt to troubleshoot this on my own, but thought I'd see if anyone knows off-hand why it would be doing this. Thanks!
I appreciate any help/advice
