To Which Are Added, Some Notes upon Using Fractal for the First Time

In the process, a few practises and utilities emerged that the team found interesting, so we thought it might be a good idea to share them here.

Variants

Using Fractal enables dynamic generation of variants. In most cases, simply specifying the variants directly works well, but sometimes you need more complex combinations. This library required a button component that not only needed the usual variations (large, block, etc) but each of these variants also needed to work with each of the 6 theme variants (primary, secondary, etc). Eventually, to help with this, I wrote a simple permutation helper (technically, a Cartesian product, but from a usage perspective, naming it permutations seemed more helpful) that takes arrays of classes and combines each value with every other.

Context generation

Creating a function to generate context for a component that may have many variants or may be widely used makes it easy to create multiples and variants, and to export that function to be used by other components that may need to consume it and create their own variants.

Container components

Some components are only concerned with the way in which they contain things, and are agnostic as to their actual content. Initially, I added representative content to these kinds of patterns, but quickly realised that this severely limits their re-use. Instead, add a block helper so that when the component is used in different contexts, it can wrap arbitrary content.

An example component in Handlebars named container-component.hbs might look like:

        <div class="ContainerComponent">
    {{#>@partial-block}}
        <h1 class="Headline Headline--main">Main Headling</h1>
        <p>Nullam aliquet</p>
    {{/@partial-block }}
</div>
      

It's important to check that the block exists first, as when Fractal renders the preview view of the component it won't have a block context and will throw an error. This example also has fallback content, again for the Fractal preview to have something to render.

UPDATE: Handlebars changed the way it renders @partial-block, so I've updated the code example above to reflect the new format.

To use the component would then look like this:

        {{#> @container-component}}
    <h1 class="Headline Headline--main">A genuinely useful heading</h1>
    <p>Some real content that is also genuinely useful</p
{{/@container-component}}
      

We've got lots of exciting things planned for Fractal in the New Year. Join us on the Fractal slack channel to share your experiences!