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 SCORE to make using Snippets easier even for the most novice content administrator – macro renderings.

The Opportunity

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.

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

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!