Add Fluid Typography classes

[yvonnetangsu]

READY FOR REVIEW

Summary

• Add new fluid typography classes that I added as custom TW classes in the OOD Momentum site
• The different between Fluid Typography and our good 'ol modular typography is that, modular type works in step functions when the jump from one breakpoint to another, ie, the font sizes don't increase gradually as you adjust the browser width.
• Basically this concept
  https://www.aleksandrhovhannisyan.com/blog/fluid-type-scale-with-css-clamp/

Needed By (Date)

• 🤷🏼‍♀️

Urgency

• Not urgent

Steps to Test

1. Look at code
2. Look at this plot and chart in google sheet showing what these classes do:
   https://docs.google.com/spreadsheets/d/1AN9eV_ECXc9MzTZUc10hiLjOHeOCDTutC5tMHOCPqgo/edit?usp=sharing
3. Look at the preview and click on the Fluid Typography section
   https://deploy-preview-943--decanter-v7.netlify.app/#text__fluid-type
4. Scale browser size from XS to 2XL (1500px) and inspect the smooth font size increase

[sherakama]

This looks good from a visual and code standpoint. A couple of things I'd like to see

1. Release notes about usage
2. An update to decanter.stanford.edu documenting this usage

Also, I imagine you've talked to UX about this. Can you tell me more about who knows about this and what their guidelines on the usage of this font utility are?

[yvonnetangsu]

This looks good from a visual and code standpoint. A couple of things I'd like to see

1. Release notes about usage
2. An update to decanter.stanford.edu documenting this usage

Also, I imagine you've talked to UX about this. Can you tell me more about who knows about this and what their guidelines on the usage of this font utility are?

Thanks @sherakama! I'll be happy to add release notes and update the decanter website.

Good question about UX - I should talk to the UX team about adding this utility on the dev side. I've discussed with Kerri previously about using these in projects and she thought it was a good idea (and kind of necessary in some cases), but since it's impossible to have a fluid font size like this in Figma, this isn't something that's currently in the Figma side. So this is more of a utility for devs. I'll talk to her about this in our next 1:1 👍🏼

[yvonnetangsu]

Also, I actually previously added a scss mixin on Decanter 6 that kind of does the same thing, but I don't think it's been used much (or at all), so I'll probably bring that up in a future dev chat too.

[yvonnetangsu]

Also, I actually previously added a scss mixin on Decanter 6 that kind of does the same thing, but I don't think it's been used much (or at all), so I'll probably bring that up in a future dev chat too.

It looks like I lied 🤣 I didn't add it to decanter 6 apparently, but it's on Giving (and probably some UComm repos)
https://github.com/SU-SWS/ood_giving_site/blob/dev/src/scss/utilities/mixins/_fluid-type.scss

@sherakama Should I get this into Decanter 6? I know we're "sunsetting" 6 but it's still actively being used everywhere 🤔

[sherakama]

Also, I actually previously added a scss mixin on Decanter 6 that kind of does the same thing, but I don't think it's been used much (or at all), so I'll probably bring that up in a future dev chat too.

It looks like I lied 🤣 I didn't add it to decanter 6 apparently, but it's on Giving (and probably some UComm repos) SU-SWS/ood_giving_site@dev/src/scss/utilities/mixins/_fluid-type.scss

@sherakama Should I get this into Decanter 6? I know we're "sunsetting" 6 but it's still actively being used everywhere 🤔

If you want to spend the time committing to version 6 you can. I'd like our stuff to use V7 going forward but we do have quite a few properties on V6 still.

[yvonnetangsu]

I have a 1:1 with Kerri tomorrow (Friday) so I'll get her thought on this and report back.

[yvonnetangsu]

Talked to Kerri today, and we have her blessing on this 👍🏼 🎉 😄 I'll write the release notes. After this is out, I'll update the website to include some notes about this utility.

[sherakama]

Great.

Internally, I'd like to see an announcement at a future dev chat and/or something posted in a slack channel.

[yvonnetangsu]

Great.

Internally, I'd like to see an announcement at a future dev chat and/or something posted in a slack channel.

Happy to do both! I do plan on talking about this in a future dev chat, and I'll post a note about the release in the Decanter slack channel as well 😄

[sherakama]

To unblock you for getting this merged, you can go forward with the merge if you create a ticket somewhere to come back and document the work. Even opening up a blank PR into the website would be fine.

[yvonnetangsu]

To unblock you for getting this merged, you can go forward with the merge if you create a ticket somewhere to come back and document the work. Even opening up a blank PR into the website would be fine.

Thank you @sherakama 😄 ! I feel bad for not getting back to this sooner. I'll merge it in and come back to work on the documentation after webcamp - it's a busy month.