How to work with Patterns


I have tried out the brand new Patterns plugin and can now share what I’ve leared from it. Maybe you work completely different? In that case I would like to hear your story as well.

I recommend you to first read about Patterns as well as looking at the video. Else you might get lost because I skip much of the basics in this thread.

When to use it

If you like to work with details and polish them to perfection, this can be for you. With Patterns everything is a module that you design independently of other modules. You bundle the php, css and js together to a pattern.

When to not use it

If you are in a hurry and time is against you and the project you are working on is small and don’t require maintainace. Then I suggest you go with the normal workflow (templates and snippets only). If you don’t like to learn anything new and just like the current workflow, there is no reason for you to change.


For me it was a very slow start. It takes time to learn and get used to. It’s not hard to get started but it’s a completely new way of thinking and get organized.

In the end, or later on in the process you save time instead. That’s because you have done so many clever things on the way, reused patterns for ways you did not think of before. Less code is also a reason for speeding things up later on.

Page objects

For me it has been helpful to often send a page with page('my-page') through the config called p.

P variable

I often send the $p variable to sub patterns.

Here is how the template looks like:

pattern('site', ['p' => $page ]);

And I can send that to the sub patterns as well:

pattern('site/my-pattern', ['p' => $p]);

I can’t name it page. For some reason it’s blocked. Therefor I think p is a good name for it as it already appear in the docs quite a lot.

Item variable

In the foreach loops I often use $items as variable, like this:

foreach( $p->children() as $item ) {
    echo $item->title();

Then I know that $p is a manipulated version of $page and $item is some kind of page item in a loop.

Using templates

You can still use templates when working with patterns. I do that alot.

In the template it looks like this:

pattern('site', ['template' => $page->intendedTemplate(), 'p' => $page ]);

In the pattern it looks like this:

if( $template == 'faq') {
    pattern('site/main/page/qa'); // Loading a sub pattern


It’s required to name the files and folders like this:


What I was missing was that these are the only two files that needs to be named this way. You can for example have a bunch of images not following this structure at all, like:


Naming of classes in css, scss etc

If a pattern is named my-pattern I always have a div with the same name as the pattern.

    a {
        background: red;

Then it makes it alot easier to know how everything works, even without fiddling through folders.


Before using Patterns I was planning to use BEM. If there is a really really large site, it could make sense to use it. That’s up to you.

What I find out in my case was that with Patterns you get so organized, so you may not even need use it. I don’t use it anymore. If you are not using BEM you will probably have less code which is easier to read.

When a pattern is a pattern

Sometimes it can be hard to know if some part should be a pattern or not.

Is a pattern - NO

Here is my personal opinion of what is NOT a good fit for a pattern:

  • header.php - All the stuff that is invisible in the header can not be previewed, so a such pattern is of no meaning.
  • footer.php - Same as header.php. Keep it as a snippet instead.
  • An element that can’t be by itself like a list item. A list item is never be shown outside the list. Therefor it make more sense to have the list as a pattern. A list can stand by itself.

Is a pattern - YES

  • Almost everything else.
  • You may think that the only things that needs a pattern are the ones you need to use more than once? I strongly recommend to do patterns of them even if they are used only once. It has other positive side effects.

Positive side effects

Isolated elements with patterns

If you build a site the normal way with templates and snippets and have three flags in the top menu (for changing language). Then you might add some padding or margin to it to give it some space to the menu. Later on you need to add the same flags in the footer. Then you need to hack away some padding, margins and maybe floating. That’s because the flags are not independent. They are built as a part of the menu. It’s very common but a big fail.

Doing the same thing with Patterns. That means that the flags will be a pattern and you will very early discover if you by accendent set a margin left that should not be there. You should be able to add a border around the flags pattern and it should contain the flags and not any wierd spaces or any other crazyness.

Instead of setting that margin on the flags pattern it’s better to set it on the menu pattern. Then the flags are still just flags. In the footer pattern you can now add the flags without any strange inheritance from the menu. The position and margins of the flags in the footer is set by the footer pattern.

More focus on details

Because a pattern is so isolated it’s both fun and easy to dig into details of that pattern. The site is not a big monster anymore.

Do things once and never again

As a web developer you often build things until they become too big and then you just restart from scratch. I feel like this finally can break that workflow. It feels more like polish and not start over from scratch.

Use patterns with other projects

If you are making more sites it will probably be easy to reuse patterns in a new way. Like you do with plugins but with patterns. Do one pattern one time and never again.

Share patterns with others

I’m thinking of a site for free patterns, or somehow share patterns with others. It’s possible because they are not, or should not have so much dependences. It’s not possible for all patterns, but for many,

Bugs and issues

I know I have reported alot of bugs and ideas on Github. It means that I fell in love with this way to work. It also think that it is already very stable to use at this state.

Thank you @bastianallgeier for your great work at this thing!


Thank you for this wonderful summary!

Since you can organize snippets into folders and send variables to them too, I was not sure if it really helps that much with productivity for a long time. But this post helps me enormously.

I’m still waiting for the “big” project to start using patterns, though :sweat_smile:

1 Like

Hi, Jens, thanks for sharing your experiences.

I started playing with patterns as well and I think, it’s a logical evolution to modularizing your scss files and using snippets extensively. With patterns, you get independent modules that you can more easily reuse because everything is in one location, the code and the corresponding styling.

1 Like

Thanks for sharing your experiences with patterns. I’m already very excited to try it out, as soon as I can!

But I still think, that BEM makes a lot of sense, at least when you’re nesting patterns. Imagine a pattern/module like this:


You’re easily tempted to use CSS like follows:

.callout a {
  color: red;

When nesting patterns, this can obviously lead to side-effects. It can also happen, if you use too generic class names, like .item, .image etc. For modifiers like .callout--red, you could of course use something like instead reduce your code without getting into trouble.

1 Like

Yes, that depends on the structure and the size of the site.

If I put it this way… The need for BEM was much bigger for me before I started using Patterns.

I also have some “dangerous” nested patterns like you describe:


On my site items are small images in the gallery and image is a large scale image pattern. Maybe not optimal for everyone.

However I can see that the patterns don’t collide just by looking at the pattern tree. If you have a larger site it could make more sense to keep working with BEM.

Patterns with BEM

If you want a more flat BEM structure in your Patterns folder it’s possible. I just tried it.This worked:


Then it’s just one folder. The benefit with it is that you can see all the patterns at the same time and they could never collide.

For me personally, I’ll go without BEM until I need it.

1 Like

You can for example have a bunch of images not following this structure at all

Interesting point. Do you think it’s better to have all assets, including images, in the patterns folders than in the site-wide /assets folder? I would think it’s hard to reference the right image URI if it’s coming from a pattern?

I’m waiting for the right project to use patterns, setting up a new build process seems to be the biggest up-front barrier for me.

You mean images to use in CSS (as backgrounds etc.)? That’s indeed difficult to do in a modular way. One way would be to copy these over in the build process, but that requires a special build process.

@samnabi @lukasbestle

Never link to the patterns images

You never link to an image in the pattern folder, even if you place images in the pattern. To use Patterns as intended you need to use some kind of task runner like Gulp or Grunt. That means all the css, js and images will be placed in the assets folder.

Assets as cache

The assets folder now work as an assets cache. You can clear it whenever you want and just resave some files to get it restored.

That also means that it’s easy to link from the css / scss file as well. They are both in the assets folder.

Assets structure

For me it creates folders like the hierarchy in the patterns folder, but if you want all your images put directly into just the images folder, I’m sure that’s also possible. It’s just a matter of how the task runner is setup. Then you need to think about having unique image filenames.

Assets or patterns folder

I see the pattern as a complete package of a specific task. To be complete, it needs css, js, php and images. Therefor I think that in most cases the images should be in the patterns.

Use complete patterns even in other projects

For example I have a pattern called flags. It contains php, css and three flag images. Then I can use this package in the menu, the footer and even in other projects.

Get started

In the Patterns docs there is a nice Gulp example of how to compile the pattern assets to the assets folder. It’s almost copy paste if you know how to run Gulp.

If you have never used Gulp, now is a good time to start, not just for Patterns.


That’s exactly what I meant. But as you and I wrote, it only makes sense with a task runner, so that’s a prerequisite to work with Patterns. But you are right, now is a good time to get into how they work.

1 Like

I added some information on Github about how I work with base patterns and child patterns…

Base pattern

  • I create a button that has some default styling, maybe just a gray button.
  • It contains basic styles in the scss / css. No extra colors.
  • It receves parameters from the child pattern, like div class names.

Child pattern

  • I create a child pattern for every button variation.
  • Every child pattern has a scss / css that only contains colors etc.
  • The child pattern calls the base pattern and send parameters to it.


Base patterns recive div class names and other parameters but does not style them. It contains base scss / css.

Child patterns send div class names and other parameters to base pattern and contain only colors etc in the scss / css.