The docs talk about the power of using the Template tag to create websites based on Atomic Desing principles, but there’s no info on how this would be done in practice.
If I am understanding this right, it would involve creating many smaller templates that make up the structure of the Atomic Design approach:
Atoms
Molecules
Organisms
Templates
Depending on how fine-grained you wanted to get, each level would be calling elements from a lower level using the Template tag until you had a final template ready for use in a Tangible Layout or a Page Builder.
It seems like having hundreds of Atomic templates would be difficult to manage in the current version of the plugin unless there is a way to call just part of a template so that many Atoms, Molecules or Organisms could be stored in a single template.
Am I missing something or will this be better supported in future versions of the plugin? It would be great to see an example website using Atomic Design in the future.
You can call only a part of the template by passing locals. So this works pretty nicely.
Also you can call templates without running them in this special environment by using <Exit /> & <Catch />.
This enables you to create global “functions” and call them from other templates. Or to load templates global and decide based on the context if it should be rendered or not.
Atom:
I created a small template just outputting a symbol for the selected language for a menu. Here I can add code that considers the environment the template runs and change the way its build based on the device or local values passed from any other level.
Molecule:
I added this template via a shortcode into a menu (This could be as well another template). Here I can already pass the first locals to change the way the atom behaves.
Organismus:
I created a template calling this menu and adding other parts like logo to create a header. More locals can be implement to control atom and molecule.
Template:
I call this header in a page template adding locals to create the right header in the right place.
That’s basically what an atomic approach means - reuse of smallest part to secure the same functionality across browsers and resolutions. Also it makes development in larger teams easier, as everybody has only to secure that his part works as expected.
@PolarRacing that’s a fantastic explanation! I’m actually working on an improved interface to allow control creation within templates so that local variables are a little easier to work with (especially in cases where specific values are expected) which I think will make the whole process of using nested templates easier to wrap your head around. Here’s a little sneak peak of the mockup:
Thanks for the info peeps, but as someone who currently writes basic HTML/CSS to achieve certain goals this is going over my head. The concept is easy enough to understand but I’m unclear on how to write this up in the templates.
The docs say the Template tag is:
one of the most underutilized tags but also one of the most powerful.
This might change if the docs are updated with some examples of how best to use the L&L with Atomic Design principles. I know that if I attempt this and get the foundation wrong it will just turn into a mess I am constantly fixing up.
It depends on the project how much such an approach makes sense.
If you just build fairly simple websites, its an overkill.
But if you use like 6 different content types, 20 ACF repeaters and want to mix all that data on one page, atomic helps you to keep your project manageable as you just have to concentrate on a small piece of code instead of revisiting all the code you have.
Indeed, I have seen full Atomic Design applied in a corporate environment, and it was expensive to implement but saved money over time. There is a balance to find depending on the current size of the website and how much it is expected to evolve.
Yes, even for small websites there is a need to make some elements reusable or the effort required to update them quickly becomes excessive.
Perhaps a good rule of thumb is if the element E.g. Post Item appears on more than two pages it should live in its own template and be called using the Template tag.
It sounds like the issue you’re describing doesn’t really pertain to local variables or nested templates, but to the basic syntax of L&L. If you’re getting tripped up about that, you might want to brush up on the syntax of L&L by reading through this page of the getting started guide, specifically the paragraph “Writing dynamic values of an attribute or parameter.”
The gist of it is that, just like in HTML, in L&L you can’t write tags inside tags (e.g. the break tag in <img src="image.jpg" alt="hello <br /> world" wouldn’t actually be interpreted as a break tag because it’s inside another tag). So because that syntax isn’t possible, there needed to be a way to render tags inside the attribute value of other tags in L&L. So we invented the curly brace syntax which is just about the only thing that makes L&L syntax different than HTML. Whenever you want to use a tag inside the value of an attribute, you swap the <> for {}. Let me know if you think the documentation page I linked above isn’t clear enough on this and I’d be happy to rework it to make that clearer.
Also, for everyone else in this thread, I’m working on a video and blog post that’ll demonstrate an example of how we’ve used atomic design principles with L&L in our builds, so I’ll post about it on the forum when that’s published.
