So recent i decided to start trying other CSS frameworks apart from my default bootstrap, and after comprehensive use of both bootstrap and materialize CSS i decided to write an article on the two Framework and which should you use for you next project.

I believe if you reading this article, you have at least a little knowledge in web development but if this isn't the case let me make some two term clear. Cascading style sheet (CSS) describes how HTML elements are to be displayed on screen or in other media, CSS saves a lot of work because It can control the layout of multiple web pages all at once. Next what are frameworks, a framework is a real or conceptual structure intended to serve as a support or guide for the building of something that expands the structure into something useful, in layman terms it's a structure that makes software development faster by providing simple guides and structures. So a CSS frameworks are software that hasten the design/ styling of HTML pages by providing a consistent design architecture, this is usually necessary for large site where more that a single developer would be working on different pages, but I believe using CSS frameworks in small sites would be overkill even i sometime do this 🙈🙈

Before i start with the comparison of the above frameworks, let me give a brief history / description of the above frameworks. Starting with Bootstrap, this was originally named twitter blueprint was developed by Mark Otto and Jacob Thornton at Twitter as a framework to encourage consistency across internal tools. it was released as an open source project on August 19, 2011 and since then there have numerous version of Bootstrap with the current version at the time of publishing this article being Bootstrap 4 with a new version (Bootstrap 5) stated to be released sometimes this year or early next year is everything goes according to plan. And then we have materialize.css which is a framework built around the google's material design concept and relative new compared to bootstrap making me a little skeptical to use it at first but have grown to like it, it was built by Alvin Wang, Alan Chang, Alex Mark, Kevin Louie and it's also open source just like bootstrap.

With the brief introduction above let's go into the comparison, will be looking at the following initialization, simplicity, functionality, components, speed, Docs, and Community.

Firstly initialization, this will be how fast it takes to setup the framework in a project. Well why the two frameworks are very easy to initialize, i would have to give materialize the win here for initial setup at least but as you start to grow your app you would need knowledge in JavaScript or Jquery to fully leverage on the power of framework and this is were bootstrap might thrive over it. and why didn't bootstrap win initial setup?, this is because as at bootstrap 4 all functionalities still heavy depends on Jquery not JavaScript and this can be can be risky given that Jquery 3.3 is currently considered as a vulnerable software according to google's lighthouse audit and for that sole reason bootstrap lost in it's initial setup phase.

Secondly Simplicity, this will have to do with how simple it is so use the respective frameworks and Bootstrap would win this round, maybe because it has more experience or was built by twitter devs or larger developer community but for whatever reason it may be in terms of simplicity bootstrap is simply just the winner from it CSS component to it's JavaScript functionality bootstrap is way better.

Thirdly functionality, this will have to do with the JavaScript aspect of the library, this will have to be a draw. Reason, in terms of UX bootstrap is more flexible than materialize, but the fact that the JavaScript uses Jquery to run materialize has higher customization of the code base to fit ones need while in bootstrap you would need knowledge on Jquery

Fourth component, well this will have to do with developer's preference, if you would like to have material design component use materialize if not bootstrap could do, the only issue with bootstrap is that isn't freaking popular making your site lose that unique feel although you can customize the CSS personally to gain that unique feel 🤷‍♀️🤷‍♀️. before we leave components if we were to consider the number of available component in each frameworks bootstrap would win hands down, having years of developers contributing and adding to already existing component has made it one of the largest component framework.

Fifth speed, when choosing a framework you always want to consider how slow it will make your site cause the faster your site the higher the level of viewer satisfaction and looking at the size of each framework bootstrap(147kb) and Materialize(90kb) it obvious materialize is faster and the fact the bootstrap is dependent on Jquery makes it even slower.

Sixth Docs and Community, you guessed it right, Bootstrap wins this one for all the same reason listed above, Materialize is size relatively new compared to Bootstrap.

So you might be wondering what framework should you use or learn, well if you looking for employment and you need to learn a framework i would advise you learn Bootstrap, it will be a plus on your CV given that its UI component can be integrated with frameworks like React and Vue and also if you have no know in JavaScript at all then bootstrap will also be a nice fit given that you don't need to twit it JavaScript to build a functional app, but if you want to build something with a mobile feel and you not looking for a job, then materialize will be a good fit given that it uses that material design concept that most android application have been using, apart from this the rest is totally based on preference, you can decide to not use any of the frameworks stated here and play around with foundation, Semantic UI, Material Design Lite and the rest, we have a shit load of CSS framework.

So how do i end this article🤔🤔, well i hope this article has helped you understand better the differences between this two frameworks and which is best suited for your next big project. shalom