Extending Blockhead

Two advantages of using an atomic class system are that you can 1) edit components on a per-page basis without having to manage an opaque system of subclasses & 2) easily edit type, colors, & spacing across the site by updating a utility class. The downside of this is that a re-used component might need to be updated individually across multiple pages if the design changes. This can be mitigated in some instances by converting the component to a Webflow Symbol & using content overrides, but this isn't always practical if, for instance, the design of the content inside the component varies across implementations. In these instances, the Merge Combo Class feature of Finsweet's Webflow Extension is oftentimes the best solution, creating custom classes like Card Wrapper that share the properties of the atomic classes (and therefore the variables), but can be edited at the class level.

Note: Avoid merging Column classes if there is an offset class applied to the Column Wrapper because an external stylesheet adjusts these columns, & will no longer apply to the new, merged class.

Blockhead's atomic class suite covers common use cases, but is not comprehensive. Inevitably, you'll find yourself needing to add new utility classes to the system. For the most maintainable build, there are a couple of best practices for extending the system.

For new custom classes, such as a Section Label, there may be no need to deviate from the built-in type system. One way to achieve this while maintaining flexibility is to combine Section Label with Text S (or Text M or Text L). But if that flexibility isn't needed, it may make sense to duplicate Text S to use as the basis for Section Label, which would inherit the connection to the Text S variables & its calc functions across viewports.

For new utility classes, such as Padding Y - 2px, it may be necessary to use the CSS Styles Reorder feature of Finsweet's Webflow Extension to move that class up into its logical grouping (amongst the other Padding Y classes) in order to ensure that it doesn't disrupt the overriding hierarchy of the styles system. It's also important to declare the values across all necessary viewports (all viewports for desktop, tablet + mobile landscape for tablet, & mobile only for mobile).

Some sites may require multiple layout types within the same project, demanding a need to divert from a global variable. For instance, a site may require a Page Gutter of 80px for most pages, but may have a section that requires a Page Gutter of 0px. One solution would be to create a Page Gutter Alt variable & apply it to a Section Alt class. But a shortcut is to create an HTML Embed symbol that overrides the variable on a per-page basis. This code would look something like this: html { --page-gutter: 0px; --page-gutter-tab: 0px; --page-gutter-mob: 0px; --page-gutter-max: 0px; }.

‍