Sizes & Spaces 📐

In the Oxygen global styles, we are also given the possibility to manage margins, paddings and sizes.

These styles are managed with REM units to keep all the website fluid. So they are automatically responsive in all devices.

Fluid sizes

Changing the size of the root font size dynamically allows us not only to implement fluid typography techniques, but also to make the entire site responsive automatically by changing margins, paddins and sizes.

Defining a system

When designing and building a website, it is important to remain consistent, especially in sizes and spaces. Most inconsistent layouts are created by a confusing use of margins and paddings, which turn out to be different every time.

A very simple and effective approach is to start from a base value and create a scale of values using factors or multiples of that value.

Here is an example of what we mean, using 1rem = 16px as a base value.
Designing the system - Refactoring UI Wireframe Kit Oxygen Builder

Credits: Refactoring UI

In this UI Kit we use a very similar approach, making use of 1rem as a base unit and using multiples and factors.

By changing the value of 1rem dynamically, the kit will then be automatically responsive.

magic-wandcogcamera-videopicturetaggiftdownloadquestion-circleframe-expandlayerstext-sizehighlight