Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    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
    thomasaurich
    @thomasaurich
    Hi there, I am relatively new to pattern-lab and I am trying to figure out how to use the theme switch in my design. I would like to load an alternative stlye (dark mode) when the theme is on dark and a light css when the mode is light. Or do I miss a concept here?
    5 replies
    Marie Alhomme
    @pouipouidesign
    Hi! Coming back to PL after a while, I'm finding out (from reading the opened issues in github after having a parse error) that we can't use parameters when calling template parts, like organisms. How then should I customize classes or "versions" of a same block when including it multiple times in a same page? The doc still mentions parameters and I'm at a loss as to where to look to solve this issue which is blocking me right now :( Thanks in advance!
    2 replies
    awasem
    @awasem
    hello! I am wondering what the best way to add a css tab to the pattern info is? I currently have the default mustache & html tab but would like to add css and possibly more languages like swift in the future. What is the proper way to add more tabs here?
    4 replies
    Raghavendra Saralaya
    @numoonchld
    Hi everyone - I am on patternlab-node - I am unable to successfully import .js files from inside _sources/js in my _foot.hbs file - i get an Uncaught SyntaxError: Unexpected token '<' (at scripts.js:1:1) error in the console of the patternlab localhost server - any insights would be helpful
    1 reply
    welly
    @welly
    Hi all, started getting an error when I run npm run server: "error inside core index.js server serve: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined" - this is since updating patternlab to 5.17.0. Wondered if anyone has any suggestions? Thanks!
    1 reply
    Benjamin Rush
    @bnjmnrsh

    Hi all, Im new to pattern lab, and I’ve been going through the docs and website. I’m finding the ecosystem overview a bit confusing, and I was going to suggest an edit or two. I see the GitHub repo for the docs has been mothballed — is there a repo for the docs that I’ve not found?

    https://patternlab.io/docs/overview-of-pattern-lab's-ecosystem/

    4 replies
    thomic
    @thethomic
    Hey there!
    can anyone tell me, whether the amount of subgroups in pattern folders is limited or can be configured?
    I have eg "organisms > lists > ordered > style 01" and these folders and the containing elements are not listed in the LAB nav correctly.
    thanks!
    4 replies
    thomic
    @thethomic
    Is it possible to configure, which properties of a pattern are searched with the main search?
    Currently it seems that only the filename, no tags or descriptions are searched.
    thanks!
    1 reply
    awasem
    @awasem
    I need help getting pattern lab version 3.0.0 to run. I currently have version 2.02 running edition-node-webpack but I am having trouble installing the tab plugin with this version and in general would like to migrate to the latest version. I cannot even get the most basic 3.0.0 node edition to run and I have seemingly followed every step I can find on all the git hub pages. At this point I do not know what I am missing to get any of the commands to run I only receive errors. Willing to compensate anyone for their time if you could help with this. Thanks.
    Antonia Rose
    @soophie
    Hi everybody, I really love Patternlab and played with it for a couple of weeks. I have a maybe stupid question, but I couldn't find any documentation. I want to customize the Styleguide, e.g., moving the documentation out of the collapsed code-tab, separating general component from variants, and so on. I think I need a custom starterkit for this, but I am not sure how to start, where to put the files, and so on. Are there any documentations out there I couldn't find?
    1 reply