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.
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.
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.
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.