Re-inventing the wheel – Re-write Bootstrap components in Blazor

Hello folks, I am working on a personal project that looks stupid for some, but with a great value for me and maybe for some others around the globe, I know that this project may looks duplicate for many other projects on GitHub for people trying to de the same thing but in my humble opinion these projects does not satisfy my needs at leads and that is the first motivation that make me do this Wheel-Reinventing of bootstrap.

most of the libraries that i have checked on the internet use special naming for their components, for example a div get called “paper” I as remember which does not make any sense. some libraries covers bootstrap generally in good way but lacks some essential functionalities like color template and themes.

So here, is what I am planning to do, I will develop a fully functional Bootstrap library that covers the most used functionalities and components by me and sure many other less needed bootstrap functionalities will be added on the long-run.

The other thing that I need to focus on, is color themes and templates, the library should support changing colors on the fly without the need to refresh the page. so the user can change the colors of the website/App without the need to refresh or reload the page.

The library should also provide custom components like textbox with icon in the left and an icon on the write, another example could be an area or a div that get divided into two parts one on the left and another one on the right, and all of that will be coded in the component itself, so the consumer will no longer need to write any code in order to have this logic, all he needs is to use the previously coded component for that purpose.

I get this idea I a were working on a personal project (Dating application) I found my self using a bootstrap library that I have found on GitHub that wraps bootstrap, but I have found it very basic and most of the functionalities that I were looking for is not supported.

The Road Map

  • Covert the most used HTML elements in Bootstrap components like <div>, <p>, <a> ..etc in separate components.
  • Cover the HTML components that have been developed in unit tests using BUnit.
  • Develop Blazor components that cover Bootstrap components that will be based on the basic HTML components that we I developed before.
  • Covert the Bootstrap components with Unit tests using BUnit.
  • Develop the theming mechanics.
  • Develop different themes for Bootstrap that use the the previous theming mechanics.
  • Cover themes with unit tests using BUnit.
  • Develop extra components based on the bootstrap components already developed.
  • Cover the extra components with Unit Tests using BUnit.
  • Launching the library on GitHub + Nuget package. 🥳

If you have any other idea, don’t hesitate to mention it in the comments below.

Best day!

By Mahmoud AL ABSI

IT developer, Physical therapist and a proud father of a great family

Leave a Reply

Your email address will not be published. Required fields are marked *