CSS Framework
This stems from Test building component through our styleguide with tailwind by jibees · Pull Request #7543 · openfoodfoundation/openfoodnetwork · GitHub. We aim to reach an agreement on which framework we’ll go with.
What follows are the meeting notes.
Why we need this?
Some context. This is tied to the Backoffice UI uplift, which requires a style guide. We need to build components and be able to customize them, with consistency and quickly.
In which tech are we going to write those components?
Using a framework
It seems that we want to rely on a framework and not write all our CSS from scratch. There’s consensus there.
MD Bootstrap
It’s based on Bootstrap 5, it has a bunch of pre-styled elements and components, like building blocks. Bootstrap 5 has also utility-classes.
It’s basically Boostrap 5 + Material Design components.
Pros
- We can start using components right away. We are productive since day one. It may not be the same as diverging from Spree because we’re going to keep building a web app. The components won’t change so much.
- Styling can be tweaked through SASS vars.
Cons
- Having a list of pre-built components, might lead us to having to customize them, and that becoming too complex.
- Some components we need are not built and need to be written by us. The moment we write CSS we can have common issues due to lack of encapsulation. We can use ViewComponets to impose that encapsulation.
TailwindCSS
Is a utility-first framework. You only have the utility part of Boostrap, for instance. There are no components to pick up. You have to compose things with utility classes.
You can provide your own list of colors, fonts, etc.
Pros
- Composability and encapsulation
- You can almost forget about writing any CSS
- You have full freedom to build anything.
Cons
- Harder to start working with it. You have nothing pre-built. You’ll have to build everything.
- Contributors may need a decent amount of experience in order to use it.
- We might lose contributors that don’t want to see Tailwind ever, but that could apply to our Angular codebase as well.
- The closest you get to have pre-built components is by copying from Tailwind UI or other places so can know how you could build them.
WebComponents
This is not a CSS framework but it may be worth considering it while discussing this, but not directly related.
Common browsers seem to support it except Edge.
Action items
- How granular can we get with ViewComponents.
- Implement the same demo with MD Bootstrap. We need to see if we’ll write more custom components than we’ll reuse them.
- Customize a component to understand how that would look like.
- Then, do a demo with the rest of the core team over the code.
Eriol shared seems to fear that OFN’s complexity might be too much for something like MD Bootrstrap.