25-Jun-2024

How to Set up Oxygen Builder

Best Global Settings (Automatically Responsive!), a set-up that uses the "clamp" CSS function to calculate the best font sizes for the viewport width.

The settings are done in Oxygen's global settings. You get fully responsive heading sizes, section paddings, and more (with zero CSS classes on elements)! Using Oxygen Builder it's important to set up a solid, clean, efficient foundation to work from. Oxygen's installed setup is limiting, but this is overcome using clamp, a very useful CSS function.

The Video

Colours

Oxygen allows you to create site wide colours, each with its own name. Rather than using a name that reflects the colour, it's better to use a name based on the colour's function. For example:

baseThe main colour of the website.
base ultra lightLighter version of the main colour.
base mediumMid-version of the main colour
accent
primary hover

Fonts

Use the fonts requested by the client. If none requested, choose one or two styles. To keep the website efficient, only load the font weights required.

Headings

These are vital to get right for the website to look good on all devices.

Set the base font from 16 pixels to 10 pixels (62.5% of 16 =10) by using the following CSS:

/*  Base set to 10px; */
html {  
     font-size:62.5%;
}

Because the base font size is now 10px, setting a font to 2rem will be 20 pixels. Note that the editor's font may be now too small to use. To fix this, add the following CSS:

.editor-styles-wrapper {
    font-size:1rem;
    font-family: Roboto;
}

Width and Breakpoints

It's recommended to use 1280px for the page width. Using the CSS clamp function, the font sizes can be optimised for any screen size.

Using the clamp calculator at https://websemantics.uk/tools/responsive-font-calculator/, the figures below are an example to use in the calculator from. The viewport size is set from 32 rem to 128 rem. The 128 rem comes from dividing the page width size (1280 pixels) by 10, the base font size in pixels. The sizes below come from the video, but there are others that would work well too. The fields selector and property do not matter, as we only want the clamp function and its contents.

To use the clamp function, it must now be pasted into Oxygen Builder.

Under Oxygen/Settings/Global Styles/Headings for each heading size, set the font-size field to "none". Next, copy and paste the clamp function and its contents, for example for H1, clamp(1.4rem, calc(1.4rem + (1.8 - 1.4) * ((100vw - 32rem) / (128 - 32))), 1.8rem); into the font-size field.

The paragraph font size is set under Oxygen/Settings/Global Styles/Body Text in the same way as for the headings.

The longhand column shows the calculations behind the final result, and they are not needed for Oxygen.

SelectorMinMaxLine HeightClamp CalculationLonghand
h13.24.81.3 remclamp(3.2rem, calc(3.2rem + ((1vw - 0.32rem) * 1.6667)), 4.8rem);clamp(3.2rem, calc(3.2rem + (4.8 - 3.2) * ((100vw - 32rem) / (128 - 32))), 4.8rem);
h22.83.8clamp(2.8rem, calc(2.8rem + ((1vw - 0.32rem) * 1.0417)), 3.8rem);clamp(2.8rem, calc(2.8rem + (3.8 - 2.8) * ((100vw - 32rem) / (128 - 32))), 3.8rem);
h32.43.2clamp(2.4rem, calc(2.4rem + ((1vw - 0.32rem) * 0.8333)), 3.2rem);clamp(2.4rem, calc(2.4rem + (3.2 - 2.4) * ((100vw - 32rem) / (128 - 32))), 3.2rem);
h42.22.8clamp(2.2rem, calc(2.2rem + ((1vw - 0.32rem) * 0.625)), 2.8rem);clamp(2.2rem, calc(2.2rem + (2.8 - 2.2) * ((100vw - 32rem) / (128 - 32))), 2.8rem);
h52.02.2clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 0.2083)), 2.2rem);clamp(2rem, calc(2rem + (2.2 - 2) * ((100vw - 32rem) / (128 - 32))), 2.2rem);
h61.41.8clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.4167)), 1.8rem);clamp(1.4rem, calc(1.4rem + (1.8 - 1.4) * ((100vw - 32rem) / (128 - 32))), 1.8rem);
p1.41.8clamp(1.4rem, calc(1.4rem + ((1vw - 0.32rem) * 0.4167)), 1.8rem);clamp(1.4rem, calc(1.4rem + (1.8 - 1.4) * ((100vw - 32rem) / (128 - 32))), 1.8rem);

The heading font weights can be set to 700, and these can be changed to suit your website's needs.

Body Text

Next go to Global Settings/Body Text. As for the headings before, set the Font Size field to "none". Copy and paste the clamp function contents from the clamp calculator used for the headings. Often the paragraph element is the same as the h6 settings.

Sections and Columns

These settings are found under Global Settings/Sections and Columns towards the bottom.

Columns

Delete all the column padding fields and set each to "none". These settings are difficult to override elsewhere.

Sections

The side padding values are not important, but a good start is 3.2 rem for each side. For the section top, use a value from 8 rem to a maximum of 12 rem.

Links and Animation

In the Global Settings/Links leave the Link Wrapper blank, the colours can be set elsewhere.

Next, go to Global Settings/Animate on Scroll and make sure all fields have been cleared.

Finally, go to Global Settings/Scripts and enableSmooth Scroll to Hash Links with a tick and then set the Scroll Time to 500ms as a good starting point.

Leave a Reply

linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram