Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    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.
    Kriel-nl
    @Kriel-nl
    Hi there, does anybody know if it is possible to refer the same markdown file to different variations of a pattern? E.g. a button.md applies to the button.twig and to the button-red.twig
    Maximilian Franzke
    @mfranzke
    @Kriel-nl does your request depend on the description or other entries of that markdown file as well ?
    Kriel-nl
    @Kriel-nl
    Hi @mfranzke, thanks for your swift reply. Sorry but I don't really get your answer? We have the following setup:
    image.png
    It is all based on one button macro and we would like to keep the documentation in one place to keep it clean.
    Maximilian Franzke
    @mfranzke
    @Kriel-nl , okay, thanks for that clarification. What I meant by the other entries is that the markdown files could include a title, a description and some more keys (state, order, hidden, links and tags / compare to https://patternlab.io/docs/documenting-patterns/).
    I assume that you are mainly using the description and probably the title within those files.
    In that case, you could set up a button.md file one level higher (next to the buttons folder) and than it would get displayed at the top of the "View All Buttons" page, but not in each patterns description, even though that this might fit your needs (you would probably need to rename the folder from "buttons" to "button" as well).
    Maximilian Franzke
    @mfranzke
    Additionally as I'm the node edition user instead of twig, I'm not totally sure whether twig works the same, but in node you could easily set up variations as pseudo-patterns: https://patternlab.io/docs/using-pseudo-patterns/
    Kriel-nl
    @Kriel-nl
    @mfranzke okay, thank you very much for your answer(s)! I will try setting up the md file next to the component file. Thanks again!
    Randall Kent
    @RandallKent

    Using gulp to build, recently experiencing an issue with the build hanging @ Starting 'buildPatternlab'....

    /**
     * Build Pattern Lab.
     * @param {function} done callback function.
     * @returns {undefined}
     */
    function buildPatternlab(done) {
      patternlab
        .build({
          cleanPublic: config.cleanPublic,
          watch: false
        })
        .then(() => {
          done();
        });
    }

    Curious if anyone has thoughts as to why it's hanging or perhaps guidance on increasing the verbosity of the log.

    Rikke Perriard
    @perriard
    Hi everyone :-) -does anyone know if it is possible to show info about "imported macros", the same way as it shows info about "included patterns" in the PL-drawer info panel?
    ThemeBlust
    @ThemeBlust_twitter
    Sorry for my stupid question, but I really don't know how to completely delete pattern lab from a project. Who can help a newbie?
    imbwaldo
    @imbwaldo
    Any chance there'll be a Pattern Lab integration with Statamic's Antlers template language?
    .
    @csrcreative_twitter

    Hola. Is anyone familiar with a PL implimentation that doesn't use a templating engine?

    For my use case I would love to just be able to write with php files using php vars like so:

    <div class='card'>
        <?= $image; ?>
      <h3><?=  $title; ?></h3>
        <a href="<?= $permalink; ?>">
          <?= $cta; ?>
        </a>
    </div>
    Vernon Fowler
    @vfowler_twitter

    Where do we add CSS rules for the styleguide that will appear consistently when viewing several patterns or an individiual pattern?

    Some rules I've added to source/css/pattern-scaffolding.css work fine when viewing several patterns (eg /?p=viewall-atoms-tokens) but don't appear to load when viewing an individual pattern (eg ?p=atoms-brand-colors).

    Inspecting in browser dev tools shows CSS rules (when viewing an individual pattern) from /styleguide/css/pattern-lab.css - This is in /public and does not exist in /source

    2 replies
    Saro
    @SaroGFX
    Hello, just started working with PL
    I found how you can rename patterns within the folder by giving it a title in the .md
    but it copies the name of the folder for the menu
    so if I have message_box it will show like Message_box in the navigation
    how can i change it to Message Box without changing the folder name?
    1 reply
    awasem
    @awasem

    Hi, super new to this and wondering why all the video I find use node-edition-gulp but that is archived. I don't know how to run the thing, and the documentation just says

    "Watching for Source File Changes

    Manually generating the Pattern Lab website after each change can be cumbersome. The Node version of Pattern Lab comes with the ability to watch files in the ./source/ directory for changes and re-generate the site automatically. The Pattern Lab website can also be automatically reloaded.."

    Where do I find any documentation on how to do this without the gulp version?

    21 replies
    Maximilian Franzke
    @mfranzke
    Are you using nvm (https://github.com/nvm-sh/nvm)? It‘s much easier to switch in between different node versions.
    try „npm i @pattern-lab/edition-node“, and see where the installation starts to „hang“ in that installation process. Mine was (reproduceable) no-emit-webpack-plugin
    8 replies
    awasem
    @awasem

    Still trying to get something I can work with,

    I have now successfully installed both the vanilla pattern lab (using npm create pattern-lab) as well as the generator starter kit (https://github.com/weareyou/generator-patternlab-starterkit), but I am still struggling to use either in a functional way.

    with the vanilla version I am able to install it successfully, but still unable to get the browser sync going to actually run it, I am attempting to use commands like npm patternlab:serve, or npm run start neither of which open a browser.

    with the generator version the browser opens just fine and I can play around with the patterns there. But the use of the supple framework is a little out of my league and I am having trouble simply creating and using styles with it. Are there any resources you can suggest that have information on how this works supple works within patternlab?

    2 replies
    Andrea Parent
    @byaparentdesign_twitter

    Are there more examples of integrating patterns out there beyond what is on https://patternlab.io/docs/including-patterns/? I am editing a pattern lab someone else set up and having issues importing some patterns into the larger pages. Sometimes it requires a json file and sometimes not. Wondering if there's something simpler I've missed?

    {{#containerLabel}}
    <label>{{containerLabel}}</label>
    {{/containerLabel}}

        {{#dropdownMenuMultiple}}
        {{>atoms-dropdown-menu-multiple}}
        {{/dropdownMenuMultiple}}
    6 replies
    awasem
    @awasem
    What directory is the proper place to put .md files for re-ordering pattern groups. I am having trouble getting the main groups i.e. atoms-molecules-organisms-templates-pages to render in that order.
    3 replies
    awasem
    @awasem
    Is there a way to place a {{patternName}} using data just as I would use "src": "../../../assets/images/icon.svg"? I have made svg's into different patterns by placing <svg> code directly in via html and set the fill:currentColor this way the .svg will take on the color of it's parent container. I am trying to figure out how to use a .json to dynamically place the patterns like I would an image. Or if there is a better way to use svg's and be able to color them any help would be greatly appreciated.
    4 replies
    awasem
    @awasem

    When trying to run vanilla install it keeps asking me for uikit-workshop, I can confirm it is in the package.json dependencies as well as in the node folder @pattern-lab/uikit-workshop. Any idea why it is not finding the package?

    % patternlab serve
    ⊙ patternlab → serve: Serving your files …
    Pattern Lab Node v5.15.0
    Pattern Engine handlebars: good to go
    Pattern Engine mustache: good to go
    Could not find uikit with package name @pattern-lab/uikit-workshop. Did you add it to the 'dependencies' section in your 'package.json' file?

    2 replies
    awasem
    @awasem
    using (https://github.com/Comcast/patternlab-edition-node-webpack) css changes not reflected in build, i'm thinking b/c sass is not being compiled due to patternlab not including these tasks by default any longer.

    found this (https://stackoverflow.com/questions/31032265/sass-is-not-compiling-with-patternlab-node) seems like patternlab 2.0 does not include tasks to compile scss, link to brians' comment (www.brianmuenzenmeyer.com/adding-common-gulp-tasks-to-pattern-lab-node) is broken, found it in wayback machine but the described solution requires gulp which I think is not included in this comcast build linked above. How do I get the css to work with this build (the only version of 2.0 I can successfully install)?
    Erik Mogensen
    @mogsie

    I've understood from reading various issues and comments here and there that the direction patternlab is going to avoid adding syntactic sugar to templating language. For example, the "shorthand syntax" in favour of using real twig namespaces. This to make the templates more portable. I've been a big advocate of using the same templates in the patternlab as in production, and we've essentially tried to reimplement the shorthand syntax whenever we needed it, so I welcome this direction.

    However, the documentation (for example on including patterns) doesn't say anything about this deprecation; is that just an oversight?

    2 replies
    Rikke Perriard
    @perriard
    Hi all, I'm trying to set the ishViewportRange to fixed sizes, but unless I set the second entry in ishViewportRange.l to something large, the "full view" won't actually be full view. Is this a bug or expected behaviour?
    4 replies