Making Atoms Easy with Macro Renderings
In previous posts, we have discussed how Snippets can make your life easier. Well, there’s another feature we’ve added to Brainjocks SCORE to make using Snippets easier even for the most novice content administrator – macro renderings.
Atomic design provides flexibility for user experience and empowers content authors to change not only content but presentation variances with ease. However, it also breeds complexity for those content authors.
If building a header takes 5 components instead of 1, are we really making the content team’s job easier or harder?
Sure, we’re removing their dependencies on the engineering team to handle variances, but we’ve added a lot of extra steps in their work to perform even the most simple task. How can we retain the flexibility of handling all of the variances for these patterns of user experience while also making it simple to build these patterns into pages?
Building a Pattern Library
In previous posts, we have discussed how you can use the snapshot tool to capture these patterns into a Snippet. As you identify common, reusable patterns in your UX and design, this is a simple way to build (or extract) a library of patterns.
If you are lucky enough to be working with a design team that understands these principles, you can design the UX for the site with this in mind. For more on this practice, go to the source! https://patternlab.io/
Using Patterns via the Macro Rendering
Once we have captured these patterns as Snippets, we can treat them as “virtual components” by using the macro rendering. The macro rendering is a simple way to place the pattern on a page – and even include some boilerplate content.
Highlighting Common Patterns
Once we have captured our pattern, if the pattern is useful enough, we can “wrap” the pattern into a rendering to make it easier to use. This is super simple – just define a macro rendering.
Instead of specifying a view cshtml or controller rendering information, you simply supply a datasource (Snippet) for the “rendering”.
Save and add to placeholder settings
Now you have a truly virtual rendering. The content authors don’t have to know (or care) that this is a macro – they add it to the page and make whatever adjustment they want to the result!