Bootstrap vs. MUI?

[bastislack]

We are mostly using Bootstrap right now, however, we could also use MUI as an alternative. MUI has a nice slider, which right now we are using from a separate package. The slider does not justify rewriting everything with MUI but we could just think about whether we want to continue with Bootstrap or switch to MUI (or something else like Tailwind CSS).

[WaldemarLehner]

I can vouch for Tailwind, having used it with Vue3 for my Portfolio rewrite and Next.js/Remix for my Bachelor's Thesis.

One thing you need to consider is that Tailwind is not a component library like MUI, but a CSS Utility — which means you would still need some sort of library for Ranges, special input fields, etc... (PS: I am not sure if I would call Bootstrap a Component or a CSS Library, but I would argue that Tailwind is way more "low-level" than Bootstrap or MUI)

It does not really do anything other than add CSS classes while only importing the ones it finds when searching for strings in the source file.

Styling components is cumbersome in React and I feel like simply being able to add the classes in HTML should get you the desired result fairly easily.

Just beware that most of the HTML will be class definitions:

[WaldemarLehner]

Small amendment: There is also Flowbite. It's a component library build ontop of Tailwind. Flowbite does provide a Range Component which is limited in that you cannot set two values inside the range (as in… there is only one selector). What might work is to import react-range and style it with tailwind for that specific use case.

[WaldemarLehner]

I also stumbled across this thing: https://daisyui.com/

Apparently it builds upon TailwindCSS and provides classes for common UI Elements. I might give it a try for another project and see how easy it is it work with

[JulianDietzel]

What would be the benefit to switch away from Bootstrap apart from having a nicer slider? Seems like every single Component would need to be rewritten if we were to switch, which is quite a bit of development overhead.

[bastislack]

@WaldemarLehner Would it be much overhead for you to change from Bootstrap to something else, while you are rewriting the app in TS?

[WaldemarLehner]

Not at all. In fact I would prefer TailwindCSS. I could copy most of the building blocks from other projects.

On Thu, 20 Apr 2023, 19:47 Sebastian Egger @.***> wrote:

@WaldemarLehner https://github.com/WaldemarLehner Would it be much overhead for you to change from Bootstrap to something else, while you are rewriting the app in TS?

— Reply to this email directly, view it on GitHub https://github.com/bastislack/highline-freestyle/issues/252#issuecomment-1516718015, or unsubscribe https://github.com/notifications/unsubscribe-auth/AGTHPAPJX4UZHXBKXYMLARLXCFZB3ANCNFSM6AAAAAAWJKJ5N4 . You are receiving this because you were mentioned.Message ID: @.***>

[Dosbodoke]

I also think that Tailwind is the way to go. We can enhance the UI so much. Maybe I can give a try on it

But do you guys don't think that this task and migrating to vue #242 + ts #245 should be different tasks? If the UI will be exactly the same, we can recreate all the current styles on Tailwind. But if we need, for example, to insert or delete components to change the UI behavior, it can be risky whiteout TypeScript

[JulianDietzel]

I'd agree with @Dosbodoke that if we do a UI overhaul it should happen separately from the migration to Vite which already is getting tangled up with the migration to TS (for which there might be good reasons, but still the scope is already bigger than it needs to be).

This would a) reduce the scope of the mega commit which is going to be the switch to Vite and b) allow us to collectively figure out a design we like and implement it incrementally.

[bastislack]

Not at all. In fact I would prefer TailwindCSS. I could copy most of the building blocks from other projects. Let's go with Tailwind then :)

And I guess it makes sense to keep the UI changes separate from the migration to Vite, except you (@WaldemarLehner) have good reasons to do it all at once.

[WaldemarLehner]

I can try to not touch the UI all that much. I will have to change the UI Component's internals as there are some patterns used that aren't that clean and that TS is not all too happy about.

[JulianDietzel]

This gets addressed in the rewrite. We settled on using TailwindCSS for styling with Shadcn as a component library (#305).