Turning Bootstrap UI Into MudBlazor (No Components Needed)

welcome back to just blades of programming and today we're going to be dealing with mud blazer again except that i want to convert a bootstrap project let's say the blazer you know project template whatever it was i want to convert that into using mud blazers ui the material ui that it brings without bringing in all those components that you need in order to make it work so this is possible it is a bit of work and it's also not going to work 100 of time you're going to get all the features out of mudblazer because you're not going to be using their components or their logic you're just going to be using the ui that the mud laser library brings so in this case i'm just going to be working off the table so i can show you just how annoying it could be i guess but also that it's possible to do the conversion between bootstrap and mud blazer ui without adding components to it from mud blazer although my caveat and my recommendation to all of you that if you are in this position then you might want to look for other libraries that are much easier to implement but if not and if you're just starting out a project i would recommend that you start out either with mudblazer in mind or just stick to the bootstrap project that you're working on because doing this is kind of um it's a little bit more effort than it's expected to be and honestly it's probably not worth doing but this is for science and for anyone that's been caught up in this situation where you want a solution to converting your boots up to mudblazer this will help you out so let's get started just to help you guys follow along a little bit better i'm going to start a brand new blazer project just let me nothing new in there we will be adding mud blazer into it uh into our packages but basically we're going to be starting from scratch so please follow along if you can so we're just gonna go to visual studio 2022 create a new project and we're not going to do a mud blazer project in fact it doesn't matter if you use a blazer server app or the blazer web assembly i'm just going to use a blue turbo because it's just easier mod blade there's no components needed just to make sure that uh that you know that this is just gonna be a normal project i'm gonna run it real quick once everything goes up so you can see this is just the normal mud blade i mean not the muppets this is the normal bootstrap version of um of blazer so it's just a normal project starting out nothing new is here so the first thing we're gonna do is we're gonna add mud blazer to our project so we've in order to do that go to dependencies oh yeah yes dependencies manage nuget packages and we're just gonna install modblazer in here so pick the one that has the highest download rate basically as the most latest one and that has been installed give it a check there it is now we have to go through the process of manually installing mudblazer into our project we have not done that yet it's already it's in our project in package form but now we have to uh basically activate it in our our project so the first thing we're gonna do is go to imports we're gonna add it there so just mud blazer and we're good with that i'm gonna go to the program mod lasers we call moda blazer services then down here one add builder and copy paste this here builder.services.addmud laser services that's really all you need for here the next thing you will want to add are the [Music] um in the main layout here the only like i know i said that we don't need to add components but we do need to add the theme component for mud blades in order for this to work so you just have to do that so these are the three uh components you might need in this case we really only need the one for the month theme provider but in case you're gonna take this project further and work with other components that might interact with your dialog boxes then you will need these two down here as well for the moment you really only want this one but i added all three there just to have them just in case sorry about that my camera died but i did miss one thing we have to add a few of the dependencies to our layout page so let's just do that what we need to add here is the js script for mudblazer and the style for mudblazer i'm just gonna copy and paste it these are all on the website in case you want to know where i'm getting like all this information from so you can just copy paste it from there in the manual install portion of that website so that is the link to the css and now i want the min.js for modblazer as well so i think that that oh no i missed one more and it actually asked us to put two in there like this that is the font the mud laser chooses to use or something so you'll see these two links in there that'll ask you to put in and then the mudblazer.js at the end of it here i think now we are good to go with implementing mudblazer for as i said before we're going to work on the table here so we want to convert this table from what it looks like in uh using bootstrap to using mud blazers so in order to do that you do a few things actually so there's actually going to be a few classes we're going to have to add to it in order to make mud blazer work more or less the same as it does when you're using the components because the components are actually doing something in the background that you don't see when it comes to the css and html is creating things that um that you don't have to worry about which is why i say that if you are going to go down the path to creating a project and using material ui you should use that off the bat if you want to use my blazer use the components off the bat instead of blowing it after the fact because then you'll be stuck trying to figure out how to make all this work so the first thing we want to do is add a div here for the main content so in order to make this a little easier i'm just going to make the div like this and leave the table out for now so there's a few preliminary elements that we want to add here because this is how mud blazer handles it in the end if you don't believe me look at any of their projects on their website or create the mud blazer the one that mud blazer gives you my blazer template and look at how they build out their uh how the components build up the html so i want that the next thing you're going to want is one of these here so make sure that you're always closing these divs offs so the main content is where the main table is going to go in and then we want the container as well to house all that because that's how it creates it so after that comes basically how it handles the um like if you look at the the site you'll see that the table kind of like hovers a little bit above the elements so i don't know we're going to be able to see it too well here but we should be able to but that's why we need this one that says mud table mod xs table multiple helmet elevation zero all these classes these will have to go into their own divs as well this will control the size of the table when you are in the container and then now we need the container for the table itself so yeah this is why i'm telling you if you ever stuck with the situation try not to be it's not very good so now we have the actual mud table container we're not done yet we are not done yet and finally now we could move all the table stuff in there so before we do the you know copy paste this whole table stuff and put it in here i'm first going to leave myself a little note the end of the table sorry about that guys it's my keyboard and then i'm also going to just push this all the way down here so what we're going to do here is add all the mud table classes that we need to add into this table so the first thing we're going to do is instead of this clasping table it's now going to use the mud table root and this header will also have its own class as well so the class it's going to have is going to be called mud table head so if you're wondering how i came up with all of this i basically looked in the inspector to see how it built it all out because this is basically what you're doing with the css the only difference is that you won't be using any of the logic that it supplies uh when it does the component stuff so you're really just trying to reconfigure what mud blazer is doing in the background from scratch into your ui again i don't like this method of doing things and if you're gonna go into this you should really plan what you're making out but in case that is not an option well enjoy the work that you're about to get into because you're gonna do quite a bit of it it's better than replacing all your components with mud blazer stuff but it's still quite a bit of uh you know just a lot of copy paste busy work kind of stuff so here your header uh header the the the th elements here you have to replace you have to add the scope of column and then like class of mud table saw and then within that you could add your um your names to those columns with the classes mud button root mud table store label date so in this case the only difference between this and like a normal com a normal one laser component is the fact that you will not be able to sort them because it requires other stuff to it and i just don't think that it's worth adding into your table in this case now another caveat of doing something like this is that depending on the component you're using whether it's a table or grid or like a drop down or whatever there are specific components with specific classes that you need to add so i'm just going through adding all the ones that i want here so i'm just gonna go to the end and just add the other two since you kind of know what i'm doing i'm just replacing them with these t with these new modified th's with the span inside of them i'm just going to take this here and that one and now we still have the four labels or the four uh the four columns that we're gonna base everything off of the date the temp celsius fahrenheit and the summary but they are all within their spans and each span has a each one of them has their own classes that you need in order to mimic the actual um mud table look and feel and again the one thing that you're not gonna have access to is gonna be the uh the way you sort them so even though it might say it there it's not gonna do anything because you're missing the actual uh sort like logic let's say so in this case when we go to the t body we're going to add this class blood table body right there and for each one of these we're going to basically the same thing as up there so we already you already saw what we did with the table row we're going to add it here mud table rule that's another class we're going to add and then every one of these columns we're going to add another difference here so in this case we have a data label for date we add a class called mud table cell and then whatever it is that you're adding so we're gonna do that for each and every one of them so i already have the three prepared but what you're just gonna have to do is add the the classes and the attributes but i already have it ready to go so i'm just going to copy paste it because you already know what you need to do on your end and for you people with ocd out there i'm sorry because probably driving you crazy trying to make it a little bit neater there we go so that should uh do this should be the right class for the roll data label mud table mud cell the names that we have up there are the same names here and we kept the uh the same information that we want to show up in the cells i believe and that is all we need to do oh no we don't we need one do one last thing is actually copy this whole table stuff that we work down here so hard for and replace this with that so just copy that paste it here and now hopefully you copied it correctly i copied it correctly and we're gonna try it all out and if there are any issues here i'll let you know about them and i'll figure it out really fast because i'm going to edit it you know what i mean you're never going to know the struggle that i will go through to debug these things excuse me so this is what we want it to look like so i don't know if you know what the other one looked like before but it did not have the ability to do all this the look and feel is different as well and these should be buttons so what would happen in normal with a normal blazer component that did not was not stripped away basically you'll be able to sort them but here we don't have that functionality we don't have the um the logic that's needed to do this you're gonna have to do all that separately this is all just to add the actual css look and feel so if we went back and went over here so this is the original while we look like and then i'll just run the other one because i believe i closed it we'll do a comparing contrast this way so here is the mud blazer version you see that it's actually able to do the relative sizing a little bit better than this one is and it's also a little bit different too so here the the lines are different everything's different it's just using the normal bootstrap css in this case we've implemented the mud blazer css here now the issue with doing it this way as i've mentioned before is that when depending on the type of component you want to work on this is a table so you need table specific classes for this to work but if you're working with other stuff like let's say the buttons you need to use the actual mud blazer classes for the buttons same thing with the drop downs and all that stuff and the only reliable way that i found to do this because in the mud blazer documentation is not very clear it wasn't you weren't meant to do this first of all this was something you should be doing because it's not a very efficient way of developing your code if but blazer was meant to use your components and stuff in there but there are a few ways of going around this and the reason why i added these extra classes in there is because i saw that in my when i was working on this without some of these classes it didn't really work too well and it wasn't until i started adding like every all the pieces needed the mud blazer expects to have that it started working a little bit better so that's why i say that you will probably need to add all these things in order to make your components work um at least up to the mud container everything after that is related to whatever component is in this case we were using a table so we needed all the table related classes in order to make it all work as for the other ones the same principle applies so one way of looking through it is either building a mud blazer prototype of your own and seeing the inspector in that or going on the website because it has a lot of examples if i went to the mud blazer website and went to docs these will show you all the component examples it has so i'm using the table one so this is kind of like how i got it working like it's not going to be perfect because you obviously are missing a lot of the logic there but if you go there you go to inspect you'll see exactly how i got it all and that's basically what i'm trying to replace so again i don't like this way of doing things i don't i don't approve of doing this but if you're in a bind and you need to do this for whatever reason then at least you have a way forward and you can do it you can just replace your css your your classes and stuff like that using uh the material ui stuff that mud blazer brings however mud blazer implements its css and stuff by expecting other uh components to exist with other classes and stuff from what i have seen could be wrong about that and if you really really just want to make your life hell the other thing you can do is take these components and create your own css styles in css isolation or something i would rather avoid going that far but if you feel that you want to do some custom stuff maybe you don't like this color here you want to replace this palette with some other palette go go crazy go have fun me i want to make life as easy as possible and if i were to make a project using material ui for blazer i would just use mud blazers components and work with them from from the get-go like that instead of going back to my components and changing all the css using their classes so that is all there is today on this video and i hope that this helps someone out there i know it's a very niche way of dealing with things and i keep reiterating that this is not a good way of dealing with this problem but it is a way forward in case you do run into this situation i do not like this but hey sometimes requirements come in sometimes people come in that's you got no choice but to be like all right well i guess i gotta look into this now and this is a solution not a perfect solution but it's something you can work with unless you just want to go and replace all your components with mud laser components which i think is far harder anyways that's all there is today thank you very much um next tutorial will be out in a couple of days from now and let me know if you have any like subscribe comments all that stuff you know what i mean just keep on engagement i keep the engagement up maybe i mean and uh yeah you know next video will come out later i got something else that's different in mind it's not mud blazer related but who knows if you like my blazer videos let me know what you want to see all that good stuff yes blazer out [Music]

Channel: Just Blazor Programming

Views: 4,760

Keywords: blazor, C#, blazor C#, blazor 2022, blazor tutorial, .net blazor, C# blazor, what is blazor, .net 6, blazor webassembly, .net programmer, programmer, software developer, how to blazor, C# developer, Microsoft, mudblazor, bootstrap, material ui, bootstrap into material ui

Id: pLqdpKeNkWM

Length: 21min 56sec (1316 seconds)

Published: Sun Apr 10 2022