1

I'm pretty new to Pattern Lab, but I feel like if this isn't a feature, it should be.

Essentially, I want to model Pattern Labs after a real site. In most (or many) real sites it's common to use a templating engine. This is true of any mainstream technology I've used (rails, django, ASP.Net, or node with handlebars) to manage the view layer. I'll use handlebars in this example because it most closely mirrors the Pattern Lab mustache syntax.

One of the big powers of templating engines is building a base layout, which may include <html>, <head>, <meta>, <body>, {{> header }}, and {{> footer }}. Then, you have blocks of dynamic content like {{{ body }}} or {{ title }}.

Pattern Lab does a really good job at taking care of the dynamic {{ title }} variable using _data.json, page specific json, or parameters. However, in order to make the whole content of the body dynamic you'd have to write everything in the json file, or pass it via pattern parameters. But this would limit your content because you can't pass other partials as parameters or store them in json.

Another option could be to create a bunch of pseudo patterns for example:

<div class="main-container">
{{> organisms-header }}
    <div class="page-content">
        {{# first }}
            {{> organisms-first-page }}
        {{/ first }}
        {{# second }}
            {{> organisms-second-page }}
        {{/ second }}
        {{# third }}
            {{> organisms-third-page }}
        {{/ third }}
    </div>
{{> organisms-footer }}
</div>

But then you'd have to nest every page that you wanted to use.

Hopefully this helps and is relevant. Hopefully I'm just missing something super blatant :)

Adam
  • 157
  • 1
  • 2
  • 9

2 Answers2

4

Brian - maintainer of Pattern Lab Node here. I'll try my best to speak for Pattern Lab in general, but my most thorough familiarity is in the node version.

Pattern Lab utilizes templating languages yes, to build up the hierarchical patterns which harness the atomic design principals it was intended to support. Pattern Lab, however, is not a full-fledged templating engine that has the dynamic body injection you mention, ala Jekyll or ASP.NET.

Your assessment of peudo-patterns is not exactly, or at the very least, not necessarily as complex as you make it. If you look closely in that doc, you'll see that individual .json file variants are what create separate instances of the same template or page.

So instead of 

   {{# first }}
        {{> organisms-first-page }}
    {{/ first }}
    {{# second }}
        {{> organisms-second-page }}
    {{/ second }}
    {{# third }}
        {{> organisms-third-page }}
    {{/ third }}

you could do

        {{> organisms-page }}

and then dynamically swap in the date for individual pages. But again, this is really for design and development, not a production configuration, unless you engineer something to serve these results up the way you like it. Imagine if a file like https://github.com/pattern-lab/patternlab-node/blob/master/source/_patterns/04-pages/01-blog.json was an actual blog post, with any sibling blog posts similarly named 123-blog-post-name.json with data swapped out against the blog template. Hope that explain it a bit...

A final note I have outlined how I used Pattern Lab to design, build and maintain a production Jekyll site here: http://www.brianmuenzenmeyer.com/using-patternlab-to-design-build-and-maintain-a-website/. It successfully marries the design/modularity benefits of Pattern Lab with the execution of Jekyll/Github Pages.

The secret sauce is utilizing pattern exports (detailed in the article) to work with jeykll includes. Here's an excerpt of my layout file:

<body>

{% include organisms-header.html %}

<main role="main">
  {{ content }}
</main>

<footer>
  {% include organisms-footer.html %}
</footer>
...
</body>

So, not perfect, but I believe I can speak for Brad and Dave in saying that Pattern Lab is not meant to be an operational layout platform for production sites, and it's dynamic content delivery works withing the context of substituting .json files against hierarchical templates + partial sets.

Brian Muenzenmeyer
  • 1,026
  • 1
  • 7
  • 17
  • 1
    URL of that article no longer works with the trailing slash, but the article is still available here: http://www.brianmuenzenmeyer.com/using-patternlab-to-design-build-and-maintain-a-website – Pascal Aug 24 '16 at 10:57
4

This is more of an issue with Mustache than it is Pattern Lab. The PHP and Node editions are just using the Mustache libraries for each language respectively. Unfortunately, in the official spec there's no concept of layouts. Pattern parameters are implemented outside of Mustache itself.

As the PHP and Node editions become more modularized I think we'll see layouts come to Pattern Lab from template languages that support that natively. For example, there is now a Twig edition of the PHP version of Pattern Lab. It uses "extends" as a way of working with layouts. Sorry, I don't have enough rep to post a link to an example.

So in a sense it's a feature that's coming but it's not something that is being implemented by the Pattern Lab team directly. FWIW, I think layouts implemented this way work against the principles that underpin Pattern Lab but it's up to developers to figure out how they best want to use the tool.

Dave Olsen
  • 41
  • 1