I am currently exploring Builder.io’s visual editor.
I was wondering if there is a way to set base design tokens (e.g. color, padding, and margin scales) and how to apply these tokens to the built-in components (e.g. all buttons should have X color, Y padding, and Z border radius).
It seems that the visual editor’s default components make assumptions about styling (e.g. all new buttons are blue by default, regardless of whether they have been restyled before). Is there a way to override this globally for defaults or do we need to rely on custom components and symbols to achieve this functionality?
Hi Dustin! This is an amazing question. As our editor works now, the absolute best way to create and maintain styles is by styling your component, then saving it as a template. Additionally, you are able to turn off the default margins and padding in your account settings (under Account > Space > Advanced Settings). This experience is something we are evaluating internally, and hope to make significant improvements to it in the future.
Please, don’t hesitate to help us find ways to make themes and design better within Builder. Our feature request category is open for ideas to help us fuel our development efforts, so feel free to ask for features that you already love from other services, or share an idea of your own.
Along the same lines of the OP, I noticed there’s a place in styling to set CSS class or ID. Do you have a help doc on that? Can’t that be used to set a design for a button and assign it a class, then everywhere on the site wherever else you apply the class it will take on the same design?
Hi @pageperfect , yes you can define your CSS classes by clicking the ‘Edit Custom JS/CSS’ button in the Data tab. Then just apply your class in the Style tab of the component you want to style.
Perfect, that’s what I needed. Thx
Also, is there the ability for multiple/separate style sheets in Builder, or is it all within the one CSS/JS editor?