Refactor CSS to use rems (#27) · Issues · Indienet / Site

Refactor CSS to use rems

@delrueba and @FraukeDigipolis pointed out the flaws in using ems for sizing in a component-based system. (Nested components could result in funky sizes.) We discussed the possibility of using a mix of ems and rems (using ems broadly results in needing to write less CSS) but I think we decided that just rems 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 rems
Refactor so opening { are on same line as element:

Find   : (.*?)\n{
Replace: $1 {

@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:

```regex
Find   : (.*?)\n{
Replace: $1 { 
```

Edited Mar 18, 2018 by Aral Balkan