The use of rem inside the Fozzie components style

[semenkivje]

For discussion: Fozzie components could be used inside projects which are not using Fozzie styles package.
In that case, we couldn't rely on rem value for sizes or fonts because this value could be another on the project level.

[ashleynolan]

So just to clarify – is the issue that the base font size is set to 16px, or that the resulting rem values are calculated against that base font size?

I'm guessing the latter, which would make it awkward to change, as the way we bundle components through webpack means that it's the resulting CSS that gets imported by consuming applications rather than SCSS, which is easier to change.

If you can confirm though, as it's hard to know without seeing the application (unless you can ping me a link to look at the site too – best to do that via Slack).

[semenkivje]

Generating separate versions is probably not the most flexible idea. Since there may be projects with really custom value for rem. As I know some projects can use 62.5% as described here https://www.sitepoint.com/understanding-and-using-rem-units-in-css/
In this case, we will have to generate versions of the styles for each of them.

Are there any opportunities to remove rem usage at the component level?
Some UI libraries do not use them at the component level, for example
Vuetify - https://vuetifyjs.com/en/components/buttons/#usage
ElementUI https://element.eleme.io/#/en-US/component/button

What do you think about this?

[ashleynolan]

@semenkivje I think using rem's should likely be fine when we move more permanently to CSS variables (which will happen in the next couple of months I think). As I understand it (needs a little more of a spike to make sure) this should then mean that any consuming app can set their base font size to whatever they want and it'll dynamically be reflected throughout the framework.

I think the main next steps will solve the short-term issue PC is seeing – we'll move fozzie over to use 16px base font size, and then the components will be updated to reflect this too. Then in the long-term, we'll move the framework over to use CSS variables, which should mean that we have full flexibility over setting the base font size inside any consuming application.

@dandel10n has already made a ticket to update the base font size, so that should get done next week. We'll let you know once this is also reflected inside components. As it's a breaking change, it'll be a part of v6 of fozzie (which includes the new Icing updates for type and colours), unless we also back-port this into v5 as well (we can do that, but you'll eventually need to upgrade to get the latest versions of components, as we won't be able to keep supporting this version once we fully release v6.

So there may be some consideration over this rollout with @chrisfirth86, to ensure that when you do integrate with this new version, the styling will be in-line with the new JETSans font and Icing colours.

[semenkivje]

Thanks for the information and help from your team @ashleynolan.

About the fonts.
Perhaps this is worthy of a separate discussion - but for me, it's related as we use some global staff on atoms level:
I have checked and for example, the button component has font definitions at the level of its styles.
But wouldn't it be easier to update styles(site font) - if we rely on the site font without declaring them inside atoms components?

For example, if we will have some new components in the next version of Fozzy and they will have another font family. In this case, we should update the version of all atoms components and our site styles to use one of them.

[ashleynolan]

@semenkivje Yeh – me and @dandel10n were actually talking about this last week too. I think the font declarations you mention need to be removed too.

They are there from when we used to have different heading and body font families (back when we used to use – now that we use JetSans for both headings and body copy, we can delete these references and just inherit the base font as you mention. We'll be fixing this shortly (or feel free to put a PR in to remove it if you need it before we have chance to update it).

[dandel10n]

@semenkivje hi, I removed font declaration from the button component and the base font has been updated to 16px as well 👍