Sticking to one UI framework during development

For the past few days, I have been having this confusion in my workplace. I'm struggling to fix certain things in the code that I wrote a month back. I have been using Bootstrap for the UI design in my Angular project. But when I use Bootstrap, there are certain things that I'm not comfortable with, for example, there is no fancy inbuilt Datepicker in Bootstrap library. I'm forced to use an external library to make my datepicker in the form a little bit fancy. This is when I ran into problems.

Angular Material design

Apart from the datepicker and drop down functionalities which are quite basic for an application with forms, I also want a grid functionality to be implemented for CRUD operation. I thought of building my own grid on top of the Bootstrap 4 framework but realized that it is not as easy as I think. I sensed that it can take several months to achieve the complete functionality without any issues and with the limited time that I'm having. One of my friends gave a good suggestion to use Angular Material Design library which comes as an attachment with the core angular components. Material design is an interesting UI framework with a neat design. Our new Gmail is built using Material design.

Source

Angular provides a neat library with so many options to do a neat material design. I watched some of the tutorials and wanted to give it a try. But I was not very happy with the look and feel of all the controls. It can be because I'm already used to Bootstrap for UI design. But still, I wanted to give it a try and completed my Grid table fully in Angular Material design. The output was very impressive and thanks to the tutorials that helped me out. But now the problem is, my forms are not in the material design. I had CSS issues in the material form that I was trying to design. The field labels were not aligned properly. I spend a few days to correct that but I couldn't manage to be patient to fix the issues that the form had. The reason is that in my mind I strongly had a feeling that I can switch back to bootstrap itself for form design and use Angular material for my Grid layout alone.

Unfortunately, I ended up building my application like that. My forms are now in bootstrap and the grid layout is in angular material design. The overall output looks neat but I'm not convinced so much with this type of structure.

Bootstrap 4 and Angular Material

From the experience on this project, I found that it is better to use either Bootstrap completely for everything in the project or just use Angular Material itself for all the designs in the project. Using them together is not a great idea because I experienced a few issues in the console where the structuring of the code did not co-exist with each other very well. Then later when I read some articles online, they also suggested that it is good to use only one framework completely for UI design because there can be contradictions and issues which may not be easily solvable.

Source

For now, I'm planning to complete the whole project with this plan to have forms alone in bootstrap and other things in Angular material design. After I get more clarity and familiarization on the usage of flex for Angular Material form design, I will spend some more time to convert all my forms to Angular Material. I even thought of using some of the already built templates that were available online. The problem with those templates was that you have to learn and understand the structuring of the code in the template and use the same CSS class and the structuring of the code in the components you build. This project was a great experience for me in terms of UI design. I was also impressed by the responsive nature of Bootstrap 4 with so much flexibility to design whatever we want.

---

Posted from my blog with SteemPress : https://bala-blog.com/sticking-to-one-ui-framework-during-development/

---