Using relative units

Questions
1

When building sites, I prefer to use all relative units for fonts, margins, etc. Looking at the default stylesheet for divhunt, it appears to use absolute units in px.

What’s the recommended way to switch over to using relative units?

  1. I use font-size: 62.5% or 100% set at :root. I don’t see an existing :root being configured, is there a recommended place to add this?
  2. What would be the easiest way to modify all the existing stylesheet definitions (H1, H2, H3, etc) to use relative units (rems/ems) instead of their current px values? The best I could see was click one by one, choose their global selector and edit each by hand. Is there a way to see the entire global stylesheet somewhere as a whole?
1 Like
2

Hi,

  1. Currently default values are in pixels. But we have all units available. Best way to edit global settings, is not to edit :root, its better to edit body tag.

  2. Best way is to edit global h1, h2, etc on your project. If you click on green part on image below, you will get a popup to edit globals of selected element, in this case heading 2.

That same thing you would do in question 1 for body tag.

image
image1911×481 80.7 KB

3

Is there any way to see all of these globals on one view? Or I have to click on each element and update them one at a time?

1 Like
4

Currently only way is to check 1 by 1. We will try to think of some solution where you can easily view all at once.

1 Like
5

Just throwing my hat in here too – I love using relative units but understand why Divhunt chooses to use pixels primarily, for ease of visual manipulation.

Also love the idea of seeing all globals at once!

It’s like @coreystup is in my brain, haha :slight_smile: