by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    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
    genniecooper
    @genniecooper
    Here is a link to a very basic bootstrap starter kit. https://github.com/pattern-lab/starterkit-mustache-bootstrap
    Unbound Web Design
    @JaiDoubleU
    Thanks @genniecooper, I’m using that as a basis for my handlebars-bootstrap starter kit
    sangeesafi
    @sangeesafi
    Hi all
    i am trying to make the Bootstrap 8.x-3.20 as pattern lab theme please help me how to proceed
    Christian Galicia
    @x7ian
    Hi everybody! Im new to PL. Im trying to just simply create a react application that loads its assets from design system defined in a pattern lab implementation. I know how to install and work with PL, but now I need to use this organisms and atoms in my react project. There are lots of posts on react and Patternlab, however none of the ones ive found really explain this on detail, how should I organize my react project and pattern lab in my directory structure? and how am I supposed to include Pattern lab assets in my project?
    Im sorry if Im missing somthing basic here, Im new with Pattern Lab
    Donnie
    @DeusEx010101
    Hi all. I have been working with Pattern Lab for over a year now (mainly with node-mustaches). We are looking at providing integration with Drupal. I understand this is a large topic that has many levels and variations. For now my main question is:
    I want to maintain patternlab outside of drupal but would like to provide twig templates that are compatible. Where is my best option to start? node-twig, some version of twing or twig js, php-twig, drupal-twig? I see many branches offering pros and cons. I am looking for something that has good drupal twig functionality.
    Ringo De Smet
    @ringods
    @DeusEx010101 @patternlab/engine-twig now contains the twing javascript engine to support twig templates. This is a recent effort done by me. Feel free to test it and file issues when you encounter problems (https://github.com/pattern-lab/patternlab-node/issues)
    Genevieve Cooper
    @GennieCooper_twitter
    Hi I'm having issues using JavaScript with Pattern Lab. I put my new header.js file into the public/js folder. Ran npm patterlab:build, but when I click on my toggle button I get an error in the console reading "03-templates-00-home.rendered.html:84 Uncaught ReferenceError: chevronToggle is not defined". In patternlab-config.json the js folder is placed in the public folder "js": "public/js". Not sure what I'm doing wrong.
    Maximilian Franzke
    @mfranzke

    Hi I'm having issues using JavaScript with Pattern Lab. I put my new header.js file into the public/js folder. Ran npm patterlab:build, but when I click on my toggle button I get an error in the console reading "03-templates-00-home.rendered.html:84 Uncaught ReferenceError: chevronToggle is not defined". In patternlab-config.json the js folder is placed in the public folder "js": "public/js". Not sure what I'm doing wrong.

    @GennieCooper_twitter do you have the chance to provide a link for that ? This would heavily simplify understanding the problem.

    Genevieve Cooper
    @GennieCooper_twitter
    Unfortunately it's not a live project
    If I am putting the js file in the correct location that would point me in the right direction.
    Jason Acuna
    @tatewaky
    morning, if my core is 3.0.5, do i have to upgrade to make my current pattern-lab twig compatible?
    1 reply
    hannah-bourke-tw
    @hannah-bourke-tw
    Hi, we're trying to customise the styleguide side of our pattern lab created design system in a couple of very small ways (change the page title to start with). We've tried the uikit-workshop and uikit-bare but the page title seems to get overridden on build. We're changing the index.html inside the styleguide folder, and 00-head files.
    Maximilian Franzke
    @mfranzke

    Hi, we're trying to customise the styleguide side of our pattern lab created design system in a couple of very small ways (change the page title to start with). We've tried the uikit-workshop and uikit-bare but the page title seems to get overridden on build. We're changing the index.html inside the styleguide folder, and 00-head files.

    Hi @hannah-bourke-tw,

    the easiest for some simple content changes like this is to use the standard uikit-workshop „as is“ and configure the provided options within your PL installation themselves.

    To change either the style guides pagetitle (<title> tags content) or the label displayed next to the logo within the style guide bar (left or top), you could do the following:

    • Pagetitle: Edit the entry "title" within the file /source/_data/data.json
    • Label next to the logo: Edit the entry theme.logo.text within the file /patternlab-config.json file:
      (…)
      "theme": {
        "color": "light",
        "density": "compact",
        "layout": "vertical",
        "logo": {
            "text": "Patternlab",
      (…)

    Changing the files content out of https://github.com/pattern-lab/patternlab-node/tree/dev/packages/development-edition-engine-handlebars/source/_meta directly would lead to difficulties on doing updates etc., so it's better to use the variables provided in there like {{ title }}
    And you've additionally even already identified correctly that the contents out of styleguide are being generated with every build, which even also leads to the previous suggestion on using the configuration options and variables provided instead.

    hannah-bourke-tw
    @hannah-bourke-tw
    Hi @mfranzke , thanks for the quick response! Is there any documentation around the logo config (and any other parameters than can be changed within the theme other than the defaults)? For example, how would we change the icon?
    Changing the title within the /source/_data/data.json doesn't seem to have any effect - is there something else that needs to be changed as well?
    Maximilian Franzke
    @mfranzke
    @hannah-bourke-tw, most of the config options are listed on the docs page: https://patternlab.io/docs/editing-the-configuration-options/#heading-theme - but I've just realized that the whole logo part is missing there. I'll catch up with a contribution later on regarding this topic.
    And changing the variables within /source/_data/data.json even also didn’t work for me either on a fresh installation - I would as well need to follow up on that later on.
    hannah-bourke-tw
    @hannah-bourke-tw
    @mfranzke after a bit of poking around, it looks to us like the page is nested inside an iframe, and data.json only applies to the what's inside that iframe. the rest of the page seems only to be altered by the config or the uikit.
    Maximilian Franzke
    @mfranzke
    Bildschirmfoto 2020-06-03 um 08.11.14.png
    @hanna-bourke-tw modifying the logo part actually works fine, I've just raised a contribution for adding the missing parts for the manual: pattern-lab/patternlab-node#1214 - you could as well have a sneak peak for the relevant options: https://deploy-preview-1214--patternlab-docs-preview.netlify.app/docs/editing-the-configuration-options/#heading-theme
    hannah-bourke-tw
    @hannah-bourke-tw
    @mfranzke that's really helpful - thank you! the text change worked really nicely but we were struggling with trying to work out the logo - both the key and the value (a lot of the references within the config start from a different relative file!)
    Maximilian Franzke
    @mfranzke
    @hannah-bourke-tw, great, you're welcome. But I'm not understanding the latter topic you're mentioning and will contact you directly to figure that out.