When I joined in January of this year, I had a call with one of our product designers, Pawel (@pp).

We discussed the design system that was to be built and I was on board for surfacing it in Storybook. It is still a work in progress, but you can see it in action at storybook.forem.com.

Fast forward a bit and we had another discussion about CSS. We opted to go with bespoke CSS utility classes.

Here's Pawel's PR for that if you're interested

For those that have contributed to the Forem code base in the frontend, at some point, you have most likely touched some CSS. Not many have used our CSS utility classes though unless it was brought up as there is no documentation for it. Even core team members aren't really aware!

This PR changes that. Now there will be documentation hosted for utility classes in Storybook. At the time of writing, the PR is still in review, but will most likely be merged this week. It's merged!

It's mentioned in the PR, but you can check out the PR's Storybook so that you can see it in action.

Also, thanks to Storybook's built-in filtering, it's easy to find a utility class, e.g. searching for flex.

Screenshot of Forem's Storybook with CSS utility class documentation being filtered

If you have any questions or feedback, feel free to drop a comment in the PR, send me a connect message on forem.dev or hit me up on Twitter.

Looking forward to your future contributions!