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:
| base | The main colour of the website. |
| base ultra light | Lighter version of the main colour. |
| base medium | Mid-version of the main colour |
| accent | Colour used to highlight certain elements. |
| primary | Main colour for functional elements, like links. |
| primary hover | Hover colour for the primary colour. Should be noticeably darker or lighter and the same hue. |
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.
| Selector | Min | Max | Line Height | Clamp Calculation | Longhand |
|---|---|---|---|---|---|
| h1 | 3.2 | 4.8 | 1.3 rem | clamp(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); |
| h2 | 2.8 | 3.8 | clamp(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); | |
| h3 | 2.4 | 3.2 | clamp(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); | |
| h4 | 2.2 | 2.8 | clamp(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); | |
| h5 | 2.0 | 2.2 | clamp(2rem, calc(2rem + ((1vw - 0.32rem) * 0.2083)), 2.2rem); | clamp(2rem, calc(2rem + (2.2 - 2) * ((100vw - 32rem) / (128 - 32))), 2.2rem); | |
| h6 | 1.4 | 1.8 | clamp(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); | |
| p | 1.4 | 1.8 | clamp(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.
Related Posts
One comment on “How to Set up Oxygen Builder”
Leave a Reply
You must be logged in to post a comment.
[…] As for my more recent builds, I used Oxygen Builder by Softlyy. The resulting website loads fast and was easy to configure to suit AEFA's needs. Rather than using the included designs, I used the base setup discussed by Kevin Geary on YouTube. Learn more. […]