Just for fun : MubBlazor and Blazorise in the same application

[MBNSoftware]

Hello,

Just out of curiosity, I was trying to mix both UI frameworks and it's working quite nicely.

There are obvisously some issues, mainly with colors and themes as both are using their own systems. But for non-visual components or those that don't need theming, I think it could be useful.

Of course, there is no real-life use case behind. It's more of a programming challenge than a real need. But I thought I could share it anyway.

The repo : https://github.com/MBNSoftware/MudBlazorise01

It's a basic Blazor app, created from MudBlazor template. Then I have added Blazorise and some examples in the home page.
Examples are those present on their respective web sites, only slightly modified to accomodate some needed changes (same Color, Margin or Size enums in both frameworks, for example).

Regards,

[stsrki]

Hello @MBNSoftware, thanks for sharing.

Actually, last year, I tried implementing MudBlazor as a first-class CSS provider for Blazorise. It was just a proof of concept to see how hard it would be. Surprisingly, it was quite easy. MudBlazor has a lot of similarities with Bootstrap, which is making it easier.

Why did I not proceed with it? I felt that it would lead to a backlash from the community. I don't know. Maybe it makes sense to try it again. It is definitely doable.

[MBNSoftware]

Why would the community react that negatively ? After all, this would be all about the best of both world, to me.

Each framework has its strenghts and weaknesses, each one has some things the other doesn't, so using both makes sense. Not that it sounds like an evidence but if you think about using the best tools for your projects, mixing frameworks is not that stupid.

That said, there are many technical constraints in trying to do this, I admit. But it's also a mind challenge that can be beneficial.

With this in mind, I will still try other things, like changing the "master" (Blazorise instead of MudBlazor, for example), using another framework like Havit Blazor, which is also using Bootstrap, and so on.

Perhaps it won't go anywhere but perhaps there could be some (good) surprises, who knows :)

[stsrki]

Why would the community react that negatively ? After all, this would be all about the best of both world, to me.

Not sure exactly. Just that I "felt" like it from reading many Mud users comments on various platforms. They are usually quite vocal on defending their free-open-source library of choice. But maybe I'm too pessimistic :)

That said, there are many technical constraints in trying to do this, I admit. But it's also a mind challenge that can be beneficial.

I like technical challenges. So I find this a plus.

[MBNSoftware]

Hello,

Just to let you know, I'm now using Blazorise along with Havit Blazor (with Bootstrap framework).
Havit Blazor is used for its theme handling, with dark mode and "better looking" components (better looiking to me, it's only a matter of taste ;))
Blazorise for everything else : placement of objects, many powerful components (better technical/graphic design or more ways to customize them).
I love things like ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnWidescreen">. It's really easy to set breakpoints this way. Same goes with other attributes like Padding, Margins and so on, of course. This syntax is a winner !

As said above, I'm using the best of both worlds.

Here is an example of the result. Sorry for the many obfuscated information but those are informations I can't disclose publicly.

Same with dark mode :

Saying that I'm happy would not be enough. It's a real pleasure to use Blazorise.

If I had a request for v2, it would be dark mode handling. But since I have a workaround (using Havit Blazor), I can leave without it :)

And when this project will be over, you will gain a sponsor.

Regards,
Christophe

[stsrki]

Thanks for sharing. Both Havit and Blazorise should be fairly easy to combine, considering that both work with Bootstrap in the end.

I love things like ColumnSize="ColumnSize.Is12.OnMobile.Is4.OnWidescreen">. It's really easy to set breakpoints this way. Same goes with other attributes like Padding, Margins and so on, of course. This syntax is a winner !

This is one of the things I'm most proud of in Blazorise. It was a pain to implement properly, but it was well worth it. I'm glad that a lot of people appreciate it :)