Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Brian Muenzenmeyer
    @bmuenzenmeyer
    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)
    folks have done this in the past (Thymol, Nunjucks, Underscore)
    Brian Muenzenmeyer
    @bmuenzenmeyer
    I hope this clarifies Pattern Lab's value exchange a bit better.
    Chuck Keller
    @cpkeller
    @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.
    Brian Muenzenmeyer
    @bmuenzenmeyer
    💖
    Ben Halverson
    @benhalverson
    hey @bmuenzenmeyer :smile: What's new?
    Ringo De Smet
    @ringods
    Thanks a lot for all the clarification. I think I know better how to get to set up my workflow. :wink:
    Sean Hester
    @Seanom

    Hello, I'm hoping someone can answer a quick question for me,
    Is it possible to just have a markdown page for a welcome page? in v3

    I've had a play but can only get it to display a mustache page, I'd like to be able to include a readme, style of page, as the first page.

    Sean Hester
    @Seanom
    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
    Ringo De Smet
    @ringods
    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.
    Ringo De Smet
    @ringods
    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.
    Sean Hester
    @Seanom
    Is there a beta channel for 3.0?
    Unbound Web Design
    @JaiDoubleU
    @Seanom I’d be interested in a beta channel for 3.0 as well.
    Ringo De Smet
    @ringods

    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

    Tony Haddon
    @tonyhaddon
    HI all.
    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",
    Just want those swatch styles!
    Tony Haddon
    @tonyhaddon
    Found a fix: updated source/_meta/_00-head.mustache and added <link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css?{{ cacheBuster }}" media="all"> after the {{patternLabHead}} section.
    Feels slightly hacky. If anyone has any better suggestion, please let me know :thumbsup:
    Sean Hester
    @Seanom

    how do people render partials that offer different HTML content.

    I've some tabs that I would like to add to a Pattern library but need to be able to change the HTML content, which is often a combination of other organisms?

    Ringo De Smet
    @ringods
    @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).
    rajb12
    @rajb12
    hi
    Sean Hester
    @Seanom

    @Seanom if you switch from Mustache to Handlebars as the templating engine, you can use Dynamic Partials.

    Thanks this is a great idea :thumbsup:

    Marek Kowalczyk
    @marekkowalczyk_twitter
    A noob question: Can Patter Lab be used to design Hugo themes?
    Brad Frost
    @bradfrost
    @marekkowalczyk_twitter it looks like Hugo uses Go's templating libraries to build the template, and as far as I know there's not a Go-flavored templating engine inside of Pattern Lab right now.
    Connecting the templating engine between PL and whatever production environment is what makes it all tick.
    Marek Kowalczyk
    @marekkowalczyk_twitter
    @bradfrost Thanks, that's what I had suspected.
    Terrance Pitre
    @tpitre
    has anyone ever had an issue where a pattern specific json file does not override data.json? for instance, i have a "headline" variable in data.json and i'm trying to override it in article.json, but it's not letting me
    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
    Mario Hernandez
    @mariohernandez
    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.
    Luke Pinion
    @lwpinion
    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!
    John Tenezaca
    @johntenezaca7
    Hey guys.. hope ya'll are good. I recently started using pseudo patterns and I ran into some issues trying to reference that that specific pseudo pattern organism in my pages directory. What am I missing?
    I appreciate any help/advice
    Tom McCaffery
    @tommcc
    @johntenezaca7 I believe the tildes in pseudopatterns turn into dashes when trying to reference/link them. Although I vaguely remember linking issues if the "first parts" of several patterns or their pseudo siblings are similar.
    pitxels
    @pitxels
    Good night good people, I was reading patternlab.io and I got confused because it says the project is Tool Agnostic, however it seems that I need to use it either with PHP or Node. Isn't there a way to have this without a server side language imposed?
    pitxels
    @pitxels
    Ok Nervermind
    Luke Pinion
    @lwpinion
    ¯_(ツ)_/¯
    Lars McLachlan
    @lasseitorp_twitter
    I'm trying to find some good workflow examples of adding custom @font-face fonts. Can anyone give som tips on that?
    Unbound Web Design
    @JaiDoubleU
    Hi All, I’m looking to create a custom starterkit that includes bootstrap as a dependency. This will be used with the latest patternlab node. Can anyone tell me if there’s an existing bootstrap starterkit that I can fork or if it’s best for me to create a fork of starterkit-handlebars-vanilla? Or mabye it’s a custom uikit that I should be creating? Any advice would be greatly appreciated. Thanks in advance