When we install the Breakdance Element Extension, it will not only add over 130 new elements but also add a Global Settings panel option.
While this is a very convenient feature in Breakdance, it is less necessary in Oxygen because we can create our own CSS global settings manually, using our own CSS variables.
But the main problem is that the Breakdance elements rely on the Global Settings, while the Oxygen built-in elements do not.
What is the difference between these two types of element?
The first image comes from the Oxygen Text element, and the second image comes from the Breakdance Heading element:
One of the main differences is that the Breakdance element comes with a Design panel, where we can easily change the style of the element without adding a class or any extra code. Each Breakdance element has its own set of design options to stylize.
With Oxygen elements, we must add a class in order to style the element. And they all have the same set of options.
So what is the issue exactly?
The Global Settings feature is designed to work only with Breakdance elements.
But we can still make it work with the Oxygen elements!
Global Colors
This is what we SHOULDN'T DO:
While it will works totally fine with all the Breakdance elements:
These colors won't be available for the Oxygen elements:
Solution 1:
Instead, we can create our own CSS variables:
And use these CSS variables in the Global Settings:
Solution 2:
Or we can use the same CSS variable that Breakdance uses for its Global Colors. It will overwrite their default values:
The CSS colors from the Global Settings are:
--bde-brand-primary-color: var(--blue-500);
--bde-brand-primary-color-hover: var(--blue-600);
--bde-body-text-color: var(--grey-700);
--bde-headings-color: var(--grey-900);
--bde-background-color: var(--grey-50);
--bde-links-color: var(--bde-brand-primary-color);
--bde-links-color-hover: var(--bde-brand-primary-color-hover);
That's because the variables.css file is loaded after the global-settings.css file. Therefore, the CSS variables with the same names will be overwritten.
Note that these colors will not be available in the Color Picker of the Breakdance elements, but we can simply add the variable instead:
Global Typography
Here are the CSS variables that the Global Settings use for typography options, with their default values:
--bde-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--bde-heading-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
--bde-base-font-size: 16px;
--bde-body-font-size: var(--bde-base-font-size);
--bde-font-size-ratio: 1.250;
--bde-h6-font-size: var(--bde-base-font-size);
--bde-h5-font-size: calc(var(--bde-h6-font-size) * var(--bde-font-size-ratio));
--bde-h4-font-size: calc(var(--bde-h5-font-size) * var(--bde-font-size-ratio));
--bde-h3-font-size: calc(var(--bde-h4-font-size) * var(--bde-font-size-ratio));
--bde-h2-font-size: calc(var(--bde-h3-font-size) * var(--bde-font-size-ratio));
--bde-h1-font-size: calc(var(--bde-h2-font-size) * var(--bde-font-size-ratio));
So once again, we can override these CSS variables by adding them in the Variables panel.
Note that these variables are already used to style the headings and the global font style (see the Global-settings.css file)
Global Containers
The Global Containers is a setting that works only for the Breakdance Section element.
Remember, Oxygen has a Container element, Breakdance has a Section element & a Div element.
This section also uses CSS variables, that we can also overwrite easily :
--bde-section-width: 1120px;
--bde-section-vertical-padding: 100px;
--bde-section-horizontal-padding: 20px;
If you don't plan to use the Section element at all, you can skip that part.