Refactor CSS to use rems
@delrueba and @FraukeDigipolis pointed out the flaws in using em
s for sizing in a component-based system. (Nested components could result in funky sizes.) We discussed the possibility of using a mix of em
s and rem
s (using em
s broadly results in needing to write less CSS) but I think we decided that just rem
s for all units (including font-size
, margin
, padding
etc.) would allow us to be more consistent across all our CSS.
In doing this, we are bearing in mind that we want to write as little CSS as possible (maintainability yay!) so while this means we can override sizes in components very easily, it doesn’t always mean we should. Because we want to aim for consistent sizing across components and semantic meaning.
I (@laura) will update Indienet/Docs accordingly. Shoutout in the comments or the Indienet/Docs if I got anything wrong.
I’ll refactor in Indienet/Site on Monday. I’ll have a look at @FraukeDigipolis’s work in Indienet/Hallo.gent as a reference
-
Refactor CSS to use rem
s -
Refactor so opening {
are on same line as element:
Find : (.*?)\n{
Replace: $1 {