1.3.0
I have observed numerous instances of confusion and misconceptions surrounding this topic. In this article we’re going to cover design part of Breakdance builder in context of the scaling design and how it could be scaled at each stage of Atomic design principles.
Before we begin, if you have fewer than 10 unique pages/templates, you may not encounter scaling issues. When you find yourself needing to make changes in two places, it’s often better to create a new design, copy and paste, and update the content. For smaller projects, it may not be necessary to focus too much on scaling, as they may not require scaling at all. We don’t need to create problems that may arise in the future. Instead, we can have a strategy in place and make modifications only when a genuine need arises.
In this tutorial we’re going to use interpretation of the Atomic design by Brad Frost as reference guide to explain different levels of the site organization and how they could be scaled. When we are talking about scaling we need to understand different levels which we are scaling and needs at each.
Disclaimer: Also while we’ll use lot of the principles from Atomic design, this article will deviate and won’t be fully aligned as we think that Atomic design is brilliant mental model to think about site structure, some thing like when we have regular button if we add icon than it is no longer atom rather molecule as atom would be smallest meaningful piece which could not be broken further, and icon button would be composition of two atoms (icon + button). For sake of easier representation we may interpret some things differently to make article easier to consume. But we encourage everyone to read Atomic design it is great basis to create own logic, it is fine to simplify own mental model also.
Sub-atomic part would be CSS variables, they are basis for creating own scalable theme, but they don’t represent actual meaningful elements, they are rather used to
Breakdance does offer global settings for colors and typography which will cover lot of the projects. It is made to handle things in simplistic way, easy to use for someone who starts with the tool without making things overly complex.
Want to do sub-atomic more at scale? Sign up for a free account and download our HeadspinUI Copilot plugin, created for rapid sub-atomic configuration, fluid typography and spacing generation, dark mode theming, and extensive customization options. It’s completely free to use, and if you enjoy our work, you can upgrade to a membership for even more exclusive content.
Breakdance manages the global styling of atoms such as buttons, form inputs, containers, and WooCommerce elements. Therefore, nearly all elements that can be scaled are covered for simpler sites.
What if you need more complex combinations? With Breakdance 2.0 and the introduction of presets, you can further scale as you prefer. Presets function as global styles per element, allowing you to create presets for each element and manage them globally.
With Breakdance presets, we can create a cohesive global style for each element within a molecule and establish an internal naming convention for easy reference. By using the naming convention moleculeName-atomName, we can effectively scale any static data that might arise in a simple project. It’s important to note that many elements in Breakdance are already considered molecules, such as buttons with icons. Therefore, with presets, we are also able to control molecules. It is impressive that we have already addressed three levels of scaling.
It is important to note that a Breakdance element can be an atom, molecule, or organism. All elements have the option for presets, enabling scaling at all these levels. For instance, a text element represents an atom, a button with an icon is a molecule, and a testimonial is considered an organism as it is composed of atoms and molecules.
When discussing organisms, we can utilize the presets pattern to manage design scaling. This can be achieved by incorporating complex elements such as testimonials or by creating custom cards, using multiple atoms and molecules, and assigning preset values to each of them.
Unlocking the true power of WordPress and Breakdance involves harnessing dynamic data. By creating global blocks with presets, we can implement scalable design across the various dynamically placed cards on our site.
We could use Element studio and make custom elements for clients which would give them some preset values on click to setup organism. This is advanced concept as it require some technical skills, but it is also powerful option to have in mind if we would give specialized design blocks to clients, also we could make static options and give client options to connect dynamic data so it could handle both use cases.
The Elements Studio does not require React skills; you can explore and learn from a vast library of native Breakdance elements and use any element as a starting point for creating your own. Often this tool will generate code boilerplate which you could use with some own logic to create customized elements for particular site.
From version 1.0 Breakdance has powerful template system which you could apply to anything. Some common examples would be product and post templates where you could scale consistent design of whole blog/store by making templates. For example we have 1000 posts
We could even go with route that we use Breakdance as template engine, and handle content mostly outside of Breakdance by setting up repeaters and things like that. This is more systematic and time consuming approach but in theory we could premade designs and make whole separate interface outside Breakdance and use Breakdance to render these templates.
We have all needed tools to scale out design and make granular in maintainability as we want. We could use just static designs for simple sites, and we could go with almost full separation of the content and design if we want in some more complex projects which could greatly benefit of using templates in creative fashion.
We think Breakdance in current form does not have big issues around scaling designs, only thing is that we need to be creative and see how we could use existing features and take full advantage from them.
And if we could scale at sub-atomic level, atom, molecules, organism and template parts, and I think this articles explains at each stage at least one option which you could utilize to handle scaling than it could make designs at scale.
Personally, I have engaged in several debates about this topic in the comments on social networks. Often, people tend to want to drive Breakdance in reverse gear and claim that it is a problem with the tool because it does not align with their established mental models. They wrongly blame the tool for this reason. To draw a parallel, it’s like being a fan of diesel cars and purchasing a gasoline Honda with a beautiful VTEC engine that produces 100hp per liter. Then, you put diesel fuel in the tank and blame the car for not performing correctly.
Are there rooms for improvement? As everything evolves over time, there is always room for improvement and innovation. However, that does not mean there isn’t a solution available right now to address most of the problems that we may encounter.
