Global styling for elements?

Beta
#1

Is that something that’s on the roadmap? I’ve talked about it with Kyle and Matt a few times, and thought I read that it was coming in one of the future releases… but now can’t find reference to it in any of the status updates.

Basically, global blocks are great because you can make one change and have it reflected everywhere. But other than the content you can inherit from dynamic content, you can’t override the content of a global block when you put several of them on a page (unless I missed a change?). For example a few different buttons that link to different places…

And presets are handy if the layouts of your elements never change, and you only ever need to change font families or colors globally… but as soon as you need to update font sizes, weights, button corner radius, or any of the padding/margin controls, it becomes a nightmare to go through your whole site to find every instance of a particular element to update.

The new “paste style” will be SUPER helpful for speeding things up, but it would make things a lot smoother if we could have global styling options too, where we add an element to a page, set its individual content, and select the global master it’s going to inherit its styling from. (Essentially, linking things to a visual CSS styler?)

I know I could accomplish this with CSS, but you guys make tedious manual work so much easier in so many ways, and I’ve been procrastinating on doing that work.

#2

There is something in this new release (I’ve not tried it yet) where you can save a preset (for a row eg) and include all its child elements including content/styling… does that fit with what you want?

#3

My understanding of how that feature works is that it just makes it a lot quicker to get the existing preset functionality onto your page. So, rather than dragging in an element, then finding a preset in the dropdown, and then clicking apply… you just drag the preset you want right in.

It’s great, but still doesn’t help with the global styling I’m asking about (unless I’m missing something with it).

#4

If we did this, it would be alongside or after the Theme Options reboot. There are some technical challenges here. Notably, every element once created permanently saves a copy of its own values. There isn’t a straightforward way to inherit those from somewhere else. In the template manager, there’s an interface under the settings icon that will let you choose the default preset for any newly created elements. This is more of a lateral move though, and even less useful now that you can drag in presets directly. As it stands, you can globally work with:

  • Fonts - Changing a font in the font manager effects every instance it’s used in an element
  • Colors - Global colors are automatically updated
  • Font Size per breakpoint - In Theme Options you can set a different base font size per breakpoint which offers a great deal of flexibility if you use em and rem units carefully.

What will probably help is a combination of the following upcoming realities:

  • The Theme Options reboot will have very few styles added by default. There won’t be any opinionated stack styles to fight against.
  • The “toggle” (discussed on other threads) to turn off a style in general would allow fully disabling things like border radius. This makes it cleaner to use custom styles since there would be no generated CSS output.
  • Applying a CSS class globally, you could target certain elements and manage this in global CSS.

I know, I’m not really going past any of your own conclusions here, just fleshing them out a bit. Unfortunately I can’t promise we’ll ever have a way to have inheritance on more granular styles like that.

#5

Noted. Guess it’s manual CSS for now.

BTW, I come from the app design field, and design systems and component libraries are big topics. I’m particularly interested in this since it can help drive consistency and scalability, especially when creating a standard site template that would need to be modified for subsequent clients.

What I’ve pictured when I’ve thought about this is a section up near Global Blocks…

That when you click into, you have some sort of list of individual styles. Selecting one would let you customize it, similar to how you’d work on a global block…

Then, I was just imagining that the CSS from that style would get added to the stylesheet, and is updated whenever you make changes to it.

On the builder-side, I was picturing a super-simplified version of the inspector, where the only things you can change once you’ve selected a global style are content (text, images, links, etc.). Pretty much just like the “simple” version of the inspector.

But I’m approaching this purely from the “boy, it’d be nice” standpoint, not knowing how you’d build it, or deal with the UX complexity of having to help users figure out the difference between presets and global styles…

#6

Thanks for the additional context! That makes sense. Haha you’re definitely circling the main UX challenges (differences between existing features). I think the technical considerations here might even outweigh the UX ones.

Right now the lowest common denominator is an individual element. This is why presets must be applied to elements of the same type. We’d really love to lower the barrier because then we could allow things like saving a Button and applying the style to the toggle of a navigation element. Behind the scenes they’re both using the same markup and styling data shared as something we call the “anchor partial”. There are many of these partials. For example, the Card uses the same set of controls as a headline element - but it does so twice (front/back).

The other issue is solving it being “dynamic”. As it stands, all the styling controls for each element can only be updated when the element is saved (like the page, header, etc. you’re editing).

If we can identify a straightforward to lower the barrier to entry of sharing data across elements, it opens up some more possibilities here.

1 Like